Client-side hierarchical tables
A table stores child records in its row data and needs expandable parent rows.
TanStack · Function
getExpandedRowModel
getExpandedRowModel enables client-side row expansion in TanStack Table. It returns the expanded row model for use in the table's row-model pipeline.
How it works
getExpandedRowModel is a factory used in TanStack Table options to enable client-side expansion. The resulting row-model function produces rows after expansion has been applied, using the table's expansion state and sub-row relationships.
Syntax
getExpandedRowModel?: (table: Table<TData>) => () => RowModel<TData>Parameters
| Name | Type | Description |
|---|---|---|
table | Table<TData> | The table instance used by the row-model factory. |
Returns
A function returning RowModel<TData>; the resulting row model contains rows after expansion has been applied.
Key points
- The function supplies the row model that represents the table after expansion.
- The documented option is a table-dependent factory returning a RowModel-producing function.
- The package provides a default implementation for ordinary client-side expansion.
- Applications may replace the default with their own row-model implementation.
- The resulting table API exposes rows after expansion processing.
Common mistakes
- Omitting the option disables table row expansion.
- With manual server-side expansion enabled, this client-side row model is bypassed.
Example: Enable client-side expansion
import { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
type Person = { name: string; subRows?: Person[] }
const table = useReactTable<Person>({
data: [{ name: 'Ada', subRows: [{ name: 'Grace' }] }],
columns: [{ accessorKey: 'name', header: 'Name' }],
getCoreRowModel: getCoreRowModel(),
getExpandedRowModel: getExpandedRowModel(),
})
console.log(table.getExpandedRowModel().rows.length)Creates a client-side expanded row model and makes it available through the table instance.
When to use it
Custom expansion row models
A project needs expansion behavior that differs from the package default.
Server-side expansion
A table displays expansion results produced by an API or external data model.
Interview questions
QWhat is getExpandedRowModel used for?
It is a row-model factory configured in the table options. Calling it supplies the function that returns the expanded row model, so client-side expansion can be applied.
Follow-up: What happens if it is omitted? The table does not expand rows.
QWhat does the expanded row model return?
The option accepts a factory whose table-aware result returns a RowModel<TData>. The table instance exposes that result as the row model after expansion has been applied.
Follow-up: How can server-side expansion change this? Set manualExpanding to true and produce the expanded data in your own model.
QCan the expanded row-model behavior be customized?
Use the exported getExpandedRowModel function for the default behavior, or provide a custom implementation. A custom implementation is useful when the default expansion behavior does not match the application's needs.
Follow-up: What is the key distinction from manual expansion? Manual expansion bypasses this model rather than customizing its client-side calculation.
Related
getCoreRowModelgetPreExpandedRowModelmanualExpandingRowModel<TData>