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

sensitive-blue

12/8/2023

How to get a result for subRows search in a table

I have only 2 columns. I can see the result of the search in a search component (in filter), but when i press on it, the results are not showing up in the table...

wise-white

12/7/2023

global filter function that accesses outside state

I want to filter my rows based on their edited state. I already maintain the row state so I can render 'modified' rows differently, and it works great. But in order to filter on the state, I tried to do this: ```tsx const [stateFilter, setStateFilter] = useState<string|undefined>(); ...

vicious-gold

12/6/2023

Server Component with Columns Cell property

Hi, I'm using nextjs 14 with server components. I do all the pagination server side and it works great, but I would like to also have columns array and the cell property as server component. What is the best way to achieve that? ...

rival-black

12/3/2023

Get object from `cell` function

```ts columnHelper.display({ id: "actions", header: "Actions", cell: (cell) => {...

genetic-orange

12/2/2023

Equivalent Method to Ag Grid API

Hi, I’m super new to tan stack and I’m trying to work with tan stack and ag grid / maybe only using tan stack. I’m using ag grid api to use the apply transaction method to quickly load incoming data. Is there anything equivalent or a super efficient way of updating the data of the table which has a continuous ingest stream of data? Thanks!...

genetic-orange

12/1/2023

Dragn and drop columns in grouped columns

need to drag the title column "Test" but he won't let me do it https://codesandbox.io/p/devbox/elastic-sound-3yv8lz?embed=1&file=%2Fsrc%2Fmain.tsx%3A90%2C20...

harsh-harlequin

12/1/2023

Sticky Header Shadcn

Hey, i use tailwindcss and try to get the TableBody scrollable but somehow I only figured it out how to do it for the whole table... Any help would be appreciated! Thank you very much!

unwilling-turquoise

11/30/2023

filter function type

In the FilterFn documentation there is this writing: ```ts export type FilterFn<TData extends AnyData> = { ( row: Row<TData>,...

sunny-green

11/29/2023

Need help with sorting custom cell

I posted on this discussion thread: https://github.com/TanStack/table/discussions/3012 But it's never been adressed so I have low hopes of it being answered there in github now. I have a table with custom cells that render into links to other pages, when I try to run sorting it doesn't work, and the sorting function never seems to actually be called. I am completely lost as to how to debug and fix this....

national-gold

11/27/2023

Use translations in table cells

Hello, I have the following problem: I use several languages in my app. How can I transfer translations to table cells? The corresponding translation file is loaded in the page component and transferred to components accordingly. However, the translations are not part of the data structure for the table. How can I read the dict property within a cell? ...

curious-teal

11/24/2023

v8 React Table Filters as URL Query Parameters

Hi - I'm looking for some guidance on the best way to get table filters into the URL as query parameters. What I'd like is for the user to either be able to interact with the table to update filters/sorts and then have the URL query parameters updated and vice versa. I'd also like to be able to support having multiple tables on the same page. ...

exotic-emerald

11/23/2023

Get sort state from columnDef?

Hey im trying to style the header of a column depending on whether its id matches any in the sort state array. I see theres:

column.getIsSorted()

column.getIsSorted()

which returns the direction of the columns sort, but I cant figure out how to get the full table's sort state. Any ideas? Thank you! ...

equal-aqua

11/23/2023

Attempting to make a file-explorer like sorting table, issues keeping folders on top

```tsx sortingFn: (rowA: Row<File>, rowB: Row<File>, columnId: string) => { const typeA = rowA.getValue("type"); const typeB = rowB.getValue("type"); const nameA = rowA.getValue("name");...

conscious-sapphire

11/21/2023

How to implement a useMutation call from table row onClick action?

Hello guys! I have implemented a datatable using the shadcn/ui datatable component. I'm struggling to figure out how to implement the row deletion action. I need the onClick to trigger a useMutation hook, but I can't figure out how to structure the code, specially where to place my hook call in the table code structure....

other-emerald

11/20/2023

How to memoize flexRender?

I want to prevent cells from rerendering when cell props does not change. I think problem is in flexRender function, but can not find way to memoize it. I added memo to custom cell input, useMemo to columns....

old-apricot

11/18/2023

multiple values in same cell

Hi. I just started using tan stack table. I have something setup. It's displaying data from my database in a table. This part of the table lists 8 fetched items from the database. Rather than each item being in its own cell I'd ike for all eight items to be in the same cell...... Is that possible? ```js { header: 'Ingredients',...

foreign-sapphire

11/15/2023

Multiple Accessor Keys

I am trying to combine the results of accessor keys. But I would like to do this in a single column without having to create an additional column that I don't need. For instance, I have column 1 and column 2. If I keep column 2 I can 'access' the value through the row.getValue function and referencing column 2's accessor key. However, if I remove column 2 and it's accessor key I can no longer reference that value. How might I reference the additional value without the additional column?...

other-emerald

11/15/2023

Single column multi filter

Does anyone have any example of a multi filter on a single column?

stormy-gold

11/15/2023

Recommended approach when data is undefined?

Hey! I'm using TanStack Query (tRPC) to fetch the data my Table should display. That means that it could be undefined. What's the recommended pattern here? Passing an empty array or allowing undefined in the types? Something else?

sensitive-blue

11/15/2023

add filter outside the table

How to add filter outside the component table component in version 8 ?

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