TanStack

T

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

rival-black
rival-black9/3/2024

Manual Pagination w/Row Selection

If I am using manual pagination and using row selection when I check a record on one page it persists between pages. What am I doing wrong?
correct-apricot
correct-apricot9/3/2024

How aggregation functions work?

Hello everyone. I have some misunderstandings about how aggregation functions work for aggregation cells. For example, an example from the documentation (in the screenshot). The library has a number of built-in aggregation functions that can be used for aggregation cells. For example, median, sum, max, etc. Do I understand correctly that if I select some function in aggregationFn in the column definition, for example, "median", then in aggregatedCell the getValue function will return the already calculated value, correct? But if I define my custom aggregation function and use it, then getValue will not return the calculated value to me and I have to manually use this function (getAggregationFn())?...
No description
sensitive-blue
sensitive-blue9/2/2024

Help with rerender

Hello, everyone! I'm learning tanstack-table and trying to do table with editable cells. I want to indicate changes in parent component, so I added state ...
modern-teal
modern-teal8/31/2024

what are the best practices to sort and filter data with server api

Tanstack table data sorting and filtering with server API
national-gold
national-gold8/30/2024

how to filter columns with object accessor

I've noticed that column filtering is not working when your accessor is an entire object (for obvious reasons, it doesn't know what you're accessing/dispaying). Is there a filter accessor for each column? Im not sure what filterFn does and what should i return in it....
foreign-sapphire
foreign-sapphire8/27/2024

Refresh Data After Call to Next.js API

Hi, I am currently using react-table in next.js, and am pulling the data in after calling an api router that links to supabase. I have a delete button that calls another api route, and deletes a record from supabase. How do i refresh the data once this action is completed. Here is my code:
No description
other-emerald
other-emerald8/22/2024

How to change accessorKey value based on row value in table

{ accessorKey: "userId", header: ({ column }) => ( <DataTableColumnHeader column={column} title="User Id" /> ), cell: ({ row }) => ( <label>{row?.original?.subRetailerId ?? row?.original?.retailerId}</label> ), }, i want change accessorKey from "userId" to "userId2" when retailerId exists...
fascinating-indigo
fascinating-indigo8/21/2024

Auto Column Size

How can I have auto/dynamic/fit-content column sizes instead of fix sized column sizes? So the column fits the size of its content (all cells in the column). It doesn't have to work with column resizing. I'm basing of this example, which has a sticky header, making this slightly more 'complicated'. Though, this should be an essential feature for TanStack Table, I simply haven't found it in the docs. https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows ...
rare-sapphire
rare-sapphire8/20/2024

having trouble sorting column

how can i specify based on what it should be sorting, i tried seting the sortingFn in the columns but i put console log there and it didnt invoke
dependent-tan
dependent-tan8/19/2024

Custom sorting functions

Is it possible to have a default sorting function when using custom sorting functions. For example return the defaults like basic/alphanumeric when there is no return value from any of the custom sorting functions ?
correct-apricot
correct-apricot8/14/2024

help please, drag and drop rows and subrows

Could someone help me? I need to create a drag and drop, where I can change the position of the rows (I can already do that), the problem is when I try to drag each subrow, I need to move each subrow to where I want, either within the row or to another row, does anyone have any idea? I've been struggling with this for 3 days now.
No description
ambitious-aqua
ambitious-aqua8/13/2024

autoResetExpanded does not work as expected

Hey 👋🏽 @Tanner Linsley @KevinVandy autoResetExpanded should work in such a way that the expanding state is reset on a data change, right? I tried that, but it does not work. The data changes, but the expanded state remains. There's much confusion in the web about how to achieve a auto-reset of the expanded state in tanstack-table v8. The only way I can manage the expand-reset so far is the following: ```js...
harsh-harlequin
harsh-harlequin8/12/2024

Updating props not updating table data

Hey all, I have a bit of a problem. When I am passing data as a prop from a parent component to my useReactTable hook the initial render is fine. However when the prop data changes the data within the table context remains the same. ...
like-gold
like-gold8/9/2024

Apply aggregate function to column

I noticed that there are aggregate functions that I think work on rows but are there any examples out there that use table footers for the sum of a column?
correct-apricot
correct-apricot8/9/2024

Duplicate subRows

I need to set up a drag and drop with rows and subRows, and I'm having problems, it's duplicating the subrows, how can I avoid it? See the photos, so you can understand the context, any light? please
No description
extended-salmon
extended-salmon8/8/2024

Looking for example of Table and useWindowVirtualizer

Tanstack has this example: https://tanstack.com/virtual/v3/docs/framework/react/examples/table. It's a fixed height table with a scrollbar on its parent container. I'm looking for an example where the window is the scrolling element (using useWindowVirtualizer)...
harsh-harlequin
harsh-harlequin8/7/2024

Table Virtualiser with Resize Full width

Hey all, I have been struggling for two days to try and create a table whose columns stretch to full the available space of the table as seen in this example: https://tanstack.com/table/v8/docs/framework/react/examples/full-width-resizable-table And merge this capability with of the table virtualiser as seen in this: https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-rows...
foreign-sapphire
foreign-sapphire8/6/2024

Controlled filtering

I want to use the filtering feature, but I only want the filter to apply when I click the "apply filters" button. Is this possible?