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

wise-white

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!

correct-apricot

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?

sensitive-blue

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

extended-salmon

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

eager-peach

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

ratty-blush

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

equal-aqua

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

wise-white

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?

eastern-cyan

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

ratty-blush

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

fair-rose

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?

fair-rose

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.

firm-tan

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?

fair-rose

2/23/2023

Localization of table headers

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

like-gold

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

cloudy-cyan

2/21/2023

How can I access data without column?

I made simple example to help you understand my situation. There are 3 properties in data. ```ts {...

sensitive-blue

2/20/2023

Best Practices Tailwind CSS Mobile Responsive Tables

Hey everonye, I am trying to build a mobile responsive table and was wondering if there are any thoughts or best practices on how to build mobile friendly tables. I am having three ideas for now: 1) Tailwind media queries with hideen state. In the cell render function I will simply hide or display the cell rendering. E.g. since I am mapping I will hide all the columns, but the first one and push all values into a custom format that displays on mobile....

harsh-harlequin

2/20/2023

How to add initialFilters that will not persist during re-renders?

Hey, I added some filters by passing the option to useTable but I want to clean up those filters when a button is clicked. However, button click re-renders the table and initial filters come back again. How can I make sure that initialFilters applies only in the first render?

absent-sapphire

2/20/2023

How to keep specific rows at the bottom of the table, when sorting by column?

Hello. I couldn't find any information in the internet about creating custom sorting functions in react-table v7, so i will try to ask here. I have a lot of tables, and all of them are sortable by all columns. Almost all tables always have specific rows, that should be displayed at the bottom of the table, even when user decides to sort rows by sepcific column. How can i achieve this custom sorting? UseTable setup: `const table = useTable(...

typical-coral

2/18/2023

Reset Columns to default

I have a table which enables a user to manually select and deselect columns. I want a way to reset the columns to their default. Is there a way to do that? I found that hard and complex to do in pure logic....

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