0
# Row Models
1

2
Row processing pipelines that transform and filter table data through various operations. Row models are pluggable functions that process raw data into the final rows displayed in the table.
3

4
## Capabilities
5

6
### Core Row Model
7

8
The foundational row model that creates row instances from raw data.
9

10
```typescript { .api }
11
/**
12
 * Creates the core row model from raw table data
13
 * @returns Row model factory function
14
 */
15
function getCoreRowModel<TData extends RowData>(): (
16
  table: Table<TData>
17
) => () => RowModel<TData>;
18

19
interface RowModel<TData extends RowData> {
20
  /** Array of row instances */
21
  rows: Row<TData>[];
22
  /** Flattened array including sub-rows */
23
  flatRows: Row<TData>[];
24
  /** Map of row IDs to row instances */
25
  rowsById: Record<string, Row<TData>>;
26
}
27
```
28

29
**Usage Example:**
30

31
```typescript
32
import { createTable, getCoreRowModel } from "@tanstack/table-core";
33

34
const table = createTable({
35
  data: myData,
36
  columns: myColumns,
37
  getCoreRowModel: getCoreRowModel(),
38
});
39

40
// Access the row model
41
const rowModel = table.getRowModel();
42
console.log(rowModel.rows); // Array of row instances
43
console.log(rowModel.flatRows); // All rows including sub-rows
44
console.log(rowModel.rowsById); // Map for quick lookups
45
```
46

47
### Sorted Row Model
48

49
Row model that applies sorting transformations to the data.
50

51
```typescript { .api }
52
/**
53
 * Creates a sorted row model that applies sorting state
54
 * @returns Row model factory function that sorts rows
55
 */
56
function getSortedRowModel<TData extends RowData>(): (
57
  table: Table<TData>
58
) => () => RowModel<TData>;
59
```
60

61
**Usage Example:**
62

63
```typescript
64
import { getSortedRowModel } from "@tanstack/table-core";
65

66
const table = createTable({
67
  data: myData,
68
  columns: myColumns,
69
  getCoreRowModel: getCoreRowModel(),
70
  getSortedRowModel: getSortedRowModel(),
71
  // Sorting configuration
72
  onSortingChange: setSorting,
73
  state: {
74
    sorting,
75
  },
76
});
77

78
// Rows are automatically sorted based on sorting state
79
const sortedRows = table.getRowModel().rows;
80
```
81

82
### Filtered Row Model
83

84
Row model that applies column and global filtering to the data.
85

86
```typescript { .api }
87
/**
88
 * Creates a filtered row model that applies filtering state
89
 * @returns Row model factory function that filters rows
90
 */
91
function getFilteredRowModel<TData extends RowData>(): (
92
  table: Table<TData>
93
) => () => RowModel<TData>;
94
```
95

96
**Usage Example:**
97

98
```typescript
99
import { getFilteredRowModel } from "@tanstack/table-core";
100

101
const table = createTable({
102
  data: myData,
103
  columns: myColumns,
104
  getCoreRowModel: getCoreRowModel(),
105
  getFilteredRowModel: getFilteredRowModel(),
106
  // Filtering configuration
107
  onColumnFiltersChange: setColumnFilters,
108
  onGlobalFilterChange: setGlobalFilter,
109
  state: {
110
    columnFilters,
111
    globalFilter,
112
  },
113
});
114

115
// Rows are automatically filtered
116
const filteredRows = table.getRowModel().rows;
117
```
118

119
### Grouped Row Model
120

121
Row model that applies grouping and aggregation to the data.
122

123
```typescript { .api }
124
/**
125
 * Creates a grouped row model that applies grouping state
126
 * @returns Row model factory function that groups and aggregates rows
127
 */
128
function getGroupedRowModel<TData extends RowData>(): (
129
  table: Table<TData>
130
) => () => RowModel<TData>;
131
```
132

133
**Usage Example:**
134

