Row height
By default rows size to their content (and the virtualizer measures them). For explicit control, set a flat rowHeight or a per-row getRowHeight.
ID | |||
|---|---|---|---|
| Ava | Thompson | Ava Thompson is a Owner in Engineering, based in Berlin, Germany. Reach them at ava.thompson@example.com. | |
| Liam | Nguyen | Liam Nguyen is a Admin in Marketing, based in Tokyo, Japan. Reach them at liam.nguyen@example.com. | |
| Noah | Silva | Noah Silva is a Editor in Design, based in Austin, USA. Reach them at noah.silva@example.com. | |
| Emma | Carter | Emma Carter is a Viewer in Sales, based in Lyon, France. Reach them at emma.carter@example.com. | |
| Olivia | Rossi | Olivia Rossi is a Owner in Support, based in Milan, Italy. Reach them at olivia.rossi@example.com. | |
| William | Walker | William Walker is a Admin in Engineering, based in Toronto, Canada. Reach them at william.walker@example.com. | |
| Sophia | Patel | Sophia Patel is a Editor in Marketing, based in Oslo, Norway. Reach them at sophia.patel@example.com. | |
| James | Muller | James Muller is a Viewer in Design, based in Lisbon, Portugal. Reach them at james.muller@example.com. |
Auto height (wrap & grow)
Return "auto" from getRowHeight to let a row wrap its content and grow to fit — even when column resizing is on (which otherwise clips cells to a single line).
import { DataTable, useDataTable } from "@/components/ui/data-table"
const table = useDataTable({
data,
columns,
enableColumnResizing: true,
getRowHeight: () => "auto",
})
return <DataTable table={table} />
Fixed height
A number pins the row to that pixel height and clips overflowing content. Use a flat rowHeight for every row, or return a number per row from getRowHeight.
const table = useDataTable({
data,
columns,
rowHeight: 64, // every row is 64px
})
const table = useDataTable({
data,
columns,
// Tall rows only where there's extra content; default height elsewhere.
getRowHeight: (row) => (row.original.notes ? "auto" : 44),
})
Precedence
For each row: getRowHeight(row) wins unless it returns null/undefined, then rowHeight, then the density default.
Works with virtualization
Per-row heights feed the row virtualizer's estimate; "auto" rows are
measured after render, so large virtualized datasets with variable heights
scroll accurately. See Virtualization.
Per row, not per column
getRowHeight sets the height of the whole row. There's no per-column wrap
toggle — an "auto" row wraps all of its cells.
Relevant options
| Prop | Type | Default | Description |
|---|---|---|---|
rowHeight? | number | — | Flat height (px) applied to every row. Overridden per-row by `getRowHeight`. Also seeds the virtualizer estimate. |
getRowHeight? | (row: Row<TData>) => number | "auto" | null | — | Per-row height. Return a px number to pin the row, `"auto"` to let it wrap and grow to fit its content (even with column resizing on), or `null` to fall back to `rowHeight` / the density default. Applies to data rows. |
estimateRowHeight? | number | 52 | Estimated row height (px) for the virtualizer. Default 52. |