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

initial-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?...

quickest-silver

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....

sunny-green

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.

rare-sapphire

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?

generous-apricot

3/1/2023

Keeping the URL in sync with the table state

I'm wondering if there is a preferred method to keep the URL updated with the table state. Ideally, I would like for a user to be able to bookmark or share a URL that will allow them to immediately render the table in a specific state. For example, have filters active, columns visible, sorting, etc. I am using Table v8 and Query v4. I am also using react-router but cannot figure out how to integrate the three libraries, in case react-router is the preferred solution. Thanks in advance....

foreign-sapphire

3/1/2023

ColumnDef Spread Operator

What is the purpose of the spread operator on lines just below the "<IndeterminateCheckbox" JSX declarations? I pulled some code from your Row Selection example, and I have never seen the spread operator used in props outside of ...delegated (new to React / Typescript). Thanks for the help!

conscious-sapphire

3/1/2023

setAllFilters in column

I want to use "setAllFilters" which comes from the table instance, in one of my defaultColumns Filter component. Is it possible to make it available there easily?

foreign-sapphire

3/1/2023

How to avoid Decimal type error

so my balance is return Decimal type I want to avoid this error (web is work fine even it's error red line in vscode)...

continuing-cyan

2/28/2023

Column based horizontal virtualisations

I am building a full scale, editable, sortable table using tanstack table. I have already added virtualisation to rows using the example provided at the website. However, I also want to implement horizontal virtualisation, and I am lost on ideas. The only thing that I could think of was virtualising th and elements but that would virtualise the headers and not the entire table. Any ideas on how this could be solved? Any working examples will be greatly appreciated. Thanks!...

constant-blue

2/28/2023

How to implement subHeaders of similar result

Hello! 👋 I'm trying to implement the following design attached in the image. As you can see, the gray row below the header is like a subheader (and the row below it is also static). ...

deep-jade

2/28/2023

Filtering Arrays

Hello, I have data that looks like the example below. Using Cell, I can return a map of the data to display each of the tag names separately but for I can't figure out how to filter against that information.
example column: { accessorFn: row => row.tag,...

stormy-gold

2/28/2023

Not getting values from my getValue() function.

I am calling my getValue() function but it is not returning me any values. `tsx // initializing column helper function with argument type similar to that of column object parameters data type value. const columnHelper = createColumnHelper<typeof columns>(); // getting the values of keys for displaying header fields...

genetic-orange

2/27/2023

Async accessorFn

I ran into a situation where I felt like I needed an async accessorFn. It seems like this isn't supported. Has anyone else run into this type of thing?

ratty-blush

2/26/2023

scroll reset

hey guys, when im changing the table data (not load more but fetching data by new parameters) after scrolling deep into the data - the scroller position is in the same place as i was, when i expect it to go to the first row. any thoughts how to solve this issue ? im working with virtual rows and infinite scrolling. thanks...

deep-jade

2/26/2023

table controlled / uncontrolled state the treatment of undefined

it seems that as soon as I pass an on change handler (I tested expanded and column sizing) the table assumes that this a controlled state the problem is, that the table recognizes undefined as a value. so it's much harder to create a wrapper to the table that can be also controlled or uncontrolled depending on the props. it seems that both an undefined state value and an undefined change handler are recognized as a value and change the behavior of the table....

national-gold

2/24/2023

Type of columns for reusable Table component

In v7, I have a reusable <Table /> component that my various tables across my app use. I'd like to continue that pattern in v8, but it seems that the columns prop cannot be typed correctly? There are a number of people looking for a solution in https://github.com/TanStack/table/issues/4382, is there any guidance to how to correctly type columns? Does it need to be a generic so that it can be inferred, or something?

metropolitan-bronze

2/24/2023

Web Socket data

Hi guys, I'm looking into using tanstack react-table to render arbitrary amounts of data from a WebSocket, is there any examples for converting live data into a schema readable by react tables column accessors? And Similarly are there any gotchas I should look out for, my plan is to feed the data from a zustand store. Much appreciated.

statutory-emerald

2/24/2023

can you pass react components for header / footer / cell in react table?

I tried adding a default to flex render if footer/header/cell was undefined, but I got a type error and when defining the column definitions they also resulted in a type error, however if I ignore TypeScript, everything seems to work as expected. Is this a bug or just behavior that is untested and not something that is supported by this library?

xenial-black

2/23/2023

Localization of table headers

Is there a recommended way of using localization such as i18n for table headers?

ambitious-aqua

2/22/2023

Get previous rows and parent row from cell rendering

Hello, I would like to know if it was possible to get the previous rows from the CellContext (which expose cell's row) and also get it's parent if it has one Thanks!...

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