demo D04
Sizing and layout
Filling a container, fixed height, auto height, and resizing
autoHeight
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"></div>
<script>
// autoHeight lets the grid take the height of its rows rather than the height
// of its container, so a short grid sits inline in the page with no scrollbar.
const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
rowKey: 'id',
autoHeight: true,
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 180 } },
{ field: 'region', title: 'Region' },
{ field: 'status', title: 'Status', filter: { type: 'set' } },
{ field: 'charge', title: 'Monthly charge', type: 'number',
format: { style: 'currency', currency: 'GBP' } },
],
rows, // a few dozen rows
});
</script>Sizing a JavaScript data grid to its container, or letting it size itself
A grid on a dashboard usually fills a panel with a fixed height and scrolls its own rows. A grid on a report page or an admin form often needs the opposite: no internal scrollbar, growing tall enough to show every row and letting the surrounding page scroll instead. Lattice Grid supports both from the same configuration surface. Leave the host element’s height set by CSS and the grid fills it, virtualising rows as usual. Set autoHeight and the grid instead measures its own row count and expands to match, handing scrolling back to the page.
Reach for autoHeight on print views, embedded widgets inside a longer document, or any layout where a nested scrollbar would confuse a reader. Reach for a fixed-height container everywhere else, particularly with row counts in the thousands, because virtual scrolling only pays off when the grid owns a bounded viewport and can discard off-screen rows from the DOM.
Resizing the container, whether from a window resize, a sidebar toggling, or a CSS breakpoint, is picked up without a manual refresh call: percentage-width columns redistribute, and the row viewport recalculates against the new bounds. Keyboard focus and scroll position are preserved across the resize, so a user resizing a split-pane layout does not lose their place in the data.
How do you make a data grid grow to fit all its rows instead of scrolling?
Set autoHeight: true in the grid configuration. Lattice Grid then sizes its body to the full row count rather than a fixed viewport, so the container grows with the data and the page scrolls instead of the grid. This suits print layouts and embedded widgets; for large datasets a fixed-height container with virtual scrolling remains the better fit, since auto height mounts every row’s DOM cell rather than only the visible band.