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

sensitive-blue

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.

correct-apricot

4/14/2025

Integrate Nuqs with Pagination

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

inland-turquoise

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.

...

deep-jade

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?...

unwilling-turquoise

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)...

like-gold

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?

frail-apricot

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: ```...

extended-salmon

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?...

extended-salmon

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

other-emerald

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

complex-teal

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

extended-salmon

3/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();...

solid-orange

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

extended-salmon

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

extended-salmon

3/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', {...

fair-rose

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

eastern-cyan

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

eastern-cyan

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

evident-indigo

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

ambitious-aqua

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

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