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

genetic-orange

5/22/2023

Implement @tanstack/virtual-core into @tanstack/table-core

Hi, is there anyone here using @tanstack/table-core along with an implementation of @tanstack/virtual-core to virtualize the table rows?

adverse-sapphire

5/22/2023

Passing props to table cell

Hey guys just started using react-table can anyone help me with how to pass the props to the table cell?

provincial-silver

5/19/2023

Expandable children row

My goal is to show a non-expandable row for the root item, while allowing expandability for its child items to display pertinent details. From what I understand, the TanStack/Table example suggests that using getIsExpanded() applies to all columns, including Name, with no option to exclude specific columns. ```tsx...

equal-aqua

5/18/2023

Pagination with useInfiniteQuery (offset & limit)

Hello, i use React Query since a moment for my project and i like it ! Today i want to use a pagination. The goal is to show my data 3 per 3, here my code. My data are showed but the previous has always refetch... I don't really undestand how to use this function in my case an in general. I someone can give my some tips. Thanks a lot !...

code.txt

foreign-sapphire

5/16/2023

table get refreshed even when the underling data are unchanged (based on react query).

I am using react query to fetch the data every second, but usually the data are static, but even the data are not changed, the react table got refreshed every 1 second. Shouldn't we expect it to fresh only when data are change? the code snippet is as below ``` const { isLoading, isFetching,...

exotic-emerald

5/15/2023

Exporting data as a CSV

I am new to using Tanstack Table. I am greatly enjoying it though. One thing I am trying to figure out how to get working is Exporting data as a CSV. I have not found many examples online. Anyone have any insight they can provide?

continuing-cyan

5/15/2023

How to set default column size to "fit-content"?

Looking at the APIs/types I haven't seen anything that would allow me to do this, is it possible?

reduced-jade

5/15/2023

How to handle the row deselection on onRowSelectionChange (using zustand)?

Hi, all the example in the docs use React state and just directly pass the setState to onRowSelectionChange I'm using zustand to manage state and this is what I came up with ```js selectedLinks: {...

eastern-cyan

5/10/2023

Example expandable rows and react dnd

I'm searching for an example that implements the expandable rows with react dnd. Currently expanding works, react dnd works but when I try to dnd expanded rows on virtualized tables, the expanded content stays open on the initial index row.

like-gold

5/5/2023

Combine columns into single column

Is it possible to achieve the following CSS layout using TanStack tables? In particular, I'm referring to the song artists being listed underneath the song title like in the included screenshot. In my data, the format is an object as follows: ```json...

conscious-sapphire

5/5/2023

Integrate Table state into Redux store

Hey everyone, you guys ok? I'm trying to integrate a table's state into a Redux Store, but for the life of me I couldn't find a way to correctly set the rowSelection state into the store because of what the parameter is for onRowSelectionChange - it is a function which, when resolved for a selected row, returns an object with the selected row index and a value of true ({ 0: true }), and when resolved for a deselected row just returns an empty object (with which I just can't find what was deselected). Is there a way to accomplish this?...

continuing-cyan

5/5/2023

Svelte ExpandTable examples

Hi all, is there an example implementing getExpandedRowModel in svelte? i'm trying to make a nested table but without success. I'm a newbie to svelte and not a master in frontend in general...

stormy-gold

5/4/2023

introspect cell HTML from table cell.render()? (React)

is there an API to discover what HTML is wrapping the cell data that is passed in from the columns? e.g., i have a column that passes a custom button to wrap the cell data passed to it, can i see what that HTML is from the cell / row apis that the table generates?...

xenial-black

5/4/2023

Individual column slots?

Are there individual slots for columns in vue table? I don't see them mentioned in the documentation. Something like <template #column.foo="{ item }"> similar to how vuetify datatable works?

fair-rose

5/3/2023

Svelte/Table - preserve complex state on sorted, paginated, faceted Table

Hello, Using Sveltekit and Tanstack Table, I have a table that includes sorting, pagination, and faceting. It works well, but I need to be able to preserve the table state such that if the user links away to another page (to view details, for example) and then uses the back button to return, the table should be able to resume the same state as before, preserving current page, sorting, and faceting. It seems like there should be a way to do this by preserving the overall Table state in a Svelte store, but I’m not sure how to go about it....

eastern-cyan

5/3/2023

Svelte table flexRender gives type error

<svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />

<svelte:component this={flexRender(cell.column.columnDef.cell, cell.getContext())} />

this line causes typescript to give me this error ```...

robust-apricot

5/2/2023

Create “Or” logic for filters

Hi, I am trying to change the table’s getFilteredRowModel function to allow for rows to pass the filters if they pass any of multiple sets of filters rather than just a single filter set. The sets of these filters are gathered asynchronously, and so my custom getFilteredRowModel function is not able to access them. Is there a better way to create this “Or” logic than with a custom getFilteredRowModel function? Or if not how can I attach the state of the filters being gathered to the table, so that the table has the updated version when these are gathered? For example: Rather than the filters being only a single filter such as: ```[{...

ratty-blush

5/2/2023

initialState with columnFilters does not apply

I opened an issue on Github roughly a month ago but haven't heard from anyone as of yet. I've been using a workaround by setting the filters I want into a useState array but I am using more advanced cases now where that can't be done anymore without detrimental side effects . I really need initialState to just work. Can anyone assist?

modern-teal

4/28/2023

Working example or documentation on interfacing with server side expansion?

Hi, in the table docs on Expansion, there is an option to enableManualExpansion that it suggests using if you will be doing server side expansion of the data. I have this use case, but cannot find any examples of how you integrate the server side expanded data with Tanstack's client side APIs. For example, when I add my data that has been expanded server side, every row in my table's row model has depth: 0. How do I pass in the proper depths from my server side data, etc?

deep-jade

4/27/2023

How to know if the pagination is activated?

Hi everyone! I'm trying to show a Pagination component dynamically. If nextPage is undefined the idea is to not show the pagination buttons, by the other hand show it. I used to do this in react-table v7 using nextPage that comes undefined or the function....

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