Row Models

If you take a look at the most basic example of @qui/react-table, you'll see a code snippet like this:

import {getCoreRowModel, useReactTable} from "@qui/react-table"

function Component() {
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(), // row model
  })
}

The getCoreRowModel function is part of QUI Table's modular design. Not all code for every feature is included by default in the createTable functions/hooks. You only need to import and include the code necessary to generate rows based on the features you want to use.

What are Row Models?

Row models in React Table transform your original data for features such as filtering, sorting, grouping, expanding, and pagination. The rows displayed on screen are not always a direct 1:1 mapping of the original data; they may be sorted, filtered, paginated, etc.

Import Row Models

You should only import the row models that you need. Here are all the row models that are available:

// only import the row models you need
import {
  getCoreRowModel,
  getExpandedRowModel,
  getFacetedMinMaxValues,
  getFacetedRowModel,
  getFacetedUniqueValues,
  getFilteredRowModel,
  getGroupedRowModel,
  getPaginationRowModel,
  getSortedRowModel,
} from "@qui/react-table"

// ...

const table = useReactTable({
  columns,
  data,
  getCoreRowModel: getCoreRowModel(),
  getExpandedRowModel: getExpandedRowModel(),
  getFacetedMinMaxValues: getFacetedMinMaxValues(),
  getFacetedRowModel: getFacetedRowModel(),
  getFacetedUniqueValues: getFacetedUniqueValues(),
  getFilteredRowModel: getFilteredRowModel(),
  getGroupedRowModel: getGroupedRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getSortedRowModel: getSortedRowModel(),
})

Using Row Models

After creating your table instance, you can access various row models directly from it. Beyond the ones you may have imported, additional derived row models are available.

For typical rendering scenarios, you'll likely only need to use the table.getRowModel() method. This row model uses any other necessary row models based on the features you've enabled or disabled. The other row models are available for deeper exploration of the underlying data transformations occurring within the table.

Available Row Models

Available Row Models on Table Instance getRowModel - This is the main row model that you should use for rendering your table rows markup. It will use all of the other row models to generate the final row model that you will use to render your table rows.

getCoreRowModel: returns a basic row model that is just a 1:1 mapping of the original data passed to the table.
getFilteredRowModel: returns a row model that accounts for column filtering and global filtering.
getPreFilteredRowModel: returns a row model before column filtering and global filtering are applied.
getGroupedRowModel: returns a row model that applies grouping and aggregation to the data and creates sub-rows.
getPreGroupedRowModel: returns a row model before grouping and aggregation are applied.
getSortedRowModel: returns a row model that has had sorting applied to it.
getPreSortedRowModel: returns a row model before sorting is applied (rows are in original order).
getExpandedRowModel: returns a row model that accounts for expanded/hidden sub-rows.
getPreExpandedRowModel: returns a row model that only includes root level rows with no expanded sub-rows included. Still includes sorting.
getPaginationRowModel: returns a row model that only includes the rows that should be displayed on the current page based on the pagination state.
getPrePaginationRowModel: returns a row model without pagination applied (includes all rows).
getSelectedRowModel: returns a row model of all selected rows (but only based on the data that was passed to the table). Runs after getCoreRowModel.
getPreSelectedRowModel: returns a row model before row selection is applied (Just returns getCoreRowModel).
getGroupedSelectedRowModel: returns a row model of selected rows after grouping. Runs after getSortedRowModel, which runs after getGroupedRowModel, which runs after getFilteredRowModel.
getFilteredSelectedRowModel: returns a row model of selected rows after column filtering and global filtering. Runs after getFilteredRowModel.

Row Model Execution Order

Comprehending how QUI Table processes rows internally can provide you with a clearer picture of its operations and assist in debugging any potential issues.

Here is the order in which each row model is applied to data, assuming their respective features are enabled:

getCoreRowModel
getFilteredRowModel
getGroupedRowModel
getSortedRowModel
getExpandedRowModel
getPaginationRowModel
getRowModel

If any feature is disabled or turned off using a "manual*" table option, the corresponding getPre*RowModel will be used at that step instead.

In summary, the processing sequence starts with filtering the data, followed by grouping, sorting, expanding, and finally pagination.

Row Model Data Structure

Each row model will provide you the rows in 3 different useful formats:

Row Formats

Each row model in the QUI Table provides rows in three distinct and useful formats:

rows - An array of rows.
flatRows - An array of rows, but all sub-rows are flattened into the top level.
rowsById - An object of rows, where each row is keyed by its ID.

// array of rows
console.log(table.getRowModel().rows)

// array of rows, but all sub-rows are flattened into the top level
console.log(table.getRowModel().flatRows)

// object of rows, where each row is keyed by its `id`
console.log(table.getRowModel().rowsById["row-id"])

Table State

Rows