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

conventional-tan

12/23/2022

Why does table reference not change, when data passed to useReactTable changes?

``` const table = useReactTable({ data, columns }); return ( <TableBody table={table} />; //<-- this is React component wrapped in memo() );...

fair-rose

12/21/2022

Urgent Need help with production build

Hello, everyone! I have a nx monorepo with next.js app and some react libs. I am using react-table v8 in my app. it's working fine in development but in production it is giving this error. I am sure it's due to react-table. Can anyone please help with this. next.js version 13.0.0 @tanstack/react-table version 8.7.4...

conscious-sapphire

12/21/2022

column size auto

how to set column to get all available space?

optimistic-gold

12/21/2022

Is it possible to create Columns without Data?

I want to use empty columns where I can put actions relating to the row like "VIEW" and "DELETE". I also want to ensure the useReactTable() model captures these empty columns because I want to be able to change the visibility of these columns programmatically using state and onColumnVisibilityChange

helpful-purple

12/20/2022

vue-table how to add sub components

I'm using vue-table and I'm struggling to see how I can pass custom components into the table cells like they do here in this react example https://tanstack.com/table/v8/docs/examples/react/sub-components I basically want to have an action button in one of the cells. How do I manage that with vue3?...

rival-black

12/20/2022

is the use of columnHelper mandatory?

I am thinking of migrating my project from using v7 to v8, and saw that in the column defs section in the docs you mentioned the use of a columnHelper instance to create the different types of columns, but you didn't use it in the react examples. so my question is - if I migrate to v8, will my existing tables work or will I have to rewrite all of them?...

probable-pink

12/19/2022

Table keeps re-rendering... (getRowModel)

Guys, i am so desperate right now i need your help. I have a react table that just keeps re-rendering forever and I can't find the reason. The only thing i suspect is that table.getRowModel() causes the re-render because if i comment out the entire <tbody> element, the re-rendering stops. ...

flat-fuchsia

12/19/2022

Find out if column is accessor or display?

Hello is there any way to find out if some column is accessor or display in column definition?

conscious-sapphire

12/18/2022

Client-side exception on NextJS deployment

I have a Tanstack table that works perfectly in dev, but fails in prod. I get this error: ``` framework-3b5a00d5d7e8d93b.js:9 TypeError: Cannot read properties of undefined (reading 'filter') at 338-40b21a5eb2cada72.js:42:10338 at Object.getVisibleLeafColumns (338-40b21a5eb2cada72.js:39:249)...

exotic-emerald

12/15/2022

onChange of value in dropdown in cell, rerenders the complete table.

What I am doing 1. Loading dropdown in cell 2.onChange of value in dropdown I am setting one state in zustand store ```js // all columns ...

flat-fuchsia

12/15/2022

Pass a readonly array as data

I want to pass a readonly array to the data of react-table, but it will not take it without ts-ignore. The array comes from a react-query useQuery hook, so it makes sense to me that it should be readonly....

national-gold

12/14/2022

aggregationFn

Hi someone can help me to create a custom aggregate function in react table.

correct-apricot

12/14/2022

Accessing data in nested objects

Hi, I have a data array with an object instead of primitive. How can I access this data to display in the table? v8 react-table ```js const data = [ colName1: {value: 'foo'}, colName2: {value: 'bar'}...

adverse-sapphire

12/14/2022

How to properly separate table files?

When you separate files naively, every table update causes any other component inside it to rerender. https://codesandbox.io/s/tanstack-table-file-separation-resize-mtm19c Here is an example where I've separated the header and rows to another component. I've tried some ways to memoize it but I could not get it to work properly, it would either stop the width updates or still continue to rerender. Is there a good example on how to properly pass those big objects as props, such as headerGroup or row?...

flat-fuchsia

12/14/2022

Am I using columnHelper correctly?

When I try to use columnHelper, I am getting a typescript error Expected 2 arguments, but got 1. That said, the code compiles and the page loads.

like-gold

12/13/2022

Reset expanded rows on data changed

I'm trying to enable resetting expanded rows when data provided to table options has changed. I have manual pagination, and just update the data prop with items from current page. I tried setting autoResetExpanded to true which is actually it's default value, but it didn't work....

flat-fuchsia

12/12/2022

Force reorder of a column to it's current or default order

column.toggleSort allows you to specify desc: boolean, to set the direction to ascending or descending. Is there any way to trigger a re-order to default order for the column? Removing the sort state won't work in my case as the column is really sorted manually based on the values of a sibling column. As far as the library is concerned, it's not even sorted to begin with (it's the sibling column which is sorted).

absent-sapphire

12/12/2022

esbuild support?

I am using Creat React App with Craco and CracoEsbuildPlugin for my app, after install React Table the app couldn't build because current loader couldn't handle the file.

flat-fuchsia

12/12/2022

Server side pagination and sorting

Does anybody have an example of the react table with typescript which works with server side pagination, sorting and filtering? also i would like to know how to implement row selection with that server side pagination? do i need a state with selected row or checking the checkboxes per page can handle a react-table? thank you for all the answers 🙂...

continuing-cyan

12/9/2022

Async table row

Hi guys. basically what I want to achieve here is: I want to fetch each row on parallel async. I couldn't find way to add/trigger fetch on each row....

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