Sticky Cells

STICKY_CELL_PROP

Cell property name used by {@link StickyCellsPlugin} to mark a cell as sticky.

Return this property from a column cellProperties callback to opt the cell into the sticky header layer:

import { STICKY_CELL_PROP } from '@revolist/revogrid-pro';

const columns = [
  {
    prop: 'status',
    cellProperties: ({ rowIndex }) =>
      rowIndex % 10 === 0
        ? { [STICKY_CELL_PROP]: true }
        : undefined,
  },
];

The string value is also exported for templates and plain JavaScript usage.

STICKY_CELL_PROP: string;

---

StickyCellsPlugin

The StickyCellsPlugin keeps marked cells visible by rendering the active sticky row as an extra band inside the grid header.

Sticky cells are configured through the standard RevoGrid cellProperties callback. If any cell in a row returns { 'sticky-cell': true }, that row can become the active sticky row. The header layer renders only the cells that were explicitly marked as sticky for the active row.

Key Features:

• Uses the existing cellProperties API; no separate sticky row data source is required.
• Supports one active sticky row pinned at the top of the scrolling row viewport.
• Activates only after the bottom edge of the source row crosses above the visible viewport.
• Works across colPinStart, rgCol, and colPinEnd column sections.
• Reuses normal cell rendering, including cellTemplate and beforecellrender integrations.
• Hides the original marked cells while their sticky header copy is active to avoid duplication.
• Works with grouped headers and existing header/cell render hooks.

Behavior:

• Only one sticky row is displayed at a time.
• The last sticky row at or above the scroll position stays active until a later sticky row replaces it.
• Sticky cells are a display layer; selection, editing, keyboard focus, and pointer interaction remain owned by the underlying grid cells.

Example

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

const stickyCellProperties = ({ rowIndex }) =>
  rowIndex % 10 === 0
    ? { 'sticky-cell': true }
    : undefined;

const grid = document.createElement('revo-grid');
grid.plugins = [StickyCellsPlugin];
grid.columns = [
  {
    name: 'Account',
    prop: 'account',
    cellProperties: stickyCellProperties,
  },
  {
    name: 'Status',
    prop: 'status',
    cellProperties: stickyCellProperties,
  },
];

class StickyCellsPlugin {}