Row Drag & Drop

Enabling row drag

Set rowDrag.enabled: true in GridConfig. A drag handle column appears automatically on the left. Set rowDrag.position to move it.

readonly config: GridConfig<T> = {
  rowDrag: {
    enabled: true,
    position: 'left',   // or 'right'
    managed: true,
  },
};

Managed vs manual mode

Control what happens after a successful drop with rowDrag.managed:

• managed: true — the grid applies the new row order instantly. (rowDragEnd) still fires so you can persist the result to an API.
• managed: false (default) — the grid emits (rowDragEnd) and waits. Read event.rows — the full reordered array — and update your data source yourself.

// Manual mode — persist the new order yourself
async onDragEnd(e: RowDragEvent): Promise<void> {
  this.data = e.rows;               // e.rows = full array in new order
  await this.api.saveOrder(e.rows); // persist to server
}

RowDragEvent fields

• row — the row that was dragged
• rows — the complete array in its new order
• fromIndex / toIndex — original and final positions (zero-based)

When drag pauses automatically

A manual row order can't survive a view whose order is computed: while a client-side sort (sortMode: 'client' with active sorts), a client-side filter (filterApplyMode: 'client' with an active query), or grouping / tree data is shaping the view, the drag handles disappear and a one-time console message explains why. Clear the sorts or the filter — or switch off grouping / tree data — and the handles come right back, nothing to configure. (A grouped or hierarchical view re-buckets rows on every render, so a dropped row couldn't hold its position anyway.)

Locking specific rows

Set rowDrag.canDrag to a predicate to prevent certain rows from being moved. Rows where it returns false show no handle.

rowDrag: {
  enabled: true,
  canDrag: (row) => !row.locked,  // lock rows with locked: true
}

Interaction with sorting

Row drag and column sorting can coexist, but applying a sort overrides any manual order. If stable manual ordering matters, disable sorting on those columns or indicate in the UI that re-sorting resets the arrangement.

Auto-scroll

Hold a dragged row near the top or bottom edge of the grid to scroll automatically. Reordering within long lists works without releasing the drag.

Mouse interactions