Table refreshes when i check a checkbox

[jalokkr]

TanStack Table version

8.11.7

Framework/Library version

React 18.2.0

Describe the bug and the steps to reproduce it

So, I have a table component that renders columns and data, and additionally, I am using Chakra UI's Table, Th, Tr components to create a table component. Also, there is something extra: for each row and for each column's row, I am adding a checkbox component for one individual row and for global (all rows), respectively. Additionally, I am also using pagination and rendering 10 rows on one page. Now, the issue is, for example, when I am on the second or third page and I select one row by clicking the checkbox, then I am automatically redirected to the first page. The funny thing is, even the value of pagination doesn't change, but still, I am seeing the first 10 results again

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/sandbox/heuristic-gates-iq11vq?file=%2Fsrc%2Findex.js&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cluh7bdao00062v6s7hso322j%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cluh7bdan00022v6sam3l8a3f%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cluh7bdao00032v6s913dlg74%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cluh7bdao00052v6saajr53sz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cluh7bdan00022v6sam3l8a3f%2522%253A%257B%2522id%2522%253A%2522cluh7bdan00022v6sam3l8a3f%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522cluh7bdao00052v6saajr53sz%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cluh7bdao00042v6s4mng1g5n%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cluh7bdao00052v6saajr53sz%2522%252C%2522activeTabId%2522%253A%2522cluh7bdao00042v6s4mng1g5n%2522%257D%252C%2522cluh7bdao00032v6s913dlg74%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522cluh7bdao00032v6s913dlg74%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Screenshots or Videos (Optional)

This is not the exact code but I hope you will get the context

Do you intend to try to help solve this bug with your own PR?

None

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.

[Gellipapa]

@jalokkr Hi! You should use autoresetPageIndex logic and call when change checkbox.

function useSkipper() {
  const shouldSkipRef = useRef(true);
  const shouldSkip = shouldSkipRef.current;

  const skip = useCallback(() => {
    shouldSkipRef.current = false;
  }, []);

  React.useEffect(() => {
    shouldSkipRef.current = true;
  });

  return [shouldSkip, skip] as const;
}

  const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper();

  const table = useReactTable({
    data: tableData,
    columns,
    autoResetPageIndex
  });

  //Call where you change checkbox state
  skipAutoResetPageIndex();

Hope I could help.

[KevinVandy]

private sandox, so cannot help. But you most likely have a bug where you are re-creating the data or columns references on a re-render. Give you data a stable reference.