Freeze Panes

Freeze panes let you pin header rows and leading columns so they stay visible while the user scrolls through the rest of the sheet.

Note: Freeze Panes are available in the Pro edition.

Basic usage

const ws = grid.worksheet;

// Freeze the first row (freeze header row)
ws.setFrozenRows(1);

// Freeze the first 2 columns
ws.setFrozenColumns(2);

// Unfreeze
ws.setFrozenRows(0);
ws.setFrozenColumns(0);

Getting freeze state

const frozenRows = ws.getFrozenRows();       // Number of frozen rows
const frozenCols = ws.getFrozenColumns();     // Number of frozen columns
const frozenWidth = ws.getFrozenWidth();      // Total width of frozen columns (px)
const frozenHeight = ws.getFrozenHeight();    // Total height of frozen rows (px)

How it works

When freeze panes are set, the grid is divided into up to 4 viewports.

┌─────────────┬──────────────────┐
│ Frozen       │ Frozen rows       │
│ header       │ (horizontal scroll)│
├─────────────┼──────────────────┤
│ Frozen       │ Main area         │
│ columns      │ (full scroll)     │
│ (vert scroll)│                   │
└─────────────┴──────────────────┘

• Frozen header — does not move when scrolling
• Frozen rows — follows horizontal scroll, stays fixed during vertical scroll
• Frozen columns — follows vertical scroll, stays fixed during horizontal scroll
• Main area — normal scrolling

Example: data table with frozen header

const ws = grid.worksheet;

// Set up header row
const headers = ['ID', 'Name', 'Department', 'Hire Date', 'Sales'];
headers.forEach((h, i) => {
  ws.cell(0, i).setValue(h).setStyle({
    bold: true,
    backgroundColor: '#1e40af',
    color: '#ffffff',
  });
});

// Freeze header row
ws.setFrozenRows(1);

// Freeze ID column
ws.setFrozenColumns(1);

Example: Excel-style freeze at B2

Freeze both column A and row 1, equivalent to selecting cell B2 and choosing “Freeze Panes” in Excel.

ws.setFrozenRows(1);
ws.setFrozenColumns(1);