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

passive-yellow

9/8/2024

Render arbitrary HTML for specific column

Sometimes I need to apply specific styles for certain columns like monospace font, and add additional markups like <a> to create links. Is there a way to do that without relying on rendering Svelte components? Nesting components that's only a span with a class is not really fun and it's hard to deeply nest components with this style. Directly returning HTML in cell doesn't work (obviously).

fair-rose

9/5/2024

Refresh Data After Button Click

Hi, everyone. I just wanted to ask a quick question, after I click a link (such as delete) in the table, I want an api to be called and the data to be refreshed with new data. Is there a way to do this? Will using memoization affect this? Thanks, Adam...

conscious-sapphire

9/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?

genetic-orange

9/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())?...

extended-salmon

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

evident-indigo

8/31/2024

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

Tanstack table data sorting and filtering with server API

absent-sapphire

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

fair-rose

8/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:

fascinating-indigo

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

absent-sapphire

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

absent-sapphire

8/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

sensitive-blue

8/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 ?

xenial-black

8/18/2024

How do I filter table data after deleting a row on a button click?

Link: https://github.com/TanStack/table/discussions/5714

ratty-blush

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

genetic-orange

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

other-emerald

8/13/2024

Is it possible to have expandable subRows in subComponents?

title

metropolitan-bronze

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

rising-crimson

8/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?

ratty-blush

8/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

optimistic-gold

8/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)...

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