Fitting column widths to the content

autoSizeColumns fits the columns to their header and rows once the first rows are drawn, and with 'always' again after new data, leaving columns the user resized alone.

Live demoAuto-size columns

Load short and long data; resize one column by hand.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const short = Array.from({ length: 50 }, (_, i) => ({ id: i + 1, code: `A${i}`, name: 'Kim', city: 'Seoul', note: '' }));
  const long = Array.from({ length: 50 }, (_, i) => ({
    id: i + 1, code: `ORDER-2026-${String(100000 + i)}`, name: h('Alexandra Montgomery-Smith', '김수한무거북이와두루미'),
    city: h('San Francisco, California', '경기도 성남시 분당구'), note: h('Leave it at the front desk', '경비실에 맡겨 주세요'),
  }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'id', header: 'ID', type: 'number', width: 60, autoSize: false },
      { field: 'code', header: h('Code', '코드'), width: 60 },
      { field: 'name', header: h('Name', '이름'), width: 60 },
      { field: 'city', header: h('City', '도시'), width: 60 },
      { field: 'note', header: h('Note (flex)', '메모(flex)'), flex: 1 },
    ],
    data: short, locale: ctx.lang, autoSizeColumns: 'always',
  });
  grid.on('columnResize', e => ctx.log(`columnResize ${e.colId} → ${e.width}px`));
  button(ctx, h('Short data', '짧은 데이터'), () => grid.setData(short));
  button(ctx, h('Long data', '긴 데이터'), () => grid.setData(long));
  separator(ctx);
  button(ctx, h('Fit all now', '지금 모두 맞추기'), () => grid.autoSizeColumns());
  text(ctx, h('Switch the data: Code, Name and City follow. Resize one of them by hand and switch again: that one keeps your width. ID has autoSize: false; Note is flex.',
    '데이터를 바꿔 보세요. 코드·이름·도시가 따라갑니다. 그중 하나를 직접 넓힌 뒤 다시 바꾸면 그 컬럼은 정한 너비를 유지합니다. ID는 autoSize: false, 메모는 flex입니다.'));
  return grid;
}

Widths you set by hand are wrong as soon as the data changes. With autoSizeColumns the grid measures each column's header and the rows on screen and sets the width itself — the same as double-clicking a header's edge, or calling autoSizeColumns().

createGrid(el, {
  columns: [
    { field: 'name' },
    { field: 'email' },
    { field: 'note', flex: 1 },                 // takes the room left; not measured
    { field: 'id', width: 60, autoSize: false }, // keeps its width
  ],
  data,
  autoSizeColumns: 'always',  // true: once, after the first rows are drawn
});

// or by hand, any time
grid.autoSizeColumns();          // every column
grid.autoSizeColumns(['email']); // some

Value	When it fits
true	Once, when the first rows are on screen (after a datasource answers, too)
'always'	Then again after setData and transactions, once per frame

Columns it leaves alone

Columns with flex: they share the room that is left.
Columns with autoSize: false, and columns that cannot be resized (resizable: false).
A column the user resized: 'always' does not undo their choice. resetColumnState() makes it automatic again after a reload.
Widths brought back by stateKey: the saved layout wins.
The selection, drag handle and row number columns.

Only the rows on screen are measured, so a very long value further down can still be cut; call autoSizeColumns() after scrolling, or set a maxWidth to stop one long text from taking the whole width. Each fit fires columnResize.

Questions about this page

How do I make columns fit their content when the grid loads?

Set autoSizeColumns: true. After the first rows are drawn every column (except flex ones) gets the width of its header and the rows on screen. Use 'always' to fit again when data changes.