SYIDAX / DATA GRID

Row dragging

Reorder rows with drag handles or transfer them to another Grid.

Row draggingSample order data

120 rows

Loading Grid…

Latest result

Enable rowDrag on the product column and rowDragManaged on the Grid in your app. The default table currently has no row move handle.

View code

Current preview

Usage guide

Use this to let users reorder tasks or priorities. Distinguish selecting rows from dragging them to move.

Display a move handle
Enable rowDrag on the product column and rowDragManaged on the Grid in your app. The default table currently has no row move handle.
Move in the original order
Clear sorting and filtering, then drag the handle between other rows. Sorted display order can conflict with manual drag order.
Save the new order
Read changes from rowMoved. Persist them in your app's data store to retain order after refresh.

Expected results

Rows in your app list follow the user-defined order.

Moving rows to another Grid requires connecting the target Grid. This single preview cannot demonstrate transfers between two tables.

Application code that references the registered Grid element as grid.

grid.rowDragManaged = true;
grid.columnDefs = grid.columnDefs.map(col => ({...col,rowDrag:col.field==='product'}));

Other properties3

Attribute / Property	Type / Default	Description
rowDragManaged	`boolean`Default: false	managed row reorder. When true, a column with `rowDrag: true` shows a drag handle; dragging it reorders `rowData` (client mode only, and only while the display order equals the source order — no sort / filter / group / tree / pagination / infinite).
rowDragMultiRow	`boolean`Default: false	(PF-ROWLAYOUT-WIRING-01 batch B, AG `rowDragMultiRow`) — when true, an UNMANAGED drag started on a selected row carries every selected row (the item's `rowKeys` / `rows`); otherwise one row travels.
rowDragText	`(params: { count: number; label: string }) => string`Default: undefined	(AG `rowDragText`) — the ghost label for an unmanaged drag; default `"<label>"` or `"<label> (+N)"` for a multi-row item.

Events7

Events	Detail type	Description
	`{ fromIndex: number; toIndex: number; row: unknown }`	fires after a managed row drag reorders the data.
	`SyGridRowDragEventDetail`	ADR-009 — typed accessor for the lazy 93 SSRM ops chunk ('ssrm-ops'). a drag session started (`kind: 'start'`), or entered a zone.
	`SyGridRowDragEventDetail`	the drop target moved.
	`SyGridRowDragEventDetail`	the pointer left every target (or the target went stale under a scroll).
	`SyGridRowDragEndDetail`	a drop completed: DELEGATED over this grid (nothing moved) or transferred to a zone.
	`SyGridRowDragCancelDetail`	the session ended without a drop (escape, blur, capture lost, disconnect, watchdog…).
	`SyGridRowsTransferredDetail`	a transfer into a registered zone was planned, committed and applied (or reverted).

Methods6

Method / Arguments	Return type	Description
input: SyGridRowDragStartInput	`Promise<SyGridRowDragStartResult>`	start an unmanaged drag from the API: a KEYBOARD grab of the row (arrows move it, `Enter` drops → `rowDragEnd` with `keyboard: true`, `Escape` cancels). A pointer session can only start from a real pointer-down on the handle — the gesture threshold and the pointer capture are what a pointer session IS, so the method says so rather than fake one.
	`Promise<SyGridRowDragSessionReport>`	the live (or last) drag session, the gesture, the residue and the zones.
input: SyGridDropZoneInput	`Promise<SyGridDropZoneRegistration>`	register a drop zone: `kind: 'grid'` with `grid` (a peer `<sy-grid>` element — its rows are read live and written on a transfer) or `kind: 'external'` with `element` (any element or selector; what lands there is delivered through `onDrop`).
zoneId: string	`Promise<boolean>`	remove a zone; a drag targeting it is cancelled. The grid's own zone cannot be removed.
	`Promise<SyGridDropZonesReport>`	the zone registry (own zone included), its generation and the active target.
	`Promise<SyGridDragSafetyReport>`	the drag-safety monitor: live/stuck drags, aborts by cause, the watchdog.

ColumnDef1

ColumnDef	Type / Required	Description
	`boolean`Optional	show a row-drag handle in this column's cells. Combined with the grid's `row-drag-managed` prop, dragging the handle reorders `rowData`.