# Sticky Cells
URL: https://pro.rv-grid.com/guides/cells/sticky-cells/
Source: src/content/docs/guides/cells/sticky-cells.mdx
Description: Pin selected row cells near the top after their source row starts scrolling out of view.
Sticky Cells keep important checkpoint cells visible while users scroll through a virtualized grid. Mark cells with `stickyCell`; when the row starts crossing the top visibility edge, the marked row renders through the pinned top row area and is trimmed from the main viewport until the next sticky row replaces it.

## Usage

Add `StickyCellsPlugin` to the grid and define a column `stickyCell` predicate.

```ts
import { StickyCellsPlugin } from '@revolist/revogrid-pro';

const stickyCell = ({ model }) => model.isCheckpoint === true;

const columns = [
  {
    name: 'Account',
    prop: 'account',
    stickyCell,
  },
  {
    name: 'Status',
    prop: 'status',
    stickyCell,
  },
];

grid.plugins = [StickyCellsPlugin];
```

If any cell in a row is marked as sticky, that row can become the active sticky row.

## With Other Header Plugins

Sticky Cells render through the header layer, so the plugin can be combined with grouped headers and filter headers. When using the filter header plugin, register filtering before sticky cells so Sticky Cells wraps the final header content:

```ts
import {
  AdvanceFilterPlugin,
  FilterHeaderPlugin,
  StickyCellsPlugin,
  ColumnStretchPlugin,
} from '@revolist/revogrid-pro';

grid.plugins = [
  AdvanceFilterPlugin,
  FilterHeaderPlugin,
  StickyCellsPlugin,
  ColumnStretchPlugin,
];

grid.filter = {};
grid.additionalData = {
  stretch: 'all',
};
```

## Behavior

- One sticky row is active by default. Set `stickyCells.maxRows` to keep multiple recent sticky rows pinned.
- A marked row becomes sticky once 10% of that source row has scrolled above the viewport top.
- Sticky cells work across `colPinStart`, `rgCol`, and `colPinEnd`.
- Custom `cellTemplate` output is reused in the pinned sticky row.
- Existing `pinnedTopSource` rows remain before plugin-managed sticky rows.
- Active sticky source rows are trimmed out of the main row viewport.
- Plugin-managed sticky pinned rows receive the `sticky-cells-pinned-row` class and attribute. They also expose `data-sticky-cells-pinned-row="true"`, `data-sticky-cells-source-index`, and `data-sticky-cells-mode`.

```css
revo-grid .sticky-cells-pinned-row {
  font-weight: 600;
}
```

`data-sticky-cells-mode` is `"row"` for ordinary Sticky Cells rows and `"cell"` for integrations that pin only selected cells, such as `merge: { sticky: true }` in Same Value Merge.

Sticky Cells are a display layer. Selection, editing, and focus behavior still belong to the underlying grid cells.
