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

harsh-harlequin

7/14/2024

getPageCount doesn't return the correct number on the initial load when using manual pagination

Hi, I have a Vue DataTable component that I want to be configured to fit both server & client cases using manual pagination. Everything is good; however, there is an issue with the initial load when the data is empty at first, and the table renders 0 pages. However, when data is fetched, the data is updated, but the total page is not updated. I am using a trick with isMounted ref like this to prevent rendering the table before data is fetched from the server....

stormy-gold

7/14/2024

Svelte Table data not reactive

Hi, i want to make sure if data on @tanstack/svelte-table is reactive or not. Because when I try the columns not update when @tanstack/svelte-query has been response with new data. I using writable like basic example. And now i just update the data with $. Just tell me if I must include link to Svelte REPL

equal-aqua

7/13/2024

How to use grouping manually in material react table

I have a ReactJS project in which I'm creating a table using Material React Table library and there I want to manually handle the grouping thing. How can I do it?

absent-sapphire

7/12/2024

navigate to x clicked anywhere in row and navigate to y clicked on button in the row

I have a problem in tanstack table navigate to page x clicked anywhere in row and navigate to page y clicked on button in the row but it is navigating to both pages when clicked on the collect fee button

other-emerald

7/12/2024

Seeing header but not rows

The code below gives me a table with a header row, but no rows below it with data. I've confirmed that the data variable is populated correctly. Can somebody tell me what I'm missing please? ```type Subject = { _id: String subject: String...

stormy-gold

7/12/2024

Table customization

Hi guys, I have a question about Tanstack React Table. I need to change the way the date appears in the cell. For example, I want to change the Date 2021-02-10T17:12:09.987826 to Feb 20, 2021, 05:12:09 PM. How can I do this? Without using any other 3rd party libraries....

conscious-sapphire

7/11/2024

I'm using a custom table feature to add an attribute to a cell, but the row doesn't reflect changes

As stated, I'm using a custom table feature to add the "pendingValue" attribute to cells. When I update the pendingValue and I look at the cell object, the pendingValue is what I set it to, as expected. But if I do cell.getRow().getAllCells(), the same cell doesn't have my updated pendingValue - it has the default value (blank). Why is it that the cell itself is updating the custom attribute, yet the row and table doesn't see that change?

fair-rose

7/11/2024

handling nested values

I have an array of objects, they have nested objects insides them, how to handle displaying them in the table, knowing that they for example differ in the number of activeIngredients they have. ```typescript type DrugItem = { id: string...

genetic-orange

7/10/2024

Getting rendered value of cell

I need to get an array of all rendered values of a column in order to populate an autocomplete component. My problem is that the rendered values for the column in question are derived via a cell function, i.e. ```...

optimistic-gold

7/8/2024

Cannot drag column after apply column filter

Hi, the issue with not being able to drag after applying a filter in some cases might be related to how the drag-and-drop context or references are managed in relation to the filtered data (use dnd-kit lib to implementation drag feature).

rotten-yellow

7/6/2024

React table filtering and column date sorting

can someone help me with column sorting and month filtering in react/tanstack table

rare-sapphire

7/6/2024

how to use resize in Vue3

Hi all,I tried to use the resize method as described in the document, but it seems to have had no effect😭 . Please forgive my inexperience; I'm quite a novice. I would greatly appreciate any guidance from the experts. This is a reproduction of the issue in CodeSandbox, please help me out. https://codesandbox.io/p/devbox/resize-didnt-work-rnpmnz?file=%2Fsrc%2Fcomponents%2FTanstack.vue%3A26%2C45...

fascinating-indigo

7/6/2024

Single input field to filter multiple columns

Hi all, I have been trying to filter multiple columns from a single input field, but am unable to get it to work. Below is how my table is initialised. ``` const table = useReactTable({ data, columns,...

deep-jade

7/3/2024

how to set colspan from createColumnHelper.

Just started with tanstack table, so far I'm really liking it. But I want to set a colspan of 4 or 5 on the first column of my table. I'm not able to find out how to do this just yet, so wanted to ask. I've tried using "size" in the column, but it doesn't seem to affect colspan, and typescript complains if I try to pass in an arg of colspan ``` const columns = [ columnHelper.accessor('title', { id: 'title',...

extended-salmon

7/3/2024

Is it possible to filter numbers based on a partial match

Hi, I want to filter numbers based on a partial match using onColumnFiltersChange. For example, when the data's like {"name": Bob, "phone_number": 123456}, I wanna be able to display this data by filtering with 123 as a number type. Now I'm able to filter it by the exact same number like 123456 , but would it be possible?
I'm also struggling with filtering number type using onGlobalFilterChange. It seems like when I try to onGlobalFilterChange with the type of number, an error occurs in @duckdb/@tanstack/table-core/src/filterFns.ts like

TypeError: filterValue.toLowerCase is not a function

. ...

harsh-harlequin

6/30/2024

Updating table data

I am having a problem with updating data to table, it doesn't get reflected/rendered correctly. I am fetching data from my server, then I get data, I put it inside useReactTable hook - all good. Next thing I've done is creating a handleScroll function to run whenever I scroll the table, when i get to the bottom, I send request to my server, which brings me items of page number 2, which then I update state of data thus I am expecting useReactTable hook to run again and give me the old+new items, however this isn't happening. I can see in my own state that I do have the correct items and updated object but when i do: table.getRowModel().rows....

magic-amber

6/27/2024

How do I keep a group of rows permanently at the top?

Hey all, I'm making a table of transactions. Some transactions have the status "Pending" and I want to group all of those transactions at the front of the list. Ideally, all column sorts applied to the table would sort this pending group within itself and then all other transactions for the rest of the rows. Sorting doesn't seem like the right answer, because there are statuses before and after "Pending" in the alphabet. And filtering neither, because I want rows with all statuses to display, just the pending ones first....

conscious-sapphire

6/26/2024

Complex filters

Hi, I have a complex filter (consist of a string - search phrase and a boolean - toggle).
I would like all of the columns to be filtered by default filterFn (I believe includesString) apart from one column that would be filtered by that toggle(it is not simple match of boolean values)....

correct-apricot

6/26/2024

What approach would you use in this case?

Hi! I am building a table for logistic transports in our app, and one of the requirements defined by the product manager is that the transports should be grouped in the table when they belong to the same group. How would you achieve this? Can I use the grouping API that the library offers, or is it more focused on grouping columns instead of rows?...

genetic-orange

6/25/2024

row selection checkboxes as the last column

I wanted to know whether it's possible to get the row selection checkboxes as the last row.

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