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

correct-apricot

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

foreign-sapphire

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!

relaxed-coral

11/30/2023

filter function type

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

plain-purple

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

flat-fuchsia

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

stormy-gold

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

genetic-orange

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");...

dependent-tan

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

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

national-gold

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

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

foreign-sapphire

11/15/2023

Single column multi filter

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

rising-crimson

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?

rare-sapphire

11/15/2023

add filter outside the table

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

conscious-sapphire

11/15/2023

How to create custom persister using realm ?

I'm replacing the redux/redux-offline/redux-persist with react-query in my react native app to manage serve side data. Since we are currently using Realm to offline first implementation, though we do have createAsyncStoragePersister but is it possible to create custom persister using realm ?

rare-sapphire

11/15/2023

row index

Hi every one. I want to add row index to table in columns array. How can i do that? { id: 'index', header: 'index',...

metropolitan-bronze

11/14/2023

How to pin column and scroll the rest of the table?

Hello people, Given a Tanstack table with several columns in a React application. As a user I'd like to see at all times the first column (e.g. ID) while I horizontally scroll the rest of the table (more columns than the screen can fit). In Tanstack table there's the concept of pinning here:...

sunny-green

11/14/2023

can I merge cells from the table body on V8?

I have 9 columns, but on a specific case, I need a row to be full width, aka, merge the 9 cells. I would normally do: <tr> <td colspan="9" /> <tr>...

constant-blue

11/13/2023

filterValue.toLowerCase() is not a function

Hi all, I'm using @shadcn/ui 's Table component, and I'm getting the error filterValue.toLowerCase() is not a function. I'm not entirely sure where the issue is coming from, as one filter works but this specific one doesn't. I'm filtering two different columns, brand and zone. Both are string values, but only brand works....

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