developer guide
Row Reordering in a JavaScript Data Grid
Rows can be dragged into a new order, either from the whole row or from one handle column, and grid.rows.move() does the same from code. A move your rules do not allow is refused with a reason rather than quietly undone.
Developer guide › Editing › Row Reordering in a JavaScript Data Grid
Row reorder
rowReorder: true puts a drag handle in the first visible column and lets a user
move rows with it, or with Alt+Shift+↑/↓.
{ column: 'name' } puts the handle somewhere else.
Reordering a list, and saving the result
createGrid(element, {
columns,
rows,
rowReorder: true,
});
grid.on('row:moved', ({ key, from, to }) => {
// rows.data() is the new order in full.
api.saveOrder(grid.rows.data().map((r, i) => ({ id: r.id, order: i })));
});The order is your data, not a view of it. A move reorders the array you gave the grid and tells you it happened; writing it somewhere permanent is yours, because only you know where the order lives. A grid that rearranged rows on screen and stopped there would look finished and lose the order on the next load, which is worse than not offering the feature.
If the save fails, move it back: grid.rows.move(key, from).
It refuses while a sort, filter or grouping is active, and says why out loud
rather than springing the row back in silence. The reason is that dropping between two
visible rows says nothing about where the row belongs in the underlying array: under a
filter there may be hidden rows between them, and under a sort the displayed order is
something the grid computed rather than something the data says. Rather than pick an
interpretation and put the row somewhere you did not ask for, the move is declined.
rows.move() returns { moved: false, reason } so you can handle it
yourself.