demo D11
Reorder by drag
Moving columns, constrained to their group and pinned region
columns.move(id, index)
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',
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
{ field: 'team', title: 'Team' },
{ field: 'region', title: 'Region' },
{ field: 'tier', title: 'Tier' },
{ field: 'instances', title: 'Instances', type: 'number' },
{ field: 'monthlyCost', title: 'Monthly cost', type: 'number', format: { style: 'currency', currency: 'USD' } },
],
rows, // 5,000 service records
});
</script>Drag-to-reorder columns within groups and pinned regions
columns.move(id, index) moves a column to a new position, and the same operation drives what happens when a user drags a header. A developer reaches for column reordering once a grid ships with more than a handful of fields, because the order that made sense at build time rarely matches the order an individual user wants to scan every day, and a JavaScript data grid that locks that order in place pushes the workaround onto whoever built the report. The constraint that matters in practice is scope: a column dragged mid-drag cannot leave its column group, and a frozen column in a pinned region cannot be dragged out into the scrollable body, so reordering never produces a layout the grid cannot render correctly. columns.move respects those same boundaries when called programmatically, so a saved layout restored from storage cannot smuggle a pinned column into the wrong region either. The drag itself tracks pointer position against header boundaries rather than column width, so reordering stays accurate whether columns are five characters wide or fifty. Keyboard users get the same operation without a pointer: moving focus to a header and issuing the move command reorders it in place, so column order is never a mouse-only feature.
How do I let users reorder columns by dragging in a data grid?
Enable drag handles on the header and the grid calls columns.move(id, index) internally as the user drops a column in its new position. The move is constrained to the column’s own group and pinned region, so a drag cannot separate a column from its group or pull it across a frozen boundary. Call columns.move directly to reorder programmatically, such as when restoring a saved layout.