TanStack

T

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

wise-white
wise-white3/11/2024

Ghost / Unselectable Rows

Hi! I'm curious if it's possible to implement sub-total and total rows in the Tanstack Table. I couldn't find any examples, and I'm unsure of the terminology for this feature. Do you have any examples you could share? Or maybe links / blogs that is somewhere related to this that I can read? Thanks a lot!...
No description
robust-apricot
robust-apricot3/11/2024

Column Resizer visibility

while i can customize resizer color width etc is there any option to control when to show resizer. By default when we hover on table header <th /> element the resizer is shown i want to show it only when the the cursor reaches the border how to achieve this.
dependent-tan
dependent-tan3/10/2024

custom sorting function type error

Trying to set a custom sorting function for a specific column is giving me a hugeee type error and its pretty unreadable is there some sort of typescript magic im supposed to use? i've made a custom filterFn in this same file and all was fine...
No description
genetic-orange
genetic-orange3/10/2024

GetValue type lost

Hi I'm trying to define columns using ColumnDef, but for some reason the type on "getValue" in cell is unknown. ```ts type Char = { id: number;...
No description
optimistic-gold
optimistic-gold3/8/2024

are there any examples with fully "controlled" grouping?

I've got a table that allows the pagination, filtering and page size completely controlled and I was just wondering if there's a way to do the same with grouping
cloudy-cyan
cloudy-cyan3/8/2024

How can I avoid the infinite render loop if I change a state?

Hi! I have a problem that I have a table and I have a custom state to collect the validated cells in a given row. My problem is that when I call state to set the cell data to be valid I get an infinite loop, because the whole table is rendered and so are the cells and so is the state running in the cell. Two values I can't check if they change because they will always be the current value because the whole table is rendered again....
extended-salmon
extended-salmon3/8/2024

Group/Section off data based on values not on the table

Hi! How would I go about doing this? In this example, I want the sender details and their message be shown in the table in a way that they're grouped by the month that the message was sent. The date is not seen on the table but is available when rendering the table. Thank you!...
No description
deep-jade
deep-jade3/6/2024

Tanstack V8 header text disappears on sort

Hi guys, I'm using tanstack V8 table and I'm facing an issue where the 6th column header disappears when I try to apply any sorting to it columnDef for 6th column. FYI all columns are the same structure as below { header: 'Status", accessorKey: 'job_status'...
sensitive-blue
sensitive-blue3/6/2024

Size property is not applied

I am making CoumnDef on the fly, but size property is not applied. I wonder why?
No description
national-gold
national-gold3/5/2024

Performant column resizing: why divs?

I have been implementing the "Column Resizing Performant" example and I got it working... but when it comes to making the table header sticky and having editable data (in the form of text fields and dropdowns) I am running into issues with the CSS. A few questions: - Are there any examples out there of making an editable and sticky header table using the performant div approach? - why does the example use divs instead of table elements?...
wee-brown
wee-brown3/5/2024

How to group rows together like this?

See image, the ability to group rows based on a certain category :) Thanks!
No description
frail-apricot
frail-apricot3/4/2024

Is it possible to filter selected columns?

I have a table where I want to use one input to filter multiple columns. I want to use a dropdown where I can select which columns should be used for filtering and which don't. Is that possible? If yes, how?
broad-brown
broad-brown3/4/2024

Table columns type definition

I have a simple table in my app. All it does is show file metadata. Beside the data is self I have few button actions. ```typescript...
No description
cloudy-cyan
cloudy-cyan3/3/2024

Expand row and subcomponent separately?

Has anyone done work on using expand row and expand sub components in the same table, using manualExpanding? I'm trying to set it up to differentiate between expanding a row to show more rows, and then expand a sub component using a different click handler. Right now toggleExpanded() expands both more rows and the subcomponent on a row together. Trying to keep it separated.
extended-salmon
extended-salmon3/3/2024

Group table items using ltree

Hello guys. Do you know the best way to group table items for data array of object using ltree parameter. Basically I have a data array of following object => export const data: Race[] = [ { id: "1", name: "New York Marathon", category: "runners",...
optimistic-gold
optimistic-gold3/2/2024

Faceted value filter

Hey, I am new to this library, and I am trying to make my faceted value filter and global search work. I have a database where the row is supposed to have a few tags attached to it. Now I want to have a dropdown multi-select filter, which will only list rows that have this tag. So my main question is, what value does the faceted value filter look for (and where), and where can I put this value in the columns array? The same thing applies to the global search (the global search kind of works, but again, it doesn't work for these tags that I have, so I am wondering where it looks for my values in order to filter that out) ...
No description
frail-apricot
frail-apricot3/1/2024

Scroll Table Body with sticky head

Is it possible to make a Table Body scrollable with a sticky Table Head at the top? I use shadcn ui as ui "Library" and want to creat a data table with it. The table holds e.g. 1000 items. I found a solution where I can make the whole table scrollable with a sticky table head but there are two problems I don't like. The scollbar is displayed on the full height, also over the table head. I want it only to reach over the table body height. Also the bottom border of the table head goes away on scro...
equal-aqua
equal-aqua3/1/2024

documentation about onPaginationChange with Vue

Is there someone using manualPagination in vue? How would you implement something like this? ```ts const { data } = useQuery({...
genetic-orange
genetic-orange3/1/2024

Expandable and editable table rowID is only for the last nested level

Hi. I'm trying to make table that is both expandable and editable. I managed to do both, but I noticed that the function in example of editable tables is getting rowID only from the last level of nesting. So in my picture if I edited "not-found" under "Index" then I would get row index of 1. My questions is can I get it return some array of indexes or something like that?...
No description
extended-salmon
extended-salmon2/29/2024

Form submissions shown in a Tanstack Table.

I have a basic form, which uses deno.kv as the database. I have created three strings, which works great and showcases the input values when the form is submitted, by using the props.item."name for the string", but having trouble showcasing the submissions in a Tanstack table. Have the table created with some random mockdata, but can´t find the right way to use the props.item or get the collection from the database into the tanstack table to showcase each of the 3 strings in a seperate column....
No description