Row Pinning in Apex Grid

Apex Grid can pin rows to sticky top and bottom bands that stay visible while the rest of the body scrolls. Pinned rows are lifted out of the scrollable set and rendered outside the virtualizer, so there is no duplication: a pinned row leaves the scroll area entirely. Available on both <apex-grid> and <apex-grid-enterprise> since v3.3.

Enabling row pinning

grid.rowPinning = { enabled: true };

With row pinning enabled, use the programmatic API to pin and unpin rows by reference.

Pinning API

grid.pinRow(data[0], 'top');       // pin to the top band
grid.pinRow(data[5], 'bottom');    // pin to the bottom band
grid.unpinRow(data[0]);            // remove from its band

grid.pinnedRows;                   // { top: T[], bottom: T[] }

Selection, styling, and editing continue to work on pinned rows by row reference. Pinned state is part of the saved grid state (the rowPinning slice), so it survives a save / restore round-trip. For durable references across a data reload, set a rowId.

Events

Event	Cancellable	Detail
rowPinning	yes	{ row, position }
rowPinned	no	{ row, position }

Cancel rowPinning with event.preventDefault() to veto a pin / unpin before it applies.

React example

import { useEffect, useRef } from 'react'
import 'apex-grid/define'

export default function PinnedRowsGrid() {
  const ref = useRef<any>(null)

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    grid.rowPinning = { enabled: true }
    grid.pinRow(data[0], 'top')
    grid.pinRow(data[data.length - 1], 'bottom')
  }, [])

  return <apex-grid ref={ref} style={{ height: 480 }} />
}