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

deep-jade

8/7/2023

Show spinner while filtering data [v8]

Hi, is it possible to show a spinner while the table is filtering (or sorting) a large dataset? It takes to filter the data about 1-1.5s, and I would like to show some kind of indicator to the user.

helpful-purple

8/5/2023

Double 'id' key identifier

I need to have to columns that use 'id' but keep these seperated. It obviously creates error, so my question is how to manage it without modifying data to be like ```js { id1: ...,...

extended-salmon

8/5/2023

How to hide rows in table & reset button to display hidden rows in version 8?

In my columns, I have a checkbox that if you click on it, it will hide. Outside of the table there is a button that show the hidden rows that if I click on it, shows the hidden rows in gray.

rival-black

8/4/2023

When I scroll inside a table, every scroll 'tick' re-renders the entire component

I'm trying to virtualize a table with lots of columns that come from the backend, the number might change with time but I can assume it's always gonna be something like 20. When I put a console.log inside my component that uses code from the 'virtualized table with infinite scroll' example, I see that for every scroll tick my component gets re-rendered, and even when the component gets first rendered it re-renders at least three times, my table is inside an expandable drawer, and when I try to expand/collapse it, I get something like 50 additional re-renders. What am I doing wrong? This is the code I have for the columns, I'm using ListingItemHelper which has the different component options for a cell based on the type of column....

fair-rose

8/4/2023

Custom width on cells

Hi everyone! Is there a way to set a custom width on my cells? I'd like to avoid wrapping this cell...

compatible-crimson

8/4/2023

How to control a checkbox inside a nested table created with a subcomponent in React-table v8

When a checkbox is checked in a child subTable, I want those values to be applied in the parent row column. But I can't think of a way to do it. I need help... I used expending and sub component together in React-table v8 to create the code below. The problem is that when I check the checkbox in the corresponding parent row column, the table inside the sub component also displays the...

sensitive-blue

8/4/2023

How to create a 'grouping column' in V8?

In the screenshot, I implemented it using table v7 with a super hacky custom hook. We're trying to migrate our codebase to v8 now but I'm not sure how to go about it. I'm thinking to implement a manual groupedRowModel that filters how I want it to. But I'm not too sure how to merge the grouping columns as per my screenshot...

correct-apricot

8/3/2023

Incorrect getCanGlobalFilter() state

I just wanted to throw this out here, but I'm not willing to create a reproducible sandbox. When using manual pagination, column.getCanGlobalFilter() returns false whenever the column of the current page has no values for that column. Due the following: https://github.com/TanStack/table/blob/ac48ff768a44d0c379b5f36d98e5f90e8018e1b7/packages/table-core/src/features/Filters.ts#L190 which is called from: https://github.com/TanStack/table/blob/ac48ff768a44d0c379b5f36d98e5f90e8018e1b7/packages/table-core/src/features/Filters.ts#L251 ...

automatic-azure

8/2/2023

Sticky columns with resize mode

Hi, How to make sticky columns with resize column mode?)

exotic-emerald

8/2/2023

Filter array of objects :sweat_smile:

Hi guys i am really stuck whit this I am rendering an object in one of my cells. This object is used to render the UI for the agents, which would be a circle with an initial inside or an image if available. The problem arises when I try to filter each agent individually....

quickest-silver

8/2/2023

Is there a way to implement sorting like how it's done in Spotify?

For those who don't know, if you click on your "Liked Songs" list on Spotify, and then toggle through the "Title" header, it will sort the table ascending/descending, and then will switch the sorter to "Artist". Spotify groups the title and artist in what appears to be the same column. Screenshots included to illustrate what I mean....

wise-white

8/1/2023

is there way to sort the table by the same as grouping order ?

i found this but it didn't have answer: https://github.com/TanStack/table/discussions/2428 i just want to sort the table by the grouping order...

equal-jade

7/31/2023

Row Selections

hi, How can I exclude disabled checkbox when selecting all rows...

correct-apricot

7/30/2023

ColumnFilterState more specific types

``` const [columnFiltersState, setColumnFiltersState] = useState<ColumnFiltersState>([]); const [columnSearchState, setColumnSearchState] = useState<ColumnFiltersState>([]); ... ......

vicious-gold

7/27/2023

FilterFns declaration for one table forces its usage in other tables

Hello guys, I used example from the github for custom filter functions. However, declaring custom filter functions in FilterFns interface makes filterFns required in other tables, so I need to pass it to tables, where don't need filters at all. Or do the casting like that:

filterFns: '' as unknown as Record<keyof FilterFns, FilterFn<any>>

filterFns: '' as unknown as Record<keyof FilterFns, FilterFn<any>>

Is there another way to deal with it?...

crude-lavender

7/27/2023

Passing columns as props to a React component

What is the correct type for columns definitions when passing them as props? I am using ColumnDef<unknown>[] but I cannot pass column definitions I have defined in other component. ```tsx export type PlainTableProps = { columns: ColumnDef<unknown>[]; // <<<<<<<<<<<<<< I want to pass columns as props...

ambitious-aqua

7/27/2023

Using tRPC inferred types with Tanstack Table?

Hey all!!! I am currently trying to use tRPC to grab a sample of data from my backend to use in tanstack table I had a previous verison of this working where I used an explicitly types API route, however I want to be able to infer the type of the route and use it as the type for the column defs...

harsh-harlequin

7/26/2023

svelte 4 support when?

Just asking when can be the table be updated to be compatible with svelte 4?

protestant-coral

7/26/2023

Example Table in Vue with Filtering?

Hello! I'm trying to make a table with filtering in Vue and am running into issues. An example project would be great to look at! The following is my ColumnFiltering.vue file ```v...

foreign-sapphire

7/26/2023

Failing to make Tanstack Table Columns Resizable

Hi, I am using Tanstack Table v8 + ShadCN UI to create a data table. I am trying to make columns resizable but failing to achieve that. I am new to tanstack table, so any pointers on what I am missing will really be appreciated. I have tried to follow the sample code for column resizing but it does not work as expected. My Code is in the "data-table" branch of this repo: https://github.com/tanushm31/test-ui-nextjs/tree/data-table P.S. Not posting any code snippets following the community guidelines. But let me know if I need to add some screenshots....

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