incorrect Row ID in "Pagination Controlled" react example

[hichemfantar]

Describe the bug

The row ID and index are not changing when switching pages while using manual pagination with react query data. This bug means each row after the first page is receiving an incorrect key because <tr key={row.id}> This could be related to #4812 and #4771 This is the example from the docs and below is the modified version to highlight the incorrect row IDs in the console.

Your minimal, reproducible example

https://codesandbox.io/s/throbbing-wildflower-byp0ht?file=/src/main.tsx

Steps to reproduce

1. open console
2. switch between pages
3. notice the row IDs are not changing

Expected behavior

The row IDs should change when switching pages.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Linux
• Browser: Chrome
• Version: 113

react-table version

v8.9.1

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[hichemfantar]

I fixed this by using the getRowId function to provide a custom unique ID provided by the api response. I will incorporate this fix into the codesandbox provided in the docs if it's approved.

		getRowId: (row, relativeIndex, parent) => {
			// console.log(row);
			// In row object you have access to data.
			// You can choose parameter. In this example I used uniqueId
			return row.id;
			return parent ? [parent.id, row.id].join(".") : row.id;
		},

Edit: I just realized that this doesn't work if there is no unique field in the returned data. Should Tanstack table be able to handle creating unique IDs on its own when none are supplied (which is the current behavior with client side pagination) ? I'd appreciate some input on this.

[talatkuyuk]

Your getRowId function has two returns, could be mistake or mis-typing here? Second return is not reachable !

For the issue related with <tr key={row.id}>, I don't understand why do you need a unique id for all records for all pages even if the next pages are not visible in the DOM. The rows in the same page may need unique key but do not need for the records in the other pages. The key is mostly related with current render of the table component. I suppose, you don't need to produce unique ids. The row.id is sufficient.

[hichemfantar]

Are you sure this wouldn't cause any problems? I think the example should at least include a way to set a unique ID like I did to avoid potential problems.

[talatkuyuk]

I am almost sure, the row.id is sufficient for the key; it will not produce any problem.

[OleksandrHubarEK]

This creates problems if we use line selection. Because the row ID will be the same on all pages. How to deal with this?

UPD: here is the solution https://github.com/TanStack/table/issues/4555

[hichemfantar]

@OleksandrHubarEK check out my previous comment, it has the solution.

[hoangtrung99]

@hichemfantar I tried the above method, although the rowSelection state problem has been resolved, but when using table.getSelectedRowModel() it still gives wrong results. Have you encountered this situation?

[hichemfantar]

@hoangtrung99 It's been a while since I've visited this. Are you sure you're using the correct id? Otherwise it could be a new bug.