Column resizing
Set enableColumnResizing: true to add a drag handle on each column's edge. Users drag the handle to widen or narrow a column.
ID | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | ||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | ||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | ||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | ||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | ||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | ||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | ||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | ||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | ||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | ||
| $4,120,536 |
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableColumnResizing: true,
})
return <DataTable table={table} />
Resize mode
The resize mode defaults to "onChange", so columns resize live as the handle moves. Pass TanStack's columnResizeMode: "onEnd" to defer the resize until the handle is released.
const table = useDataTable({
data,
columns,
enableColumnResizing: true,
columnResizeMode: "onEnd",
})
Width constraints
Column widths come from size, minSize, and maxSize on the column definition.
const columns = [
{ accessorKey: "firstName", size: 200, minSize: 120, maxSize: 320 },
]
Set sensible bounds
Define minSize and maxSize so users cannot collapse or stretch a column past a usable width.
Auto-sizing
Double-click a column's resize handle to size it to fit its widest value — header and data, across the full dataset (not just the rows currently on screen). This is on by default whenever enableColumnResizing is set, and respects each column's minSize/maxSize bounds.
Set enableColumnAutosize: false to turn it off; double-clicking the handle then resets the column to its default size instead.
const table = useDataTable({
data,
columns,
enableColumnResizing: true,
enableColumnAutosize: true, // default: matches enableColumnResizing
})
You can also trigger it imperatively from the table instance:
table.cnTable.autoSizeColumn("firstName")
table.cnTable.autoSizeAllColumns()