Custom single row selection

[szmarci]

I'm trying to implement a solution where row selection is not handled by the checkbox, but is triggered by a click anywhere in the row.
And also only one selection is possible at a time.

{rows.map(row => {
  prepareRow(row)
  return (
    <div {...row.getRowProps()} className="tr" onClick={() => {
      if (row.isSelected) {
        row.toggleRowSelected(false);
      } else {
        row.toggleRowSelected(true);
      }
     }}>
        {row.cells.map(cell => {
          return (
            <div {...cell.getCellProps(cellProps)} className="td">
              {cell.render('Cell')}
            </div>
          )
        })}
     </div>
   )
})}

I could toggle the current row's selection state, but I have no idea how to implement the single selection criteria?

update:
Seems like I'm misunderstanding something, toggleRowSelected does not trigger re-render.

[szmarci]

I think I'm finally getting it:

{rows.map(row => {
  prepareRow(row)
  return (
    <div {...row.getRowProps()} className="tr" onClick={() => {
      toggleAllRowsSelected(false)
      if (row.isSelected) {
        row.toggleRowSelected(false);
      } else {
        row.toggleRowSelected(true);
      }
     }}>
        {row.cells.map(cell => {
          return (
            <div {...cell.getCellProps(cellProps)} className="td">
              {cell.render('Cell')}
            </div>
          )
        })}
     </div>
   )
})}

toggleAllRowsSelected(false) comes from the useRowSelect hook, so calling it first clears any previous selection. Is this a valid solution or are there better ways of doing it?

[sinewave440hz]

I arrived at pretty much the same solution. While it works well, I'm getting a warning when I select the row. Did the same happen for you?

Cannot update a component (FetchData) while rendering a different component (Table)
...(my row selection code is in Table which is contained in FetchData...).

[sinewave440hz]

Nevermind, solved that by adding selectedFlatRows, selectionHandler, rowsWereSelected to the useEffect's dependency list. Happy to discuss further if you wish...

[stephenyap89]

Hi sir can you please provide a working code in codesandbox for this? thank you