Selected rows always resetting when click on toggle sidebar

Question

Please find the code link https://codesandbox.io/s/funny-phoebe-ux3e5?file=/src/nestead-table/index.js

select any records from the table and then click on the Toggle side bar the selected checkbox is getting reset always.

Please help Thanks in Advance!

It's way too much code to expect someone doing debugging. Try to isolate the problematic code and ask your question. A hint: are you using state to manage the boxes that are ticked? — Ivo, Feb 05 '22 at 05:35
As above, please reduce this to a more manageable minimum viable example. That aside, have you looked into [autoResetSelectedRows](https://react-table.tanstack.com/docs/api/useRowSelect#table-options)? — toki, Feb 07 '22 at 04:05

score 1 · Answer 1 · answered Jul 13 '22 at 07:17

Add autoResetSelectedRows: false, autoResetSelectedCell: false, and autoResetSelectedColumn: false. That will fix the problem you have.

function Table({ columns: userColumns, data }) {
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
  page, // Instead of using 'rows', we'll use page,
  // which has only the rows for the active page

  // The rest of these things are super handy, too ;)
  canPreviousPage,
  canNextPage,
  pageOptions,
  pageCount,
  gotoPage,
  nextPage,
  previousPage,
  setPageSize,
  selectedFlatRows,
  state: { pageIndex, pageSize }
} = useTable(
  {
    columns: userColumns,
    data,
    initialState: { hiddenColumns: excludeColoumns, pageIndex: 0 }
    // Here you can add
    autoResetSelectedRows: false,
    autoResetSelectedCell: false,
    autoResetSelectedColumn: false,
  },
  useSortBy,
  usePagination,
  useRowSelect,

Selected rows always resetting when click on toggle sidebar

1 Answers1