demo D14
Auto-size and fit: JavaScript Data Grid Demo
Size a column to its content, or fit every column to the viewport
columns.autoSize() · columns.fit() · fit: 'content'
This grid sizes columns two ways in one call each: fit every column to its own content, heading included, so nothing is clipped, or fit them all to the viewport width so nothing sits in an empty strip on the right. Press Size to content, then Fit to width, and watch the columns settle each way.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.103.2/lattice-grid.min.css">
<script src="https://cdn.latticegrid.dev/lattice-grid@1.103.2/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 identifier code', layout: { width: 150 } },
{ field: 'team', title: 'Team', layout: { width: 150, min: 90 } },
{ field: 'region', title: 'Region', layout: { width: 150 } },
{ field: 'repository', title: 'Repository', layout: { width: 150, max: 340 } },
],
rows, // 5,000 service records
});
// autoSize() sizes each column to fit its own content, measuring the heading
// as well as the cells, so a long heading is shown in full rather than
// clipped; it honours each min and max and settles on repeated calls.
grid.columns.autoSize();
// fit() instead divides the viewport between the columns, filling the width
// with no empty strip on the right. Deferred one frame, because it needs the
// grid laid out before it has a width to divide; call either again after the
// data changes to re-lay-out.
requestAnimationFrame(() => grid.columns.fit?.());
</script>Sizing columns to their content in a JavaScript data grid
columns.autoSize() sizes every column to fit what it holds, measuring the heading text as well as the cells, so a column with a long heading widens to show it in full instead of collapsing or clipping it. It stays within each column’s min and max, and it settles: run it again on the same content and the widths do not keep growing. The columns here start at a fixed width, narrower than their content and, in the first column, narrower than its heading; press Size to content and each column snaps to the width its own text needs. Reach for it after loading a dataset or when the content changes shape, so every value and heading is readable without a manual drag. Set fit: 'content' on the column instead and the grid keeps it sized this way on its own, on first paint and again whenever rows change, columns are shown, hidden, reordered or pinned, or the grid is resized, with no call to re-issue.
Fitting columns to the viewport width
columns.fit() distributes the full viewport width across the visible columns, so the grid has no empty strip on the right and no horizontal scrollbar when the content would otherwise fall short of the container. Press Fit to width and the grid divides the space between the columns in one call, again within each column’s min and max. Reach for it after loading a dataset, after a resize, or whenever the container changes shape, so the layout keeps filling the width instead of drifting out of step with it. Both calls are bounded by the columns on screen rather than the rows in the store, so sizing the columns of a grid holding a million rows costs the same as one holding a hundred, because they work from the layout rather than the data.
How do I size columns to their content in a JavaScript data grid?
Call columns.autoSize() and the grid measures each column’s cells and its heading, then sets every column to the width its widest text needs, keeping within any min and max you set. Because the heading is measured too, a column with a long heading is sized to show it rather than clipped. Repeated calls converge on the same widths, so it is safe to run again whenever the content changes.
How do I fit columns to the width of a JavaScript data grid?
Call columns.fit() and the grid stretches or compresses the visible columns so they exactly fill its width, removing any leftover gap on the right or horizontal scrollbar. Run it again whenever the width changes, after a container resize or after new data lands, to refit the columns to the space available.