TanStack

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

Join

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

afraid-scarlet

5/20/2025

Filter columns based on the value of a formatted cell.

Hey all, using shadcn table for a side project. Having some trouble with filtering a column that has been formatted as the value within in each cell is pretty different from the default. Is there a property im missing here? I would ideally like to filter based off the formatted value and not the original.

continuing-cyan

5/16/2025

Updating ColumnDefs question

Hi, our ColumnDefs change as a result of a state change - useReactTable does not seem to be applying the new ColumnDef instances after the initial create. What is the recommended way to apply updated ColumnDef settings. I could store as a custom property on the meta and and provide a setter for this. a sample setting is if the column is editable or not....

like-gold

5/15/2025

Anyone know how to stop flexRender from messing up Shadcn dialog/form tab order?

If I place my column header or cell impl directly in the table the tab order isn't messed up. I asked a similar question in Shadcn general: https://github.com/shadcn-ui/ui/discussions/7325#discussioncomment-13045899

future-harlequin

5/15/2025

Selecting rows with keyboard

If I want to allow shift/ctrl-arrow etc to select one or more rows in a TanStack Table, are there any goto libraries for that? Or should I just roll my own?

ambitious-aqua

5/7/2025

Column dynamic width

In these docs (https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows) columns resize depending on width, but when I copied entire snippet to my project it doesn't? I'm ending up with what you can see on the screenshot. I'm using same version as in the docs. What I need is table which takes full width with certain columns wider than the rest

tame-yellow

5/2/2025

Disable auto resetting pageSize (similar to page index, but only for page size)

It appears that on data change, the pageSize is automatically reset to the initial state. Is theer a way to prevent this, similar to the autoResetPageIndex option? Thanks!...

quickest-silver

4/29/2025

Help me please understand how to populate faceted filters on first render

Hey there. Im struggling to make react-select to work with faceted filters on the first render. When app loads options from faceted filters from the table computation are not present in react-select. Once refresh table (re-render) clicked the options show up. How can I make it so it they will show in 1st render too. https://codesandbox.io/p/devbox/zen-joana-rz6fg5?workspaceId=ws_G2A9pv9f8cYKfsXyvYJaKX...

quickest-silver

4/23/2025

custom filterFn typescript type

How do I extend filterFn types with my custom filter?? i defnied my new custom filter in filterFns but typescript yells at me when I use it in the column definitions. Nothing in the docs shows how to exted the interface.

adverse-sapphire

4/22/2025

How to Retrieve and Set a Consolidated Schema for User action in Table for Filters, Sorts and more ?

I wanted to check if it's possible to define a table schema that captures all user interactions such as filtering and sorting for each column. Specifically, in scenarios where users apply both sorting and filtering across multiple columns simultaneously, is there a way to retrieve a complete and structured summary of all the actions performed—per column? For example, if a user filters and sorts on the "size" and "name" columns, I'd like to receive a consolidated schema or data object that includes the applied filters, their logical connectors (e.g., AND/OR), and sorting directions for each column. [...

other-emerald

4/14/2025

Dynamic column minSize?

Hi all, I'm looking for a clean way to have dynamic minSize across my table, working along with resizing. Basically I want columns to have a certain minSize based on the container and never letting it go below that point, if larger then overflow no problem. Would be great if someone could give a pointer on how I could approach this.

exotic-emerald

4/14/2025

Integrate Nuqs with Pagination

If I need to control my pagination with nuqs I need to enable the manualPagination?

eastern-cyan

4/7/2025

Custom setup v8 in Svelte 5 (or just wait for v9)?

Tanstack installation docs: https://tanstack.com/table/latest/docs/installation

NOTE: There is not a built-in Svelte 5 adapter yet, but you can still use TanStack Table with Svelte 5 by installing the @tanstack/table-core package and using a custom adapter from the community. See this PR for inspiration.

...

optimistic-gold

4/4/2025

What is the best way to detect an empty table header for accessibility purposes?

It's an accessibility rule that all table headers (th elements) must contain text. If you have a header that is blank, it should be rendered as a td instead, so as not to mislead/confuse screen readers. Unfortunately, it seems like I have to explicitly set header: '' on my column definitions to achieve this. Otherwise, the libray seems to set a default header function that checks if the column is an accessor column before returning null for the header. It would be great to have some sort of utility header.isEmpty() or something to that effect; I am not sure how I can check it otherwise. Even the output of flexRender is non-null for empty headers, again unless the column def sets an empty string. I just want this to work by default so developers don't have to remember to set the header as an empty string. Any suggestions?...

modern-teal

4/4/2025

Grouping / Expanding features

Hello, I'm currently looking to implement a feature where I need to expand some data. I've tried to achieve it looking at the documentation without success. I'm trying to do something similar to this: https://glin.github.io/reactable/articles/examples.html#nested-tables My table have rows and nested rows but the parent row does not have the same format as the children rows. It is mostly like having a nested table inside each expanded rows. In all the example I've found the parent rows mostly have the same structure as the children. (even with a similar structure the parent row displays columns that does not match with the children)...

genetic-orange

4/3/2025

Column Groups Bug

Hello guys I'm trying to use group columns but somehow this is the result. How to solve this, and each child be under his parent?

rare-sapphire

4/3/2025

How to make reusable columns

Hello, i'm facing a bit of a problem trying to make my own column helper type deal since a lot of my headers are reused or are slight variations of each other. I can't seem to make a function with generics that I could then customize: ```...

modern-teal

4/2/2025

Reset Pagination manually

Hello! I'm using a server-side manual pagination. There are also search and filter forms, which which change what data the table receives. This works fine now, but whenever a user interacts with the pagination, and then interacts with filters or the search (say, user is on page 2/20), the tables pagination won't reset. So the pageIndex will remain the same. And I don't know how to reset the index. I'm aware that there are methods for this case exactly, but I have a container component which is concerned with data fetching, and a table component which contains the tanstack table. So I can't really call table.resetPagination() from the event handler that handles the search form submit. What is the right way of triggering a reset of the table from outside?...

modern-teal

4/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...

mute-gold

4/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;...

metropolitan-bronze

3/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...

Previous Next

Gaming

Programming

TanStack

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

TanStack

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