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 }
rowMoved	no	{ from, to, data }

Cancel rowMoving with event.preventDefault() to veto a move. Listen to rowMoved to persist the new order when you are not using applyToData.

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 }} />
}