135
```typescript
136
import { getGroupedRowModel } from "@tanstack/table-core";
137

138
const table = createTable({
139
  data: myData,
140
  columns: myColumns,
141
  getCoreRowModel: getCoreRowModel(),
142
  getGroupedRowModel: getGroupedRowModel(),
143
  // Grouping configuration
144
  onGroupingChange: setGrouping,
145
  state: {
146
    grouping: ['department', 'role'],
147
  },
148
});
149

150
// Rows are grouped with aggregate values
151
const groupedRows = table.getRowModel().rows;
152
```
153

154
### Expanded Row Model
155

156
Row model that handles row expansion state and sub-row visibility.
157

158
```typescript { .api }
159
/**
160
 * Creates an expanded row model that handles row expansion
161
 * @returns Row model factory function that manages expanded state
162
 */
163
function getExpandedRowModel<TData extends RowData>(): (
164
  table: Table<TData>
165
) => () => RowModel<TData>;
166

167
/**
168
 * Utility function for expanding rows based on expanded state
169
 * @param rowModel - Input row model to expand
170
 * @param expanded - Expanded state mapping
171
 * @returns Expanded row model
172
 */
173
function expandRows<TData extends RowData>(
174
  rowModel: RowModel<TData>,
175
  expanded: ExpandedState
176
): RowModel<TData>;
177
```
178

179
**Usage Example:**
180

181
```typescript
182
import { getExpandedRowModel } from "@tanstack/table-core";
183

184
const table = createTable({
185
  data: myData,
186
  columns: myColumns,
187
  getCoreRowModel: getCoreRowModel(),
188
  getExpandedRowModel: getExpandedRowModel(),
189
  // Sub-row configuration
190
  getSubRows: (row) => row.subRows,
191
  // Expansion state
192
  onExpandedChange: setExpanded,
193
  state: {
194
    expanded,
195
  },
196
});
197

198
// Only expanded rows and their sub-rows are visible
199
const expandedRows = table.getRowModel().rows;
200
```
201

202
### Pagination Row Model
203

204
Row model that applies pagination to limit visible rows.
205

206
```typescript { .api }
207
/**
208
 * Creates a paginated row model that applies pagination state
209
 * @returns Row model factory function that paginates rows
210
 */
211
function getPaginationRowModel<TData extends RowData>(): (
212
  table: Table<TData>
213
) => () => RowModel<TData>;
214
```
215

216
**Usage Example:**
217

218
```typescript
219
import { getPaginationRowModel } from "@tanstack/table-core";
220

221
const table = createTable({
222
  data: myData,
223
  columns: myColumns,
224
  getCoreRowModel: getCoreRowModel(),
225
  getPaginationRowModel: getPaginationRowModel(),
226
  // Pagination configuration
227
  onPaginationChange: setPagination,
228
  state: {
229
    pagination: {
230
      pageIndex: 0,
231
      pageSize: 10,
232
    },
233
  },
234
});
235

236
// Only current page rows are visible
237
const paginatedRows = table.getRowModel().rows;
238
console.log(paginatedRows.length); // Max 10 rows
239
```
240

241
### Faceted Row Models
242

243
Row models that provide faceted data for filtering interfaces.
244

245
```typescript { .api }
246
/**
247
 * Creates a faceted row model for generating filter options
248
 * @returns Row model factory function for faceted data
249
 */
250
function getFacetedRowModel<TData extends RowData>(): (
251
  table: Table<TData>
252
) => () => RowModel<TData>;
253

254
/**
255
 * Creates faceted unique values for filter dropdowns
256
 * @returns Function that returns unique values for each column
257
 */
258
function getFacetedUniqueValues<TData extends RowData>(): (
259
  table: Table<TData>
260
) => () => Map<string, number>;
261

262
/**
263
 * Creates faceted min/max values for range filters
264
 * @returns Function that returns min/max values for each column
265
 */
266
function getFacetedMinMaxValues<TData extends RowData>(): (
267
  table: Table<TData>
268
) => () => [number, number] | undefined;
269
```
270

271
**Usage Examples:**
272

