Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (46)ASP.NET  (48)ASP.NET Core  (61)ASP.NET MVC  (84)Azure  (28)Blazor  (84)DocIO  (19)Essential JS 2  (68)Essential Studio  (162)Flutter  (97)JavaScript  (146)Microsoft  (101)PDF  (57)React  (32)Succinctly series  (120)Syncfusion  (464)TypeScript  (30)Uno Platform  (2)UWP  (4)Vue  (26)Webinar  (21)Windows Forms  (54)WPF  (113)Xamarin  (124)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (105)Chart  (48)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (3)DataGrid  (41)Development  (248)Doc  (7)DockingManager  (1)eBook  (91)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (19)Extensions  (12)File Manager  (4)Gantt  (8)Gauge  (6)Git  (4)Grid  (26)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (1)M-Commerce  (1)Metro Studio  (11)Mobile  (205)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (21)Performance  (5)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (23)SfDataGrid  (8)Silverlight  (21)Sneak Peek  (16)Solution Services  (2)Spreadsheet  (7)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (9)Tips and Tricks  (54)UI  (113)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (18)Visual Studio Code  (10)Web  (189)What's new  (120)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Exploring Essential JavaScript Spreadsheet Freeze Panes

Exploring Essential JavaScript Spreadsheet Freeze Panes

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 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
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
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 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
Freeze Panes in JavaScript Spreadsheet

Reference

For more details, refer to the Freeze Panes in JavaScript Spreadsheet demos.

Conclusion

I hope you now have a better understanding of the freeze panes feature in the 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, MVC, Web Forms), Angular, JavaScript, React, Vue, UWP, WPF, and WinForms 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 to try out this control. Otherwise, you can download a free 30-day trial.

If you have any questions about these features, please contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top