TanStack

T

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

like-gold
like-gold4/2/2025

Misunderstanding manual pagination

Hello! I don't think I understand how manual pagination is supposed to work. The data I work with is paginated via server - that works fine as it is. If I read the docs correctly there https://tanstack.com/table/latest/docs/guide/pagination#page-count-and-row-count, then all I need to do is provide rowCount, is that not right? Because I do provide it but something isn't working correctly. table.getCanPreviousPage() and next area always false on page 0. And if the page is not 0, then they're always true. Both of them. I've verified this with: ```javascript...
metropolitan-bronze
metropolitan-bronze4/1/2025

Row selection bug fixed when removing StrictMode?

A potential bug or am I doing something wrong? ```const selectRow = (row) => { if (!table.getIsSomeRowsSelected()) { return true;...
No description
fascinating-indigo
fascinating-indigo3/31/2025

Tanstack Table Reactivity inside Tanstack Form

The answer may be more on the form side but I am trying to make a table inside a tanstack form to update an array field. I am having difficulty getting the table to be reactive to the form state. Below is a simple reproduction. The Show updates when a value is pushed but the table does. https://stackblitz.com/edit/tanstack-form-hteddjvf?file=src%2Findex.tsx...
like-gold
like-gold3/28/2025

Working with Row Selection State

So I have a hard time managing the Row Selection State manually: ```javascript onRowSelectionChange: (selection) => { const selectedRows = selection();...
robust-apricot
robust-apricot3/28/2025

Virtual columns with pinned columns

I haven't so far seen and example of pinned columns working with virtual columns, is there one out there? The main problem is that the pinned columns get removed when they are supposed to become "virtual". I have played with the rangeExtractor with mixed results. Has anyone done this before successfully? I can post links to my code so far if helpful 🙂...
like-gold
like-gold3/27/2025

Intended way of lifting up selected rows

I'm still new to this but I'm not finding a nice way to lift up selected rows to a parent and then to different component. For example, I have a parent container component, which contains a modal component and the table component. Selected rows should be visible in the modal. So my idea was it, to setup a useEffect with [table, rowSelection] dependencies. In the parent component I would write the selected rows to another state variable and move it to the modal, but it immediately creates a rendering loop. I've also tried to instead write the selected elements to context, but it has the same problem. What is the intended way of lifting information like this up? Can I instead of using an effect to observe this "event" access the events differently?...
like-gold
like-gold3/27/2025

Cell formating

Hello! Very new to this lib. May be a basic question, sorry. I am not sure why, but cell formatting just doesn't work? ```javascript columnHelper.accessor('profileNumber', {...
correct-apricot
correct-apricot3/27/2025

sort by rowSelection

Hello, I am a bit confused on how to sort by rowSelection. Can someone point me in the right direction?...
rising-crimson
rising-crimson3/25/2025

Sorting within Groups

Hey all, I seem to be having a hard time figuring out how to sort within a grouped table, and I'm not sure if it's an issue with the table itself or if I'm trying to do something that the table is not built to do. I have a grouped table, and if I sort by one of the columns (not the one the data is grouped on), I'm looking to have the data within that group be sorted while the grouped column stays in order. Is that something that's possible?...
extended-yellow
extended-yellow3/15/2025

Accessing column meta from filterFn

I need to access a particular function passed in via column meta, to sanitize the value being filtered. ```ts export function multiOptionFilterFn<TData>( row: Row<TData>,...
extended-salmon
extended-salmon3/13/2025

Grouping not working when use manual pagination

hi everyone, i'm encountering an issue when using manual pagination with React Table. everything works fine before implementing manual pagination, but after enabling it, the row grouping stops functioning correctly. has anyone faced a similar problem or knows how to fix this?
No description
stormy-gold
stormy-gold3/11/2025

Row Selection is not persisting between pages

Following in the object i am passing to useReactTable const table = useReactTable({ data, columns, pageCount: pageCount,...
deep-jade
deep-jade3/8/2025

No rows are displayed in Production Build but works just fine in development server.

Hey I'm building an csv-importer. In that I'm using tanstack table to review the data with features like editable table, virtaulised table, row selection, sorting and column resizing. When i was developing in the developer server everything works fine. But after i deployed, in the production initially no rows are displayed. It is displayed as soon as i Check the select all rows checkbox in the header or use any filter. ...
eager-peach
eager-peach3/7/2025

Passing row deeply with context?

Hello! Quick noob question: do you see any issues using a context to pass the current row deeply? Example of what I'm doing:...
genetic-orange
genetic-orange3/5/2025

getGroupedRowModel crash

Hey, I am trying to use getGroupedRowModel in tanstack table with svelte. Without providing state I get an error in the console, but if I provide ``` state: { grouping: [] }...
rare-sapphire
rare-sapphire3/5/2025

Range cell selection

Is this something that's achievable with Tanstack Table? Trying to figure out if I can build it myself with Tanstack Table or whether I should go with AG Grid or Glide
wise-white
wise-white3/4/2025

Ag grid implement sticky rowwith Add button on first cell

Hi guys ,I am using ag-Grid React v33 and need to implement a custom sticky row that appears immediately after the last row and remains sticky at the bottom when there are many rows. However, if there are only a few rows, the sticky row should appear only after the last row, without floating. the row should also not update on row height change. just like this any ideas or tips?...
No description
passive-yellow
passive-yellow3/2/2025

Is there way to filter the selected rows?

Do I need use selection api to reset the table data?
genetic-orange
genetic-orange2/28/2025

columns accessors defined inside group gets wrong types

info.getValue() type resolves to any instead of correct type, if the accessor is defined in column group. For example: ```tsx const colHelper = createColumnHelper<{name:string}>(); ...
unwilling-turquoise
unwilling-turquoise2/26/2025

Secondary key for sorting

Is there a built-in mechanism to have all columns be secondarily sorted by another specific column. In other words, if I have columns A, B, C, D, then if I sort by A, B, or D, I want all equal values to be sorted by C. Of course, if I sort by C, then it just sorts itself independent of other columns. I was looking at the multi-sort functionality, but it doesn't seem to cover the above use-case, or does it?...