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

rare-sapphire

8/14/2023

flexRender update component props

hello I have a question in svelte. I would like to update the props of different cell component based on some action. currently I use the following: ```svelte header: ()=>flexRender(Checkbox, { indeterminate, change: (e: boolean) => {...

rare-sapphire

8/13/2023

Initial sorting

Is it possible to initial sort by a column or more? In react-table v7 you did it like this ```tsx const sortees = () => [ {...

fascinating-indigo

8/11/2023

Working with data that updates A LOT

So I work for a stock trading platform and we're rebuilding our frontend from the ground up. I was looking at Tanstack Table for displaying our user's positions. This worked fine, but the issues started when I added a toggle to show/hide a subcomponent that shows the open orders for a certain position. Everything works fine, but since we're displaying stock tickers with very frequently changing data, the table is being re-rendered non-stop (multiple times a second), because the data is changing non-stop. Everything still looks fine, but the toggle for collapsing is now very unresponsive, because the table is constantly re-rendering. ...

correct-apricot

8/9/2023

React- Delete and pagination

I am having a delete button in each row and also i am using normal pagination, and it deletes that row, but when i delete that row on any other pages (except from pageIndex 0 say 1st page), i am set back to 1st page say i am on page 3 right now and i delete on row there i am sent back to page 1 , i fixed this issue by using- autoResetPageIndex:false in my table definition (see image), now say there is only 1 element on page 2 and when i delete it i am staying there with no elemets in that page , i want to be moved back to previous page , is there a way to do so Providing more pictures for better understanding of problem...

correct-apricot

8/8/2023

Solid: Efficiently rerendering when data is updated

I have a table that has cells that can either be editable or static, based on a toggle switch. Whenever the data is edited (which updates the underlying data backed by tanstack/query), "Cell" is logged by each cell in the entire table, and each TableCell & EditableCell in the table gets rerendered. Adding similar logs to the containing Row component does not have a similar repetition. However, when I replace flexRender with a Switch component, and manually switch between the different cell types, the issue doesn't occur. So I'm wondering whether I'm missing something with the flexRender utility, or whether it works correctly in the "solid" way, i.e not rerunning components. Edit: I've created a reproduction here: https://codesandbox.io/p/github/raymondboswel/solid-table-rendering-example...

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.

metropolitan-bronze

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

absent-sapphire

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.

unwilling-turquoise

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

rival-black

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

national-gold

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

extended-salmon

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

deep-jade

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

provincial-silver

8/2/2023

Sticky columns with resize mode

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

multiple-amethyst

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

flat-fuchsia

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

evident-indigo

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

passive-yellow

7/31/2023

Row Selections

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

deep-jade

7/30/2023

ColumnFilterState more specific types

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

metropolitan-bronze

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

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