Column Pinning in Apex Grid

Pin a column to the start or end of the grid to keep it visible while the user scrolls horizontally. Pinning does not modify the source columns array — it only changes the visual render order. Use grid.displayColumns to read the post-pinning render order.

Pinning a column

await grid.pinColumn('name', 'start');
await grid.pinColumn('actions', 'end');
await grid.unpinColumn('name');

The signature is:

type PinPosition = 'start' | 'end';

grid.pinColumn(key: string, position: PinPosition): Promise<void>;
grid.unpinColumn(key: string): Promise<void>;

Reading the render order

The configured columns array reflects the source order — pinning is layered on top. To inspect or render the actual visual order:

const renderOrder = grid.displayColumns;

displayColumns is read-only and updates automatically when columns are pinned, unpinned, or reordered.

Events

• columnPinning — cancellable; fires before a column is pinned or unpinned. The event detail includes the column key and the target position (or null for an unpin).
• columnPinned — fires after the pinning state changes.

Interaction with column reordering

Reordering is constrained to the column's own pinning group — pinned columns can be reordered among other pinned columns of the same position, but cannot be dragged across the start/centre/end boundaries. To move a column between groups, unpin first or pin to the desired side.