Source of demo: rowdrag/run.astro.
Model: createRowDragModel.ts.
A priority list you sort by hand: grab the grip in the Task column and drop the task where it belongs. The table
moves the row in your array (managed mode), scrolls automatically at the top and bottom edge and reports the drop –
save the new order in onRowDragEnd. Mouse, touch and pen work the same (Pointer Events); Escape cancels.
MIT-licensed, no dependencies.
const tableModel = TableFactory.createTableModel({ rows: tasks, rowNumbersVisible: true, // "#" = the position columnDefs: [ ColumnDef.create({ property: "title", headerLabel: "Task", rowDrag: task => !task.locked }), ColumnDef.create({ property: "owner", headerLabel: "Owner" }), ],});listener.onRowDragEnd = evt => { if (evt.moved) saveOrder(tasks); // tasks has the new order};tableApi.triggerAction("MOVE_ROW_UP")) – an alternative without dragging.rowDragOptions: { managed: false } you get the events anyway and decide yourself.Docs: instructions.md 6.16 · API: GeRowDragEvent, TableApi.moveRows.