sadmann7/shadcn-table

Selection persists when pagination and/or filters change

AndKenneth opened this issue · 5 comments

If I select the first item in the list, when I move to the next page the first item is still selected. I've fixed this in useDataTable in our project by simply adding this

image

Not sure if this is a good approach (notably if I increase the per-page this won't persist already selected items), and I've notice it still happens when I select filters.

see where the pagination change code and add this:
table.toggleAllRowsSelected(false);

I'm having the same issue and I'm not being able to fix it.

By default, tanstack table uses row index to keep track of selected rows. You can change that behavior using getRowId callback.

Inside useDataTable hook:

const table = useReactTable({
  //...
  getRowId: row => row.id //<replace 'id' with any field you want to use, make sure it is unique.
})

If you do it properly, it should start using the unique IDs for each row instead of index, which would solve your issue.

PS: you may want to pass that field as a prop to the hook to make it reusable for different fields.

thanks @denizalpaslan.

didn't know about that.

will make a quick pr for it.

fixed now