React-Table: Select Single Row Only, Disable Multiple Row Selection

Question

I am using radio buttons to select the rows. How do I disable multiple row selection so only one row can be selected at a time?

I am using selectedFlatRows, but it's allowing for multiple row selection.

const Table = props => {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    page,
    prepareRow,
    selectedFlatRows,
  } = useTable(
    {
      columns,
      data: props.linkedProducts,
    },
    useSortBy,
    usePagination,
    useRowSelect,
    hooks => {
      hooks.visibleColumns.push(columns => [
        {
          id: 'selection',
          disableGlobalFilter: true,
          accessor: 'selection',
          Cell: ({row}) => (
            <RadioButton
              {...row.getToggleRowSelectedProps()}
            />
          ),
        },
        ...columns,
      ]);
    }
  );

Answer 1

I was puzzling over this one for a while, the solution I used seems to work fine and is very simple. Use the following in your onClick() method:

  onClick={() => {
    toggleAllRowsSelected(false);
    row.toggleRowSelected();
  }

You'll need to include toggleAllRowsSelected when destructuring the variables from useTable.

 const { toggleAllRowsSelected, selectedFlatRows,...} = useTable({ columns, data, ....}