Auto-Sizing Columns

What "no strategy" actually looks like

Nothing measures anything. Note holds sentences of very different lengths and gets the same 150 px as Last Name, so most of its rows are clipped. Meanwhile the total of all six widths has no relationship to the container, which is why there is either a scrollbar or a gap — and it changes with the window.

This is a perfectly good default when your widths are deliberate and your content is predictable. It is the wrong default when either of those is untrue, which is what the next two examples fix.

It keeps up on its own

fitGridWidth re-runs whenever the container resizes and whenever a column is shown or hidden. Narrow the window and the columns re-share the space with no code from you. defaultMinWidth is the floor for the sharing; columnLimits caps Status at 130 px so a one-word column cannot claim a wide share.

autoSizeStrategy: {
  type: 'fitGridWidth',
  defaultMinWidth: 90,
  columnLimits: [{ colId: 'status', maxWidth: 130 }],
}

Dragging a column opts it out — permanently

Drag the edge of Department, then narrow the window: every other column re-shares the space and yours keeps the width you gave it. That is deliberate — an auto-fit that undid a reader's drag on the next resize would be the worst version of this feature.

Worth knowing the whole rule, though: the drag sets that column's suppressSizeToFit, so it is out of every later fit — including a sizeColumnsToFit() you call yourself. Press Fit now after dragging and the dragged column does not move. If you need it back in, set the flag to false on that column, or re-declare its width.

This lock belongs to fitGridWidth only. Under fitCellContents a drag is not remembered — see the next example.

Once, after the first load

fitCellContents measures each column against its header and its loaded cells. It runs once, after the first load — measuring every cell on every render is work the reader would pay for on each scroll.

So setting it on a grid that is already up changes nothing by itself: the one automatic run has been and gone. Call autoSizeColumns() when you want it applied again — after new data lands, after a column is added, or when the reader asks, which is what the button above does.

this.grid().autoSizeColumns({ type: 'fitCellContents' });
this.grid().autoSizeColumn('note');   // just one column

Two things that surprise people

• A drag is not remembered here. Widen a column by hand, press Size to content, and it goes back to its measured width. The suppressSizeToFit lock the previous example describes is set only under fitGridWidth; the content fit honours suppressAutoSize instead, which is a flag you set, not one a gesture sets for you.
• A column with a cellTemplate can only grow. Plain text columns are measured precisely and can end up narrower than they started. A templated column is measured from the rendered DOM instead, and that measurement expands a column that clips its content without shrinking one that has room to spare.

Filling the leftover space, and why it is off here

Sizing to content usually leaves a strip on the right — the grid above has one. scaleUpToFitGridWidth: true is the option that closes it, and it is worth knowing exactly what it does before you reach for it: after measuring, it runs the container fit over the result, which shares the width out by each column's original declared proportion. A column that just earned a wide measurement is pulled back toward the width you first gave it.

Measured on this very page: with the flag on, Note came back to roughly its declared share and the same rows were clipped as in the first grid — the content fit had been undone by the thing meant to tidy up after it. So: use it when the columns are close to their right sizes already and you only want the gap closed. Leave it off when you actually want the measurement, and accept the strip.

The cap is a cap

defaultMaxWidth: 320 is doing real work here, and it is worth seeing what it costs. One of the notes is longer than 320 px of text — that row is still clipped after the fit, because the ceiling stopped the column before it reached the content. That is the trade you are making: without the cap, one long sentence would have taken most of the table and pushed everything else into a horizontal scroll. Raise it, drop it, or set a per-column limit — but "fit the contents" only ever means "fit them within the bounds you gave".