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

stormy-gold

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

other-emerald

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

mere-teal

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

equal-jade

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?

fair-rose

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

foreign-sapphire

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

optimistic-gold

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?

stormy-gold

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

stormy-gold

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

mere-teal

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

robust-apricot

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

ratty-blush

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

ratty-blush

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' };...

flat-fuchsia

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

extended-salmon

3/11/2024

Column Resizer visibility

while i can customize resizer color width etc is there any option to control when to show resizer. By default when we hover on table header <th /> element the resizer is shown i want to show it only when the the cursor reaches the border how to achieve this.

like-gold

3/10/2024

custom sorting function type error

Trying to set a custom sorting function for a specific column is giving me a hugeee type error and its pretty unreadable is there some sort of typescript magic im supposed to use? i've made a custom filterFn in this same file and all was fine...

foreign-sapphire

3/10/2024

GetValue type lost

Hi I'm trying to define columns using ColumnDef, but for some reason the type on "getValue" in cell is unknown. ```ts type Char = { id: number;...

fascinating-indigo

3/8/2024

are there any examples with fully "controlled" grouping?

I've got a table that allows the pagination, filtering and page size completely controlled and I was just wondering if there's a way to do the same with grouping

ambitious-aqua

3/8/2024

How can I avoid the infinite render loop if I change a state?

Hi! I have a problem that I have a table and I have a custom state to collect the validated cells in a given row. My problem is that when I call state to set the cell data to be valid I get an infinite loop, because the whole table is rendered and so are the cells and so is the state running in the cell. Two values I can't check if they change because they will always be the current value because the whole table is rendered again....

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