273
```typescript
274
import { 
275
  getFacetedRowModel, 
276
  getFacetedUniqueValues, 
277
  getFacetedMinMaxValues 
278
} from "@tanstack/table-core";
279

280
const table = createTable({
281
  data: myData,
282
  columns: myColumns,
283
  getCoreRowModel: getCoreRowModel(),
284
  getFilteredRowModel: getFilteredRowModel(),
285
  getFacetedRowModel: getFacetedRowModel(),
286
  getFacetedUniqueValues: getFacetedUniqueValues(),
287
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
288
});
289

290
// Get unique values for a column filter dropdown
291
const uniqueStatuses = table.getColumn('status')?.getFacetedUniqueValues();
292
// Map<string, number> - value to count mapping
293

294
// Get min/max for a range filter
295
const ageRange = table.getColumn('age')?.getFacetedMinMaxValues();
296
// [number, number] or undefined
297
```
298

299
### Row Interface
300

301
The core row interface providing access to row data and methods.
302

303
```typescript { .api }
304
interface Row<TData extends RowData> extends 
305
  CoreRow<TData>,
306
  VisibilityRow<TData>,
307
  ColumnPinningRow<TData>,
308
  RowPinningRow,
309
  ColumnFiltersRow<TData>,
310
  GroupingRow,
311
  RowSelectionRow,
312
  ExpandedRow {}
313

314
interface CoreRow<TData extends RowData> {
315
  /** Unique row identifier */
316
  id: string;
317
  /** Index of the row in the data array */
318
  index: number;
319
  /** Original data object for this row */
320
  original: TData;
321
  /** Nesting depth for sub-rows */
322
  depth: number;
323
  /** ID of parent row if this is a sub-row */
324
  parentId?: string;
325
  /** Array of sub-rows */
326
  subRows: Row<TData>[];
327
  /** Get value for a specific column */
328
  getValue<TValue = unknown>(columnId: string): TValue;
329
  /** Get unique values for a column across this row and sub-rows */
330
  getUniqueValues<TValue = unknown>(columnId: string): TValue[];
331
  /** Render value for a column using its cell renderer */
332
  renderValue<TValue = unknown>(columnId: string): TValue;
333
  /** Get all cells for this row */
334
  getAllCells(): Cell<TData, unknown>[];
335
  /** Get all leaf rows (including nested) */
336
  getLeafRows(): Row<TData>[];
337
  /** Get parent row if this is a sub-row */
338
  getParentRow(): Row<TData> | undefined;
339
  /** Get all parent rows up the hierarchy */
340
  getParentRows(): Row<TData>[];
341
}
342
```
343

344
**Usage Examples:**
345

346
```typescript
347
// Access row data
348
const row = table.getRowModel().rows[0];
349
console.log(row.id); // Row ID
350
console.log(row.original); // Original data object
351
console.log(row.index); // Position in data array
352

353
// Get values from specific columns
354
const name = row.getValue('firstName');
355
const age = row.getValue<number>('age');
356

357
// Access cells
358
const cells = row.getAllCells();
359
const nameCell = cells.find(cell => cell.column.id === 'firstName');
360

361
// Work with hierarchical data
362
if (row.subRows.length > 0) {
363
  console.log('This row has sub-rows:', row.subRows);
364
}
365

366
const parent = row.getParentRow();
367
if (parent) {
368
  console.log('Parent row:', parent.original);
369
}
370
```
371

372
### Row Creation
373

374
Internal row creation and processing utilities.
375

376
```typescript { .api }
377
/**
378
 * Creates a row instance from raw data
379
 * @param table - Table instance
380
 * @param id - Row ID
381
 * @param original - Original data object
382
 * @param index - Row index
383
 * @param depth - Nesting depth
384
 * @param subRows - Array of sub-rows
385
 * @param parentId - Parent row ID
386
 * @returns Row instance
387
 */
388
function createRow<TData extends RowData>(
389
  table: Table<TData>,
390
  id: string,
391
  original: TData,
392
  index: number,
393
  depth: number,
394
  subRows?: Row<TData>[],
395
  parentId?: string
396
): Row<TData>;
397
```
398

399
Row models chain together to create sophisticated data processing pipelines. The typical order is: Core → Filtered → Sorted → Grouped → Expanded → Paginated.