demo D152
Row reorder
Drag a handle to move rows, and persist the new order
rowReorder: true
The configuration
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>
<div id="grid" style="height: 540px"></div>
<script>
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
rowReorder: true,
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 200 } },
{ field: 'region', title: 'Region' },
{ field: 'status', title: 'Status', filter: { type: 'set' } },
{ field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' } },
],
rows, // a few dozen circuits
});
</script>Reordering rows by dragging a handle
Row reordering lets a user move a row to a new position by dragging a handle, or with the keyboard, and keeps that order once set. A developer reaches for this wherever the sequence of rows is itself the data: a playlist, a set of task priorities, a checklist whose steps run top to bottom, an ordering of sections in a document. Lattice Grid enables it with rowReorder: true, which adds a drag handle to each row and accepts Alt+Shift+Up and Alt+Shift+Down to move the focused row without a pointer; the grid emits the new order so the change can be persisted back to the source. As a JavaScript data grid working over a virtualised body, a drag moves only the affected row elements and shifts the rest by transform, so reordering within a list of many thousands of rows stays responsive rather than repainting the whole body on each move. The keyboard path announces each move through an ARIA live region, naming the row and its new position, so a keyboard-only or screen reader user follows the reorder without seeing the drag.
How do I let users drag to reorder rows in a data grid?
Set rowReorder: true. Each row gains a drag handle, and users can also move the focused row with Alt+Shift+Up and Alt+Shift+Down. Lattice Grid emits the updated order after each move so your code can persist it, and announces keyboard moves through a live region for users who are not using a pointer.