# Freeze Columns and Rows

A tutorial showing how to freeze rows and columns in SpreadJS

## Content

# Freeze Top Rows and Columns

You can specify whether to have frozen rows or columns or both in a sheet. Frozen columns and rows do not scroll.

A line is displayed below frozen rows and to the right of frozen columns. You can specify the color of the line with the **options.frozenlineColor** property.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/cfrozen.png)

Frozen rows stay at the top of the sheet and frozen columns stay on the left of the sheet.

## Using Code

This example sets the first row and column as frozen row and column.

```javascript
activeSheet.frozenRowCount(60, 50);
activeSheet.frozenColumnCount(30, 20);
//activeSheet.options.frozenlineColor = "red";
```

# Freeze Trailing Rows and Columns

You can specify whether to have frozen trailing rows or columns or both in a sheet by using the **frozenTrailingRowCount** and **frozenTrailingColumnCount** functions. Frozen trailing rows or columns remain visible while scrolling the sheet.

A line is displayed above frozen trailing rows and to the left of frozen trailing columns. You can set the color of the line by using **options.frozenlineColor** property.

![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/trailingrowandcolumn.png)

By default, when the height of data rows and frozen trailing rows is equal to or greater than the viewport area, the frozen trailing rows are displayed at the extreme bottom of the viewport area. The same holds true for the frozen trailing columns which are displayed at the extreme right of the viewport area.

However, when the height of data rows and frozen trailing rows is less than that of the viewport area, you can choose whether to display the blank space between the data rows and frozen trailing rows or not. The **stickToEdge** parameter of **frozenTrailingRowCount** and **frozenTrailingColumnCount** functions can be used to control this behavior as shown in the image below:

| When `stickToEdge = true` (defaut value) | When `stickToEdge = false` |
| -------------------------------------- | ------------------------ |
| ![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/sticktoegdeparamtrue.png) | ![](https://cdn.mescius.io/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/sticktoegdeparamfalse.png) |

Similarly, you can also choose whether to display the blank space between the data columns and frozen trailing columns or not by using **stickToEdge** parameter.

## Using Code

This example sets the frozen trailing row and a frozen trailing column with **stickToEdge** parameter set to False.

```javascript
activeSheet.frozenTrailingRowCount(1, false);
activeSheet.frozenTrailingColumnCount(1, false);
//activeSheet.options.frozenlineColor = "red";
```