demo D10
Resize, including the neighbour
Drag a grip; shift-drag to take the width from the column beside it
resizePreview: 'live' | 'deferred'
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',
// Redraw the column at its new width as you drag, rather than only on drop.
resizePreview: 'live',
columns: [
{ field: 'service', title: 'Service', layout: { pin: 'start', width: 140 } },
{ field: 'team', title: 'Team', filter: { type: 'set' } },
{ field: 'owner', title: 'Owner', filter: { type: 'set' } },
{ field: 'tier', title: 'Tier', cell: { decoration: 'pill', variant: { map: { gold: 'warning', silver: 'neutral', bronze: 'info' } } } },
{ field: 'state', title: 'State', cell: { decoration: 'dot', variant: { map: { healthy: 'success', degraded: 'warning', failing: 'danger', unknown: 'neutral' } } } },
{ field: 'region', title: 'Region', filter: { type: 'set' } },
{ field: 'active', title: 'Active', type: 'boolean' },
{ field: 'deprecated', title: 'Deprecated', type: 'boolean' },
],
rows, // 5,000 service records
});
</script>Resizing columns, and taking the width from the column beside it
Dragging a column’s edge is the most direct way a user reshapes a table to fit what they care about, and any JavaScript data grid handling real-world data needs the interaction to feel right: a grip that is easy to grab, a preview that tracks the pointer, and a result that does not throw the layout out. Lattice Grid’s resize handles support a shift-drag that behaves differently from a plain drag: instead of only widening the dragged column, shift-drag takes the difference from the column beside it, so the pair’s combined width stays fixed. That matters inside a container with a hard maximum width, where widening one column without a source would push the table into horizontal scroll.
The resizePreview option controls what a user sees while dragging. Set it to 'live' and the column and its cells redraw on every pointer-move event, suited to narrow tables where the reflow cost is small. Set it to 'deferred' and the grid draws a single guide line during the drag, committing the resize once on pointer-up, which keeps wide grids with many rendered columns responsive. Resize handles are keyboard-operable: focusing a header border and using the arrow keys adjusts width in fixed steps, with the new size announced to assistive technology through an aria-valuenow update on the header cell.
How do you resize one column without breaking the width of the whole table?
Hold shift while dragging the resize handle. Lattice Grid then takes the width change from the adjacent column instead of adding it to the table’s total, so a fixed-width or percentage-based layout keeps its overall span. A plain drag, without shift, widens or narrows the column on its own and lets the table’s total width change instead.