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

like-gold
like-gold5/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?
conscious-sapphire
conscious-sapphire5/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?
unwilling-turquoise
unwilling-turquoise5/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: {...
conscious-sapphire
conscious-sapphire5/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.
generous-apricot
generous-apricot5/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...
No description
jolly-crimson
jolly-crimson5/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?...
fascinating-indigo
fascinating-indigo5/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...
harsh-harlequin
harsh-harlequin5/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?...
helpful-purple
helpful-purple5/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?
fascinating-indigo
fascinating-indigo5/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....
reduced-jade
reduced-jade5/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 ```...
other-emerald
other-emerald5/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: ```[{...
extended-yellow
extended-yellow5/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?
rare-sapphire
rare-sapphire4/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?
optimistic-gold
optimistic-gold4/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....
No description
metropolitan-bronze
metropolitan-bronze4/27/2023

How to enable multisorting for server side filtering?

Hey, I use react-table v8 and sort my data at server side. It works great for one column, but my server can sort by multiple columns. What's the best way to achieve the multiSort-ft with manualSorting: true ```react const table = useReactTable({...
ratty-blush
ratty-blush4/26/2023

Using Table in React Native

Hi! We are using a special framework called Solito (https://solito.dev/) that allows us to use React Native-like components to build the UI for our mobile app (iOS, Android) and web app (Next.js). Can we use the React Table implementation, or do you recommend using the Vanilla TS/JS version?
ambitious-aqua
ambitious-aqua4/26/2023

Any way to have default sorting order for specific columns

Is there way to have default sorting order in react table v8. by default its should be sorted in desc order
broad-brown
broad-brown4/25/2023

Symbols for boolean values

hello, i've got a column that is configured like this: ```ts { accessorFn: row => Boolean(row.ethernet),...
optimistic-gold
optimistic-gold4/24/2023

full width option?

hi m using react table for resizing on columns but its not taking full width byDefault ? how to fix this
No description