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

passive-yellow

3/21/2023

Can't expand multiple sub component with a query

Hello! 👋 I would like to expends multiple sub component at the same time, but I use a query inside the sub component so when I expend two at the same time I got "Rendered mor hooks than during the previous render." error. See the screenshot for : Sub component / Table body / Query I use ...

blank-aquamarine

3/20/2023

dynamic skeleton display on loading state

Hey guys, Does anyone have a workaround for a custom skeleton based on the content of the column? For example, I want to have an Avatar skeleton on the first column since it renders an Avatar component after a successful fetch and a single-line skeleton for the second column, etc. I have a very simple Skeleton component right now that renders the same skeleton for every column. Wondering if anyone has any ideas, please. I appreciate it. Thanks...

rare-sapphire

3/19/2023

columnHelper in Svelte?

Looking at all the examples for Svelte I can't find one where it uses ColumnHelper, which is something afaik is the recommended way of defining columns for one's table. The question I got then is how exactly would you use ColumnHelper?...

quickest-silver

3/19/2023

could you suggest me about how to custom classname (css global)

I'm using @tanstack/react-table v8 and I custom my table wrapped by react-table v8 and if i want to custom className , style props in td how to implement this ps. I have attached a picture of my source code....

harsh-harlequin

3/19/2023

How to implement export buttons

I'm using @tanstack/react-table v8 for my Table component and I'd like to add export buttons for pdf, XLSX, and CSV. Kindly provide code snippets or links to helpful resources. Thanks....

adverse-sapphire

3/19/2023

Server side filters circular issue

In React, I'd like to collect columnFilters into an object that I use to fetch data from the server. However, to do that, I need the table reference from useTable(). Now, in order to useTable(), I need to have data fetched (data: prop is required). But in order to have data fetched, I need columnFilters to make filters for server-side fetch. Is there a good pattern of doing this, or maybe am I missing some part of the API? I don't see server side filtering in docs examples either; seems like there is only client side examples....

flat-brown

3/16/2023

global filtering with svelte table

I need some help implementing global filtering and sorting using the svelte table adapter. There's no example for global filtering, and i'm trying to follow the sorting example but typescript isn't playing so well with it, now throwing alot of "any" around.

sensitive-blue

3/15/2023

Virtualized table column size changing on scroll

Hello! I am using the React Table v8 Virtualized Table example to set up a table in my app. I have set the size of each column to 250 (also minSize and maxSize to the same value). Despite this, the columns resize on scroll. This behavior is not present in the example - but I am struggling to see the discrepancy between my code and the example code. The table has a fixed width set by table.getTotalSize() (behavior is present with or without this). I have done some googling/ stackoverflowing and checked the GH issues but have not found an answer that is current/ sufficient. ...

quickest-silver

3/15/2023

how do i get the resolved data?

Is there a way to get the raw data that the table has resolved? I'm trying to get the data to be able to create an excel export

quickest-silver

3/15/2023

header style

what is the appropriate way to add a style/classname to a column header? Does that go in the column def somewhere or do i need to do that myself in the markup?

stormy-gold

3/15/2023

url to image?

How to best transform a URL from db to render an image? This it failing on my column definition. Do I need to add the transform differently? ```html...

adverse-sapphire

3/15/2023

Table State in URL

Anyone have a code sandbow for filter state im the URL? Im having a lot of trouble with this Basically i want my URL query to be the source of truth for my tables filter state...

like-gold

3/11/2023

How would I open modal on table row click the easy way?

When user clicks a row, modal should pop up with data passed to row.

unwilling-turquoise

3/10/2023

With react-hook-form?

Trying to build a table-form, and am wondering if anyone already did a good integration.

ratty-blush

3/10/2023

react-virtuoso + react-table (v7) - re-renders after initial mount

Hello everyone! Does someone have table-virtuoso + react-table (v7) setup without re-renders after initial mount? I googled vurtuoso instructions - they give example of NON-inline declaring mui-table components https://codesandbox.io/s/virtuoso-mui-expandrows-remounting-forked-89dzq?file=/App.js:3087-3096 and here is their INLINE example of react-table integration https://virtuoso.dev/react-table-integration/...

exotic-emerald

3/9/2023

Is there no 'maxWidth'/'minWidth' for columns in react-table@v8

Previously when building a react table with fixed-width + flex layout, we set proper min and max widths for each column, depending on the known requirements for each data type, which allowed us to have a flexy width that grows to fill the screen, while making sure that columns that have minimal max size don't hog the screen. Are there no similar controls for tables in react-table@v8?...

environmental-rose

3/7/2023

Are there any plans to write JS examples to match the TS examples?

I'm trying to understand the examples, but because we don't use TypeScript I'm getting really confused and the docs are not helping because it is all written in TypeScript. Any plans to write comparing versions in JS?...

judicial-coral

3/3/2023

Is it required to control state to use features?

I'm playing around with react-table 8, specifically sorting, and it seems like it's a strict requirement that I need to control the sorting state in order for things to work properly. It's not clear to me in the documentation that this is necessary. I originally assumed that if I didn't control the state, react-table would handle it's own internal state correctly and the "useReactTable" hook would trigger a re-render. But my testing is leading me to believe that if I want sorting, I must control the "sorting" state. Is this true or am I doing something wrong? If so, I'd be curious to know if this extends to all features, i.e. in order to use a feature (ex. column visibility) then I must start controlling that particular state....

rival-black

3/3/2023

Global Checkbox Select After Filter

Is there anything I need to do in order to make a checkbox in the header row work properly after filtering a table? I have a custom select component that filters the table base on unique values in a specified column. After filtering, the checkbox seems to be behaving as if the other rows still exist. I'd like for the table's state to update so that the only rows in the state are the ones shown after filtering.

exotic-emerald

3/2/2023

Nested headers

Pretty much summed here https://github.com/TanStack/table/discussions/2070, is there a way to do this no? Seems like 3 years have passed, perhaps something has changed?

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