# Focus Cell

## Content

The Focus Cell feature highlights the active cell's row and column with semi-transparent bands. This visual aid helps users keep track of the active cell when working with large worksheets.
![SpreadJS Focus Cell highlighting the active cell row and column with semi-transparent bands while navigating a worksheet. ](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/demo-20260709.1161d9.gif?width=400)
Focus Cell is a workbook-level option. When it is enabled, the setting applies to all worksheets in the workbook.

## Enable Focus Cell

Focus Cell is disabled by default. You can enable, disable, and customize Focus Cell through the `spread.options.focusCell` workbook option.

```javascript
// Enable Focus Cell.
spread.options.focusCell.enabled = true;
```

Because Focus Cell is a workbook-level setting, all worksheets in the workbook share the same setting.

## Customize the Focus Cell Highlight

You can customize the highlight color by setting the `focusCell.color` option.

```javascript
// Enable Focus Cell and set a custom highlight color.
spread.options.focusCell.enabled = true;
spread.options.focusCell.color = "rgba(255, 165, 0, 0.25)";
```

You can reset the highlight color to the default color by setting `focusCell.color` to `null`.

```javascript
// Reset to the default highlight color.
spread.options.focusCell.color = null;
```

You can also set Focus Cell options by assigning the `focusCell` object.

```javascript
spread.options.focusCell = {
    enabled: true,
    color: "Accent 6",
    opacity: 0.22
};
```

The `color` option accepts theme colors, standard color names, and valid CSS color values.
Examples include:

```javascript
spread.options.focusCell.color = "Accent 6";
spread.options.focusCell.color = "green";
spread.options.focusCell.color = "#00b050";
spread.options.focusCell.color = "rgba(0, 176, 80, 0.225)";
```

>type=note
> **Highlight Transparency**
>
> * If `color` includes an alpha value, such as `rgba(255, 165, 0, 0.25)`, SpreadJS uses that alpha value for the highlight transparency.
> * If `color` does not include alpha, SpreadJS uses the `opacity` option.
> * If neither is specified, the default opacity is used.

When a theme color is used, the Focus Cell highlight color changes with the workbook theme.

## Focus Cell Behavior

When Focus Cell is enabled, SpreadJS highlights the active cell's row and column without changing worksheet data or cell styles. The highlight is drawn as a visual aid only.
The active cell remains visually distinct. The highlight bands do not tint the active cell itself, so the active cell border and selection state remain visible.
![SpreadJS Focus Cell keeping the active cell visually distinct while row and column highlight bands avoid tinting the active cell itself.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/behavior1-20260709.a4cb87.gif?width=600)
When the active cell is part of a selected range, the highlight bands avoid covering the primary selection area so that the selection fill remains clear.
![SpreadJS Focus Cell behavior with the active cell inside a selected range, where highlight bands avoid covering the primary selection area.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/behavior2-20260709.0c4189.gif?width=600)
If multiple ranges are selected, the range that contains the active cell is treated as the primary selection. Other selected ranges keep their selection state, but the Focus Cell bands do not split around them.
![SpreadJS Focus Cell behavior with multiple selected ranges, treating the range containing the active cell as the primary selection.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/behavior3-20260709.5616c9.gif?width=600)
For merged cells, Focus Cell follows the active cell area. If the active cell is part of a merged cell, the merged area is used as the focus area.
![SpreadJS Focus Cell behavior for merged cells, using the merged area as the focus area when the active cell is merged.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/behavior4-20260709.297185.gif?width=600)

## Use Focus Cell in Designer

SpreadJS Designer provides Focus Cell commands on the **View** tab.
![SpreadJS Designer View tab showing the Focus Cell command in the Show/Hide group for enabling or disabling Focus Cell.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.57d094.png?width=800)
To enable or disable Focus Cell in Designer:

1. Open the **View** tab.
2. In the **Show/Hide** group, click **Focus Cell**.

You can also open the **Focus Cell** dropdown to access additional options:

* **Focus Cell -** Enables or disables the Focus Cell feature.
* **Focus Cell Color -** Sets the highlight color for the Focus Cell bands.
* **Show Auto-Highlight -** Temporarily shows the Focus Cell highlight during supported Find and Replace operations.

![SpreadJS Designer Focus Cell dropdown showing commands for Focus Cell, Focus Cell Color, and Show Auto-Highlight for Find and Replace navigation.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.53b522.png?width=400)
**Show Auto-Highlight** is used for Find and Replace navigation.

* When **Focus Cell** is disabled, this option can temporarily show the Focus Cell highlight after successful Find and Replace operations, such as **Find Next**, **Find All**, **Replace**, or **Replace All**. The temporary highlight is removed when the **Find and Replace** dialog is closed.
* When **Focus Cell** is already enabled, the Focus Cell bands remain visible all the time, so **Show Auto-Highlight** does not change the visible behavior.

For TableSheet and GanttSheet, Focus Cell commands are available from the corresponding design ribbon tab.
![SpreadJS Designer ribbon showing Focus Cell commands available from the TableSheet and GanttSheet design tabs.](https://cdn.mescius.io/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image-20260721.09ef2f.png?width=800)

## Notes

* Focus Cell bands are not displayed when the active row or column is hidden.
* When `spread.options.hideSelection` is enabled, Focus Cell bands are hidden after the workbook loses focus.
* Focus Cell bands are not included in printed output or PDF export.
* Focus Cell is not persisted to or restored from Excel files.
* Focus Cell is a visual aid and does not modify worksheet data or cell styles.