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

flat-fuchsia

8/7/2025

Row expanding with different data set

Does tanstack table support row expanding feature were the child rows are of different type than the parent type ? Something like a nested table within each row ,,

eastern-cyan

8/4/2025

Why does `useReactTable` need `columns` and `data` to be mutable?

I was trying to use tanstack table for the first time, and my API is typed as deeply readonly, and I'm surprised tanstack table seems to require "write permissions" on the data and columns arrays ```ts const { data } = useQuery(...) // ^? readonly Foo[] useReactTable({...

fascinating-indigo

7/30/2025

Column Filtering: when column is an array?

Example Data: ```ts export const data: TeamMember[] = [ {...

exotic-emerald

7/29/2025

Good Server-Side DataTable Component Examples? (no nuqs)

Has anyone come across some really neat datatable components out there? I'm trying to implement a potentially complex server-side version of ShadCN's data table (that uses TanStack) and the best examples I can find are OpenStatus (https://data-table.openstatus.dev/) and Dice (https://www.diceui.com/docs/components/data-table) and while they're both SO good, they rely on nuqs and my app is basically an SPA as it has no routes etc. but there are going to be multiple data tables

equal-aqua

7/27/2025

Resizing with flex containers

In Tanstack Table, here is basically what I want to do. I have a table like UI using divs. Each row is a flex container. This way I can say how much space a column should take relative to others. I want to introduce column resizing. So what I want to do is when initially rendered, the columns should take the width according to flex rules and those columns must be able to be resized later. The problem is when both width and flex properties exist on the same element flex takes over and the column...

continuing-cyan

7/23/2025

Enable sorting on a column level

I am using tanstak to build a table and I want to including sorting on specific columns. What I want to do is disable sorting globally but then enable it at the column level. I have set enableSorting: false in the useReactTable hook which turns off sorting for everything as expected. But when I go enableSorting: true for a column, it doesnt enable the sorting but still uses the tables default. Is there something I am missing or do I have to do it the other was and disable sorting on columns I dont want to sort. Ideally I dont want to do this as there will be more columns disabled than enabled so I would rather enable the ones I want sorted rather...

ambitious-aqua

7/16/2025

Accessing filtered rows in column defintions

What would be the best way to access the filtered table data in the column definitions. For instance, imagine I want one of the columns to show a count for the number of subrows that it contains which match the current filter. How would you do this? Do you have to manually do this within the table component itself in order to access the filtered row model or can you do some trick?

robust-apricot

7/9/2025

how to get current filterFn (filtering algorithm name)

Hi! I need an urgent help! How can i get current filterFn for column? (Current filtering algorithm name) i need to get a filterFn name to send to the server....

fair-rose

7/2/2025

customAggregation

Hey anybody can you help me explain how to make work custom aggregation fn ? aggregationFns: { myCustomAggregation: (columnId, leafRows, childRows) => { console.log(columnId, 'yolo');...

absent-sapphire

6/23/2025

Should I use TanStack Table to handle my custom "row" components?

I want to layout my table data into a list of components that look like the attached picture. And I was wondering if I should or shouldnt use tanstack table to help me give this list/ grid of items filtering, pagination, and sorting. Is it a sin to use tanstack table on something that doesnt exactly look like a table with rows?...

genetic-orange

6/17/2025

Update options.meta

The meta never updates / rerenders when using the table.setOptions function``` header: ({ table, column }) => { const loadUnit = table.options.meta?.loadUnit; return ( <div className="flex items-center gap-2">...

adverse-sapphire

6/14/2025

Table doesn't scroll vertically

I'm using tanstack table, but unless my table is the direct decendent of a view with a predefined height it does not scroll. Creating a div with some elements inside of it does scroll, but using tanstack to manage the state for that same exact grid prevents scroll. I'm assuming this is a known behavior, I'm just not sure how to address it haha.

deep-jade

6/12/2025

Expand Event triggers when table data is empty (filter gets applied and no data is found)

Hi, i have a situation where i want to emit a stateChange event whenever something happens in the table. In case i apply a filter i emit this change. For some reason when i apply a filter condition and the onColumnnFilterChange triggers the onExpandChange also triggers. Resulting in two emits....

optimistic-gold

6/10/2025

Cursor pagination with tanstack table

Looked online and on the discord to see if theres a straightforward way to implement tanstack table using cursor pagination. Right now my backend returns a next and previous cursor (item id), along with the query total and some other information. Seems like I need to implement manual pagination to convert the cursor information to a pageIndex. Want to see if anyone else had thoughts!...

exotic-emerald

6/6/2025

Examples of table + query + shadcn + drizzle?

Heya, amazing libraries from tanstack - love em. Does anyone know of any example repos, blog posts that go over this specific combo for making reusable data tables? Also thinking of this post - https://www.trevorlasn.com/blog/fetching-data-for-complex-next-and-react-apps

equal-aqua

6/6/2025

Keep row pinning in place + sort on server side

Hello, My data is sorted correctly on the server, and the sorting displays properly in the table. However, I’m having trouble figuring out how to keep the pinned row visible when using server-side (manual) sorting. Pinned rows work as expected with client-side sorting. Current behaviour is that on sorting the pinned row is affected ...

correct-apricot

6/6/2025

enable sort removal except for one column

i'm trying to get a table ux where: - subset of columns are sortable - a single column is the default sort (date) (this is the shape the data is loaded in) - all columns other than the default sort have sort removal enabled ...

correct-apricot

6/6/2025

table hook re-use across routes

follow up from: https://discord.com/channels/719702312431386674/1003326939899113492/1380046393439293530 cc @KevinVandy could you explain more what you mean about re-using hooks? i have a page component that queries some data and passes it down to a table component that instantiates and renders the table...

conscious-sapphire

5/30/2025

Virtualized Table with expandable rows

Hello! Does anyone have a working example of both TanStack Virtualized rows + expandable rows together using react?

genetic-orange

5/30/2025

Column drag resizing not matching cursor's movement

Hello! I am a TanStack table begginer using React. I have implemented a custom resizer handle. I feel confusing that the amount of distance that the mouse is moved does not match the column size. I don't know how to explain it properly, but in the gif you can see that the column ends in a smaller position than it should be, it does not fully follow the cursor... Is this behaviour customizable?...

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