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

implicit-lime

8/18/2023

Expanding Row to show non table data

Is it possible to have a row expand to show not the exact same table data, but to show arbitrary data in whatever form I'd like? So far, I've only be able to get rows to expand at all if I implement the "getSubRows" function on the table. This doesn't appear to allow me to have the data I need? Any feedback greatly appreciated. Many thanks....

rival-black

8/18/2023

What is the value added of set state functions

I don't really understand the value added of set state function. I was expecting that when I'm using setState, reset, setSorting or others the state inside the table is updated without the need to catch the update with onStateChange and call again createTable. Example with react: UseState for sorting....

deep-jade

8/18/2023

hello guys How to filter a column that was same value on search inserted tanstack table

searchInserted = "Active" result =
name status...

afraid-scarlet

8/17/2023

Multiple filters for a single column

Is it possible to do multiple filters for a single column? As in, text input and drop down select. Text input will do a 'includes' and drop down will do an 'equal' filter.

like-gold

8/17/2023

How to access table[firstColumn][currentRow] within ColumnDefinitions?

Consider the following code below for context. From the props provided to cell which of these should we use row.original, getValue or getAllCells to access the product located in the first column of each row, to retrieved it's ID? ```javascript const columnDefs = useMemo(() => { if (columnData) {...

desirable-aquamarine

8/16/2023

remove Column cell when cell is out of view

Is there a benefit to remove table cells when they are out of view? Thanks

sunny-green

8/16/2023

_i5 is not defined error

Hey I'm new here but have been using tanstack table for a while now and just recently have been running into an issue at work with it. I am using client side sort/search/pagination and tanstack version 8.7.2. Previously all our global searches were working properly but now for some reason we are running into an error only on deployed environments. When I run locally everything works as it should. The error makes no sense though it says reference error "_i5 is not defined at Object._getFilteredRo...

solid-orange

8/16/2023

How to make horizontal + vertical virtualization?

I need to make horizontal + vertical virtualization, because my table has many rows and columns + context menu which is showed on row click.

rival-black

8/15/2023

How to scroll tanstack table to certain column by default

I have a large table with ~15 columns, Is it possible to implement a scrollTo mechanism that will allow me to the y scroll the table to athe certain column on the initial mount? I've tried with useRef() attached to <Table> but this didn't work. I've also tried to see if it's possible by directly accessing table or its children with document.getElementsByTagName('table')[0].scrollTo(...) in the console. Unfortunately, it did not. Do you have any idea how it could be done? Thank you....

other-emerald

8/15/2023

How to disableSortRemove per column?

In our application there are 2 columns which are required to be sorted always. It would be nice if we can show that in the UI too. Is there a way to disableSortRemove per column, and not for the entire table?...

frail-apricot

8/15/2023

Undefined Value

I stored talent as ObjectId in MongoDB database. and I intend to convert it to name. but I get the value "undefined". is there anything to fix from the following code? cheers! ```js const columns = [ {...

robust-apricot

8/14/2023

Hello, using v8 how would you achieve a `onRowClick` behaviour?

Building a master/detail page whereas the master is build on react-table, I want to update the detail content each time the user click on a row. how will you achieve this?...

afraid-scarlet

8/14/2023

Does subRows have to be the same type as row?

I'm looking to add more context to a row by having it open sort of like in the image. However, as far as I can tell the lib seems to indicate that the type of subrow must be the same type as the row. Is there any way to make a "nested group"? Cheers...

harsh-harlequin

8/14/2023

[Newbie] Table Rows won't render, header does

Hey, I'm new to using React Table and need help figuring out what's wrong with my code. The TH rows render properly, yet the actual rows don't. Here I am trying to pass in dummyData to it to no avail 😦 ```typescript ......

vicious-gold

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) => {...

plain-purple

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 = () => [ {...

genetic-orange

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

foreign-sapphire

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

automatic-azure

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

conscious-sapphire

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.

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