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

rare-sapphire

3/8/2025

No rows are displayed in Production Build but works just fine in development server.

Hey I'm building an csv-importer. In that I'm using tanstack table to review the data with features like editable table, virtaulised table, row selection, sorting and column resizing. When i was developing in the developer server everything works fine. But after i deployed, in the production initially no rows are displayed. It is displayed as soon as i Check the select all rows checkbox in the header or use any filter. ...

message.txt

passive-yellow

3/7/2025

Passing row deeply with context?

Hello! Quick noob question: do you see any issues using a context to pass the current row deeply? Example of what I'm doing:...

rare-sapphire

3/5/2025

getGroupedRowModel crash

Hey, I am trying to use getGroupedRowModel in tanstack table with svelte. Without providing state I get an error in the console, but if I provide ``` state: { grouping: [] }...

jolly-crimson

3/5/2025

Range cell selection

Is this something that's achievable with Tanstack Table? Trying to figure out if I can build it myself with Tanstack Table or whether I should go with AG Grid or Glide

extended-salmon

3/4/2025

Ag grid implement sticky rowwith Add button on first cell

Hi guys ,I am using ag-Grid React v33 and need to implement a custom sticky row that appears immediately after the last row and remains sticky at the bottom when there are many rows. However, if there are only a few rows, the sticky row should appear only after the last row, without floating. the row should also not update on row height change. just like this any ideas or tips?...

flat-fuchsia

3/2/2025

Is there way to filter the selected rows?

Do I need use selection api to reset the table data?

rival-black

2/28/2025

columns accessors defined inside group gets wrong types

info.getValue() type resolves to any instead of correct type, if the accessor is defined in column group. For example: ```tsx const colHelper = createColumnHelper<{name:string}>(); ...

yelping-magenta

2/26/2025

Secondary key for sorting

Is there a built-in mechanism to have all columns be secondarily sorted by another specific column. In other words, if I have columns A, B, C, D, then if I sort by A, B, or D, I want all equal values to be sorted by C. Of course, if I sort by C, then it just sorts itself independent of other columns. I was looking at the multi-sort functionality, but it doesn't seem to cover the above use-case, or does it?...

ratty-blush

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

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

foreign-sapphire

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

rival-black

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?

generous-apricot

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

sensitive-blue

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 🙂

noble-gold

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

sunny-green

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

yappiest-sapphire

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

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

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