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.

In Practice: Navigating Feedback & Collaboration

TanStack Table v8’s terminology is incredibly precise, which is fantastic for clarity but can feel daunting when you’re learning a new professional vocabulary. Let’s consider how these concepts would be discussed in a typical development workflow. Imagine you’ve spent the morning building out a complex data grid – perhaps displaying sales figures by region and product category – using TanStack Table. You then submit a pull request for review. A senior engineer, Sarah, leaves a comment on your code: “This column definition is good, but could we consider using cellNoDataRenderer to handle the cases where the data isn’t available? Also, I noticed the sorting – are you confident this aligns with user expectations regarding regional aggregation?”

That comment highlights several key terms. “Cell No Data Renderer” refers directly to a component that handles empty or missing values within a table cell, preventing confusing blank spaces or errors. It’s not just about displaying data; it’s about managing its absence gracefully. “Sorting” is another crucial area. The phrasing implies an assessment of whether the default sorting (likely by region) makes sense for how users will interact with the data – a consideration that speaks to understanding user experience and data presentation best practices. You might respond in Slack: “Thanks, Sarah! Good point about the cellNoDataRenderer. I hadn’t explicitly handled missing regional sales figures; adding that will definitely improve the display. Regarding sorting, we’ve prioritized by region based on initial feedback from the product team, but your observation is valuable – perhaps we could add a secondary sort option for users who prefer to see aggregated data by category.”

Furthermore, think about writing a pull request description itself. You wouldn’t simply say “Implemented table.” Instead, you would meticulously document why you made specific choices. For example: “This PR introduces TanStack Table v8 to display sales performance data. The core functionality includes defining columns for ‘Region,’ ‘Product Category,’ and ‘Sales Revenue.’ Column definitions utilize the headerGroup prop to visually group related information, improving readability. Data is sorted by ‘Region’ ascending by default, as determined by [link to product requirements document]. Pagination is implemented with a page size of 25 records to optimize performance for large datasets.”

This level of detail demonstrates an understanding not just how to use the table, but also why certain design decisions were made – contributing to maintainability and collaboration. It’s about communicating your technical choices in a way that’s clear, concise, and aligned with professional expectations.

Here’s a simple example of using tanstack-table CLI to create a basic table configuration file:

npx @tanstack/table@latest create-table --name SalesData

This command generates a SalesData.ts file containing the initial structure for your TanStack Table, ready to be populated with data and configured for sorting, filtering, etc. The CLI provides a starting point – a concrete example of how you might begin building upon the core vocabulary.