demo D14
Auto-size and fit in Angular
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.
This is the Angular version. A standalone component takes the whole configuration through one config input, surfaces grid events as outputs, and exposes the live grid on a getter for anything the inputs do not cover.
The configuration
import { Component, ViewChild } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { createGrid } from '@toclocoinc/lattice-grid';
import '@toclocoinc/lattice-grid/css';
import { LatticeGridComponent, provideLattice } from '@toclocoinc/lattice-grid/angular';
const 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 } },
];
@Component({
selector: 'app-root',
standalone: true,
imports: [LatticeGridComponent],
template: '<lattice-grid [config]="grid" (grid-ready)="onGridReady()" style="display:block;height:540px"></lattice-grid>',
})
export class AppComponent {
@ViewChild(LatticeGridComponent) gridRef!: LatticeGridComponent;
grid = {
rowKey: 'id',
columns,
rows: [/* 5,000 service records */],
};
// The grid is created once the view has rendered, so the live instance
// arrives on grid-ready rather than in ngAfterViewInit.
onGridReady() {
const grid = this.gridRef.grid;
// 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 && grid.columns.autoSize();
// fit() instead divides the viewport between the columns and honours each
// min and max. 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 && grid.columns.fit());
}
}
bootstrapApplication(AppComponent, {
providers: [provideLattice({ createGrid })],
});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.