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

typical-coral

2/9/2025

Row pinning + manual pagination

As the information kept when you pin a row is it's index, I wonder if it is possible to provide custom logic to enable row pinning while manualPagination is true. Didn't find anything about that.

rising-crimson

2/7/2025

InfiniteQuery (pagination) + Select All

Hello, I am dealing with a bit of a problem. Basically, I am using infinite query along with infinite scroll. What I have noticed, is that the select all functionality does not work. I have tried to find a solution online via the blogs and or the documentation, but I can’t find anything that works. Has anyone else experienced the same issues? ...

flat-fuchsia

2/7/2025

Access header context in cell rendering

I have the table components below, and I want the user to able to switch between normal table layout and vertical table. in vertical table layout every row becomes its own table, I want to access the header context in the cell rendering cycle to prevent any errors:...

correct-apricot

2/6/2025

Lazy loading of row data

Ive got a table setup where certain API's take a long time to respond, and its aggregating data from multiple API's. I wanted to load the rows and then invidual cells afterwards, and something that is causing an issue here is it rerenders the entire table - resetting the pagination state to page 1. Part of the goal here was to be able to navigate while other cells lazy-loaded. Are there any examples/tips for handling this pattern? Edit: nvm... solution was: ...

typical-coral

1/29/2025

Column pinning – columns must have a width set?

Hi guys! I'm trying to implement column pinning using v8 and I'm wondering if the pinned columns must have an explicit width so that it works properly. I'm asking because at the moment some of my columns would work better with auto width.

like-gold

1/29/2025

How to filter row on cell type of Array (renders as string)?

I have filtering working for any columnId that is a string. ```ts export type ProjectItem = { title: string...

genetic-orange

1/28/2025

Issue with typing props on a vue component using ColumnDef type.

I am hitting the issue described here (from 2022) -- https://github.com/TanStack/table/issues/4382. I tried the workaround that someone suggested at the tail end, but I still see type issues when trying to send a columns prop on my component. ``` type DataTableProps<TData> = { columns: {...

fair-rose

1/24/2025

Access table instance in external components

Is it possible to access the table (useReactTable) from other components without passing props? I have several components on different levels and separate from the table, such as the search bar, filter, pagination, delete confirmation modal, etc. Within these components, I need to access the table to update it based on these functionalities. Since there are several components, and some are nested inside others, I want to avoid prop drilling because it would make the structure confusing and awkward, and cause unnecessary re-renders....

notable-maroon

1/18/2025

Hidden Columns lead to sluggishness

Hello! Got a question to run by the community. I have a table up and running using v8, and have already implemented column hiding. Running into sluggishness when there is a lot of hidden columns (200+). Note that they are not rendered then hidden, nor do I iterate over them if they are hidden. I wanted to know whether internally they are iterated over regardless? Appreciate any help!...

official-silver

1/16/2025

Can't figure out typeof cell (jsx or text) in custom table implementation

We have a custom table implementation using Tanstack's Table and we'd like to wrap cell's in a <Text> component (React Native) when the cell is raw text. But cell.getValue() returns the raw text data even if the cell is JSX. Can't seem to find any other value or method on the cell instance that points to whether there's JSX involved.

equal-jade

1/15/2025

Please help with server side pagination useVueTable parameters (shadcn-vue)

I have a fairly simple table, although my problem is that I have millions of rows which I cannot load all at once. I have been searching this for hours but everything that I see is for React and I couldn't come across anyone who has done server side pagination in Vue/Nuxt version. :grrrr: First of all, rowCount, does not exist in TableOptions, second of all, even though I provide pageSize & pageIndex accordingly based on my data, the row count display at the bottom is always 10 (0 of 10 row(s) selected.) 😢 Dependencies are as follows:...

correct-apricot

1/15/2025

Where has Tables been in my dev life? Love it! Couple of questions.

I've got a little dev playground and I have a table with sorting, filtering, and basic pagination working (in just a couple of hours from cratch!). For pagination, I have it doing this (first screenshot from tanstack.com). But what I want the pagination to do is the second screenshot (row or page buttons). I know how to make the buttons look like how I want, what I don't know is how to get Tables to dynamically generate the buttons, and a ... button indicating the pages that aren't shows.

absent-sapphire

1/14/2025

lit table data not reactive

I'm trying to set up a table using the lit adapter with my data stored as a nanostore atom. In my console.log output, I can see that my lit element's render function is being called when the nanostore that contains the data updates, and that the render function does in fact see the updated values for the data. However, the table continues to dispaly the initial values.
I tried, as part of debugging, using the vanilla js createTable function from @tanstack/table-core with as close to the same options as I could (that function seems to require a few things be present in the options that the lit controller doesn't?). When I run the table this way, the data is reactive, but the table is not (clicking headers does not resort the data).
I'm having trouble figuring out what I might be doing wrong, and would appreciate any pointers on how to debug this. ...

subsequent-cyan

1/13/2025

How to change order pinned columns ?

How to change order pinned columns ? https://github.com/TanStack/table/issues/4362...

wise-white

1/13/2025

Empty getRowModel() rows despite having data

Hi I've been using the tanstack table but I did a lot of server side pagination, filtering, and sorting. I have a boolean field called hidden and I do filter these on the backend. It's all working with the api and I can see that the data is passed on to the DataTable. The getRowModel() function returns empty rows still, wondering if I am missing something or did some weird config. Here is the sample of my implementation: ``` let tableConfig: TableOptions<DataWithOnClick<TData>> = { data, columns,...

optimistic-gold

1/13/2025

Show pivoted column value on child rows - table v6

Hi everyone, Is there a way to show the pivoted column value on the child rows? Already tried Cell and Pivot props with no luck. ...

wise-white

1/10/2025

Is it possible to sort data in each group?

Hi all, is it possible to sort data without changing the order of grouping data? In the video, I group data by last name. If I sort by age, the order of grouped lastname is changed. Can I prevent that? Or is there any way to implement the sorting for each group only?

optimistic-gold

1/9/2025

Suspense within table

I want to wrap <tbody> with suspense. But I couldn't find a suitable way of setting the data from a component with use(promise) below that suspense. Any ideas?

deep-jade

1/9/2025

No editable table (and others) example for svelte

There seem to be no svelte specific example for an editable table (and other features) that are present in the react examples , see https://tanstack.com/table/latest/docs/framework/svelte/examples/editable-data and https://github.com/TanStack/table/tree/main/examples/svelte ...

secure-lavender

1/7/2025

Table scrolling

I have a flex layout with several columns. The last column is the tanstack table and the table itself has a huge width. Though, the parent div has the appropiated remaining width of the screen. From what I understand that's the reason, why column pinning does not work. Same is true for sticky headers. I think the parent div does the scrolling and not the table itself....

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