demo D152
Row reorder in htmx
Drag a handle to move rows, and persist the new order
rowReorder: true
This grid lets a user move a row to a new position by dragging a handle or by keyboard, and keeps the new order. It suits data where the sequence is the point, a playlist or a priority list, so the order a person sets is the order that persists.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes, and data-id on each row is
the key the grid carries it under. -->
<table id="row-reorder-table" data-lattice-grid>
<thead>
<tr>
<th data-field="circuit">Circuit</th>
<th data-field="region">Region</th>
<th data-field="status">Status</th>
<th data-field="bandwidth">Bandwidth</th>
</tr>
</thead>
<tbody>
<tr data-id="0"><td>DFB-EDI-100000</td><td>Edinburgh</td><td>live</td><td>100</td></tr>
<tr data-id="1"><td>MPL-BIR-100001</td><td>Birmingham</td><td>provisioning</td><td>10000</td></tr>
<tr data-id="2"><td>DFB-LON-100002</td><td>London</td><td>live</td><td>2000</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('row-reorder-table'), {
// Drag a row by its handle to a new position; the order is yours to set by
// hand rather than only by sorting a column.
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' } },
],
});
</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.