Chapter 32: Column Sizing (React) Guide

Core Idea

columnSizingFeature is purely a state/measurement layer — a size/minSize/maxSize number per column, with no opinion on how you turn that into CSS. Pairing it with columnResizingFeature (next chapter) is what makes widths user-draggable.

Key Concepts

Default sizing: size: 150, minSize: 20, maxSize: Number.MAX_SAFE_INTEGER. Override order: individual column def size/minSize/maxSize > tableOptions.defaultColumn > built-in defaults.
Sizes are stored as plain numbers (typically interpreted as pixels), but the feature is headless — apply them however fits your layout: semantic <table> elements, div/span grids, flex/grid layouts with loose widths, whatever your CSS approach is.
Reading sizes/offsets: column.getSize()/header.getSize(); column.getStart('start'|'center'|'end')/column.getAfter(...) for offset within the current column flow (same region concept as pinning); column.resetSize() for one column.
Table-wide totals: table.getTotalSize(), table.getStartTotalSize()/getCenterTotalSize()/getEndTotalSize() — useful for scroll-container widths, split pinned tables, or a CSS custom property driving overall table width.
Direct state control: table.setColumnSizing({ colId: width, ... }), table.resetColumnSizing() (→ initialState), table.resetColumnSizing(true) (→ feature default).
Ownership: external atom via atoms: { columnSizing: atom } (v9-recommended, e.g. to persist user-set widths without forcing the owning component to re-render) or classic state.columnSizing + onColumnSizingChange.

Code Examples

const features = tableFeatures({ columnSizingFeature })
const columns = [{ accessorKey: 'col1', size: 270 }]  // per-column override
const table = useTable({
  features, columns, data,
  defaultColumn: { size: 200, minSize: 50, maxSize: 500 },  // table-wide default
})

<th style={{ width: `${header.getSize()}px` }}>{/* ... */}</th>

What it demonstrates: the two override layers (per-column def, then table-wide defaultColumn) and a plain inline-style width application — the simplest, least-performant of the styling strategies covered in the Column Resizing chapter's performance section.

Key Takeaways

This feature alone gives you fixed/starting widths and min/max constraints — it does not make columns draggable; pair it with columnResizingFeature for that.
Prefer defaultColumn for a table-wide baseline and per-column size only for the columns that need to differ.
column.getStart()/getAfter() are region-aware (start/center/end), matching column pinning's regions — useful when sizing interacts with pinned columns.

Connects To

Column Resizing (React) Guide: the drag-to-resize layer built on top of this state.
Column Pinning (React) Guide: the start/center/end regions getStart/getAfter are scoped to.