Rows

API

Row Models

The table instance generates row objects and stores them in useful arrays called "Row Models". This is discussed in much more detail in the Row Models Guide, but here are the most common ways you may access the row models.

<tbody>
  {table.getRowModel().rows.map((row) => (
    <tr key={row.id}>{/* ... */}</tr>
  ))}
</tbody>

Row Objects

Each row object encapsulates not only the data for that row but also provides multiple APIs to interact with the table state or extract cell values based on the current state of the table.

Every row object has an id property that makes it unique within the table instance. By default the row.id is the same as the row.index that is created in the row model. However, it can be useful to override each row's id with a unique identifier from the row's data. You can use the getRowId table option to do this.

const table = useReactTable({
  columns,
  data,
  // override the row.id with the uuid from the original row's data
  getRowId: (originalRow) => originalRow.uuid,
})

Note: In some features like grouping and expanding, the row.id will have additional string appended to it.

Access Original Row Data

Access the original data passed to the table instance via the row.original property. The data in row.original remains unmodified by the accessors in your column definitions, so any transformations done in the accessors won't be reflected in row.original.

// Access any data from the original row
const firstName = row.original.firstName // { firstName: 'John', lastName: 'Doe' }

Sub Rows

If you use grouping or expanding features, your rows may contain sub-rows or parent row references. Detailed information is available in the Expanding Guide. Here's a quick overview of useful properties and methods for working with sub-rows.

row.subRows: An array of sub-rows for the row.
row.depth: The depth of the row (if nested or grouped) relative to the root row array.
- 0 for root level rows
- 1 for child rows
- 2 for grandchild rows, etc.
row.parentId: The unique ID of the parent row for the row (The row that contains this row in its subRows array).
row.getParentRow: Returns the parent row if it exists.

More APIs

Depending on the features that you are using for your table, there are dozens more useful APIs for interacting with rows. See each features' respective API docs or guide for more information.

Row Models

Cells