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

ugly-tan

2/25/2025

Issue: Sorting null values to the bottom in @tanstack-table

Hello everyone! I hope you're all doing well. I've been struggling with a sorting issue in @tanstack-table for a few days and haven't found a solution yet. I'm sorting a table on the client side, but when some users have null names and I apply descending (desc) sorting, these null values appear at the top of the list. Ideally, I would like them to always be placed at the bottom, regardless of the sorting direction, so they don't interfere with the natural order of the data....

genetic-orange

2/23/2025

custom vue data table component

I am trying to make a reusable DataTable component with vue, and feel like i'm making things harder on myself. This is the code I've come up with: ``` import { valueUpdater } from "~/lib/utils"; const {...

continuing-cyan

2/22/2025

dnd Kit and Virtualizer in rows

In rows cant be to do both virtualisation and drag & drop. Both are applying same "tr" tag. it only have one ref to set at a time....

xenophobic-harlequin

2/21/2025

Table Sub views

I'm using tanstack React table to render a list of objects. I'm using the column filters to filter different aspects of each entry and the global filter for a search field. I was working on a feature to add groupings of objects on top of that. For example, all records with active state is in one group, all records that have been added to favorites list is another group, and a group to view all. I initially started by adding the group filtering in the global filter which has worked nicely. But now I want to be able to get statistics about each group before doing the filtering. For example, I've modified the column filters and the search field, but now I want to see how many results are there in each group before switching to it. This is something that could've been achieved if there is some kind of a sub-views feature where the table filtering will produce sub views that can be retrieved in isolation from the same table. Another example you can consider is if I had a set of data with tiers, and I wanted to render 3 tables representing data for each tier. In this case I have to create 3 different table objects and render them in isolation. While if we had sub views, I can create one table, and display these sub views. Any changes to the filter would update all of the them since it's the same table object....

ratty-blush

2/19/2025

can i add style border for coloumn groups, using in react, shadcn.

title

fascinating-indigo

2/19/2025

tableContainerRef is initially null so cannot use tanstack table on first render?

I am using server components to send the initial data to the client immediately. So the very first render of the component should be good to go. However a ref, such as the tableContainerRef used in much of the documentation is null on the first render and only an actual ref after the first render, meaning on the first render the table cannot have a body. What is the suggested fix for this?

like-gold

2/18/2025

Stale sorting results

Hi all! I am having difficulty sorting the table based on row selection. I have created a custom SortingFn, which appears to work fine. It correctly sorts the rows ascending or descending as I toggle the sort direction. The problem is that if I change the row selection, the sorting table continues to sort based on the row selection when it was sorted for the first time. I have tried various memoizations depending on rowSelection, but the table shows the same final row model based on stale selection values....

fascinating-indigo

2/18/2025

How to make composite filtering?

On status active + pending I want to include rows that have either of that and not a row that includes both (In my case that isnt possible result). I couldnt find anything like that in example, Help 🙂

exotic-emerald

2/14/2025

Getting table cells to wrap horizontally

Hey guys, I'm trying to create a table with the following behavior: - Cells of different widths in a column should align - The last cell, with width: "100%" should fill the remaining space available - The cells should wrap to the next row when there's not enough space remaining in the viewport....

graceful-blue

2/12/2025

Shuffle sorting function

Hi guys, anyway that I can add 1 more option to my table that sort in shuffle? Currently my code is: ```...

flat-fuchsia

2/10/2025

Preventing pagination calculation on first render

I am storing pagination state for the table in query params and there is a problem with first render of the table where I render skeletons placeholders when data is first loading and this causes the pagination state to reset and it probably doing the recalucation of pagination for first render and then for new data. When i use this approach from the github discussion ```ts const tableData = useMemo( () =>...

conscious-sapphire

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.

harsh-harlequin

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

exotic-emerald

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

complex-teal

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

conscious-sapphire

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.

conscious-sapphire

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

ratty-blush

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

eastern-cyan

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

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