DEV Community

loading...
Cover image for Exploring Essential JavaScript Spreadsheet Freeze Panes
Syncfusion, Inc.

Exploring Essential JavaScript Spreadsheet Freeze Panes

Suresh Mohan
Suresh is a Product Manager at Syncfusion and a technology enthusiast. He helps people follow best practices in coding and in using Syncfusion controls in their applications.
Originally published at syncfusion.com on ・4 min read

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');
Enter fullscreen mode Exit fullscreen mode

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 forum, Direct-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Discussion (0)