TanStack Table v8: Data Grid English for React Engineers

TanStack Table v8 (formerly React Table) is a headless data grid library for React, Vue, Solid, and other frameworks. It manages the logic of sorting, filtering, pagination, and column visibility while leaving all the rendering to you. Because it is headless, the vocabulary is largely about state, configuration, and models rather than UI components. This post explains the key English terms you will encounter when building data grids with TanStack Table.

Core Setup

useReactTable — the primary hook for TanStack Table in React; you pass it column definitions, data, and feature options, and it returns a table instance with all the state and helper functions you need.

“We call useReactTable once at the top of the data grid component and then use the returned table instance to render headers, rows, and cells.”

column definition — an object that describes one column in the table, including its unique ID, how to access the data value, how to render the header, and which features (such as sorting or filtering) are enabled for that column.

“We added a column definition for the status field that renders a coloured badge instead of plain text using a custom cell renderer.”

getCoreRowModel — a required adapter function you pass to useReactTable that tells TanStack Table how to compute the basic row model from your data array; it is always needed regardless of which other features you enable.

“Without passing getCoreRowModel to the table configuration, TanStack Table throws an error because it cannot compute the base set of rows.”

Sorting

sorting state — the array of sort descriptors that describes how the table’s rows are currently ordered; each descriptor contains a column ID and a boolean indicating ascending or descending direction.

“We lifted the sorting state into a URL query parameter so users can bookmark a pre-sorted view of the data table.”

getSortedRowModel — the adapter function that enables server-computed or client-computed sorting; when passed to useReactTable, the table instance exposes sorted row data and header click handlers automatically.

“After adding getSortedRowModel to the configuration, clicking a column header immediately re-sorted the 10,000-row dataset on the client without an API call.”

multi-sort — a feature that allows the table to sort by more than one column simultaneously; the user holds the Shift key while clicking a second column header to add a secondary sort criterion.

“We enabled multi-sort so analysts can first sort by department and then by salary within each department in a single operation.”

Filtering

filtering — the process of reducing the visible rows to only those that match a given condition; TanStack Table supports both global filtering (searching all columns) and column-level filtering.

“We implemented column-level filtering on the date column using a range filter that accepts a start date and an end date from two date picker inputs.”

getFilteredRowModel — the adapter function that enables client-side filtering; the table instance then exposes a filtered view of the data based on the current filter state.

“Passing getFilteredRowModel allowed us to add an instant search input that filters the entire table as the user types without touching the server.”

Pagination

pagination — the feature that divides the table’s rows into pages, displaying a limited number of rows at a time with controls to navigate between pages.

“We set the initial pagination state to 25 rows per page after user research showed that 50-row pages felt overwhelming on smaller screens.”

getPaginationRowModel — the adapter function that enables client-side pagination; combined with sorting and filtering, it ensures the paginated rows come from the already-filtered and sorted dataset.

“We use getPaginationRowModel alongside getFilteredRowModel so pagination page counts update correctly when a filter reduces the total number of matching rows.”

Column Pinning and Visibility

column pinning — a feature that fixes one or more columns to the left or right edge of the table so they remain visible when the user scrolls horizontally through many columns.

“We pinned the Name column to the left so users can always see which row they are reading while scrolling through dozens of data columns on wide datasets.”

column visibility — a table feature that tracks which columns are currently shown or hidden, allowing users to personalise the table layout by toggling columns on and off.

“We persist the column visibility state to localStorage so each user’s preferred column layout is restored when they return to the page.”

row model — the computed representation of your data after TanStack Table applies all active features (filtering, sorting, grouping, pagination); the row model is what you iterate over when rendering the table body.

“We iterate over the table’s row model to render each row, accessing cell values through the cell.getValue() helper rather than reading the original data object directly.”

Practice

Build a TanStack Table with at least three columns, sorting state stored in a URL parameter, and a global search input connected to getFilteredRowModel. In English, explain to a colleague the difference between the row model and the raw data array you passed to useReactTable, and why TanStack Table separates these two concepts.