demo D19
Lock position
Columns that cannot be moved, or that always lead the row
layout.lockPosition
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: 'Always first', layout: { lockPosition: 'start', width: 150 } },
{ field: 'team', title: 'Team', layout: { movable: false } },
{ field: 'region', title: 'Region' },
{ field: 'tier', title: 'Tier' },
{ field: 'instances', title: 'Instances', type: 'number' },
],
rows, // 5,000 service records
});
</script>Locking a column’s position while neighbours stay reorderable
A locked column keeps its place in the column order regardless of how a user drags the columns around it, or it stays fixed as the leading column so it always reads first no matter what the rest of the layout does. Reach for this whenever one column carries the row’s identity, such as a row number, a checkbox for selection, or a primary key, and letting a user drag it into the middle of a wide table would break the sense of what row they are looking at. Lattice Grid controls this per column through layout.lockPosition, so the restriction is declared on the column definition itself rather than as a grid-wide setting, and it composes with reordering: locked columns are excluded from the set of columns the drag-and-drop reorder logic will move or accept a drop onto.
This differs from pinning, which fixes a column to a scrolling edge; a locked column can still scroll with the rest of the columns, it just cannot change its index. The two options combine, since a column that is both pinned and locked stays visually fixed and immovable in the column chooser at once. Because the lock check runs once per drag gesture rather than per row, applying it to a leading identifier column carries no measurable cost against a JavaScript data grid holding tens of thousands of rows, and keyboard-driven column reordering respects the same restriction as pointer drags, so assistive technology users hit the same boundary.
How do you stop a column from being reordered in a JavaScript data grid?
Set layout: { lockPosition: true } on that column’s definition. Lattice Grid then excludes it from column drag-and-drop reordering, whether the drag originates from the header or a column chooser panel, while the remaining columns continue to reorder freely around it.