Row Reordering in Apex Grid

Apex Grid supports drag-and-drop row reordering, with a grip handle by default and full keyboard support. The grid holds a manual order that is mutually exclusive with sorting: applying a sort clears the manual order. Available on both <apex-grid> and <apex-grid-enterprise> since v3.3.

Enabling row reordering

grid.rowReordering = { enabled: true };

By default (handle: true) a six-dot grip handle appears at the start of every reorderable row, and dragging lifts a full-row floating ghost that follows the cursor.

Handle mode vs. whole-row mode

grid.rowReordering = { enabled: true, handle: true };   // grip only (default)
grid.rowReordering = { enabled: true, handle: false };  // drag from anywhere on the row

• Handle mode (handle: true, the default): only the grip starts a drag, so the rest of the row stays free for selection and editing.
• Whole-row mode (handle: false): drag from anywhere on the row, excluding interactive sub-parts such as inputs and buttons.

Keyboard reordering

Focus a row, then: Space to grab, Arrow keys to move, Space or Enter to drop, Esc to cancel.

Where the order lives

By default the grid keeps the manual order internally and your app persists it via the rowMoved event. Set applyToData: true to have the grid splice grid.data in place instead:

grid.rowReordering = { enabled: true, applyToData: true };

Programmatic move:

grid.moveRow(0, 4, 'after');   // move the first row to after index 4

The manual order is captured in the saved grid state as the rowOrder slice.

Events

Event	Cancellable	Detail
rowMoving	yes	{ from, to, data, position, toIndex }
rowMoved	no	{ from, to, data, position, toIndex }

position is 'before' or 'after', and toIndex is the view index the row lands at (both from 3.6). Cancel rowMoving with event.preventDefault() to veto a move. Listen to rowMoved to persist the new order when you are not using applyToData.

A move that leaves the row where it is, such as moveRow(0, 1, 'before'), returns false and fires neither event. Moving a row on a sorted grid clears the sort and keeps the moved order (from 3.6; before, an applyToData move was undone by the re-sort). Escape after keyboard grab steps puts the row back, restores any sort, and fires rowMoved for the way back. Rows hidden by a filter keep their place in the order.

React example

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

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

  useEffect(() => {
    const grid = ref.current
    grid.columns = columns
    grid.data = data
    grid.rowReordering = { enabled: true }   // grip handle, keep order internally
    grid.addEventListener('rowMoved', (e: any) => saveOrder(e.detail))
  }, [])

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