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

rare-sapphire

3/20/2024

Disable Active Sort

I allow users to edit the cells of the table but I don't want sorting to happen automatically once an edit is made. I want to disable the active sorting that occurs once a user changes a field in a column

vicious-gold

3/20/2024

api to select a row by id in a table

I have been scanning the API documentation and could not find a simple function like selectRowById Is there a simple way of doing that or I should filter the row from getCoreRowModel?...

xenial-black

3/20/2024

App getting unresponsive when uplifting the useReactTable hook use

Context My application/ page is laid out like this ```js function ComponentA {...

afraid-scarlet

3/19/2024

React-Table V7.8 How to access other columns data

Hello, I am using react-table v7.8, I believe now it is TanStack. My question is I have several columns that depend on another column's value. Such as a progress bar depending on ETA and stage columns. How do I access the value of other columns? I tried looking online and as far as I can see I only see you being able to have one accessor...

absent-sapphire

3/19/2024

Is it possible to async fetch subrows?

For a project with a lot of layering it would be nice if I can fetch the subrows asynchronously. Would this be possible? I can't find an example for it. I was thinking about using either a custom component for the subrows that does its own data fetching or manipulating a cache for the entire table. Does anyone have experience with this? @Tanner Linsley maybe:)?...

wee-brown

3/19/2024

manualSorting not picking up on my data sort order change

I have a table that is using grouping and when the grouping changes the data is sorted again and given to the table. I have manualSorting: true defined as well as the state: { sorting } and the onSortingChange: setSorting as per documentation (https://tanstack.com/table/v8/docs/guide/sorting#manual-server-side-sorting). However, on the initial load of the table, the groups and data are sorted as expected; once I change the group by value, I get a completely random sorting of groups and rows in my table. The data is sorted on the select callback of a react-query useQuery and I confirmed that the data given to the table actually is correctly sorted. Any suggestions what the culprit may be?...

continuing-cyan

3/18/2024

How to track the deselect state

On the documentation when we read we see that the deselection state is stored as false when we deselect a selected row: For reference check image from the documentation . The problem now is in code, there is no false value stored or returned from the state, i can see only the selected rows as ```js...

graceful-blue

3/16/2024

TypeError: Cannot read properties of undefined (reading 'length') at accessRows

I'm sure that I'm passing table data that is not empty but I still get this error. Does anyone encounter this problem? I'm using Remix.btw const categories = [...

wise-white

3/16/2024

Row Index 0 can't be selected

Does anyone encounter this problem? If so, can you tell me what did you do to resolve this bug

genetic-orange

3/15/2024

Table freezes with observable from MobX

I've got a project with mobx-state-tree (https://mobx-state-tree.js.org/intro/welcome) and Tanstack Table. The following components freezes completely when I have the page including it open and I create a new item. observer() is from mobx-react-lite. I believe the problem is some infinite loop due to not memoizing the data, but all my attempts have not helped. Any ideas?

foreign-sapphire

3/15/2024

Access edited data from another cell

Hey. I'm trying to follow the guide for creating a editable table and it works but I'm struggling to get it to work in my use case. I'm trying to add an edit button at the end of the row, when it's clicked it turns into a save button and the only field, let's say name, turns into a input. I enter a new value and click the save button and I want to access the updated value in the cell with the Save button to execute a mutation. I triend with row.original but that's no good. Has anyone encountered that?...

inland-turquoise

3/15/2024

Is it possible to set an indeterminate selection with the toggleSelectedHandler?

I have a case where I'd like the user to be able to explicitly set some rows to be accepted, some to be rejected, and some to be "do nothing and leave until later." What I have been unable to figure out is if I can easily set an indeterminate state based off of a user click to toggle the state. The examples I've found set indeterminate states based on whether or not all rows are selected, but what I want is the toggleSelectedHandler to toggle through accept (checked), reject (unchecked), or do...

equal-aqua

3/14/2024

Can I hide Pagination Row when using ReactTable?

I am going to be showing a fixed number of rows and do not require pagination. Can I hide the pagination row at the bottom that (for instance) shows: Showing 2 of 2 results?

continuing-cyan

3/13/2024

Table with virtualised rows and full width

I am looking to create a table that has virtual rows and go full width at the same time. The idea here is that in order to do this it seems you need to leave the table as row as possible, not force any other types of display on any of the core table components as well as not force the rows to be position absolute. Is there a way of creating the table with virtual rows and not have the positoned absolute?...

flat-fuchsia

3/12/2024

isAllRowsExpanded - how to make that work with managing expanded state?

My issue is i want grouping to auto expand. There is a clear flicker when i use this mechanic to do so: ``` useLayoutEffect(() => { if (grouping.length > 0) {...

wise-white

3/12/2024

updating cell after filterFn

Is there a way to edit the cell after the filter function runs? ```ts filterFn: (rows, id, filterValue) => { // position: [number, number] - coordinates of the filterValue found in the string...

broad-brown

3/11/2024

Add custom arrows for pagination betwen columns

Hello I included example image that I want to achieve. The dates from this image are dynamically generated. They are columns of my table. My question is, is it possible to add "prev" and "next" buttons for pagination between columns like on image and is it possbile? Thanks

eager-peach

3/11/2024

How column width calculated 'under the hood'

I'm interested ho column width is calculated under the hood. F.e. I have a table with a width 100% of its parent container. I have 2 columns in the table. When I inspect them I see that they have different values of width, but maybe If the content of any of the columns is not too wide, I expect to have 2 equal-width columns, but they are not. What is the logic of calculating the width of columns? Small reproducible example: ...

eager-peach

3/11/2024

Format of "id" key value in ColumnDef.

Hi. I faced an interesting thing when was implementing column resizing. I followed an example from docs. https://tanstack.com/table/v8/docs/framework/react/examples/column-resizing-performant I faced a problem with column "id"s. When I'm providing an "id" value with spaces - my table is not working as expected (I know where my logic breaks). f.e { id: 'id with spaces' };...

quickest-silver

3/11/2024

Ghost / Unselectable Rows

Hi! I'm curious if it's possible to implement sub-total and total rows in the Tanstack Table. I couldn't find any examples, and I'm unsure of the terminology for this feature. Do you have any examples you could share? Or maybe links / blogs that is somewhere related to this that I can read? Thanks a lot!...

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