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,
      ]);
    }
  );

Hi there, did you find a solution? I'm currently facing the same problem — Àtishking, Jan 19 '21 at 14:52
@Àtishking just posted my solution, let me know if you need more help — SAKURA, Jan 20 '21 at 18:05

sinewave440hz · Answer 1 · 2021-02-04T15:33:33.773

5

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, ....}

edited Feb 04 '21 at 15:33

answered Feb 04 '21 at 13:28

sinewave440hz

1,265
9
22

score 1 · Answer 2 · answered Mar 30 '22 at 20:04

You have to do like this by my experience.

Cell: ({row}) => (
   <RadioButton
      {...row.getToggleRowSelectedProps({
         onChange: () => {
           const selected = row.isSelected; // get selected status of current row.
           toggleAllRowsSelected(false); // deselect all.
           row.toggleRowSelected(!selected); // reverse selected status of current row.
         },
      })}
   />
)

score 0 · Answer 3 · answered Jan 20 '21 at 18:05

I used a workaround to make this work, basically setting the selected rowId in the state.

const [selectedRowId, setSelectedRowId] = useState('0');

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
  } = useTable(
    {
      columns,
      data,
    },
    usePagination
  );

This is a shortened version of the code for the table. As you can see it sets state whenever the user clicks on the row or checks the radio button.

<TableV2.Body {...getTableBodyProps()}>
            {rows.map((row) => {
              prepareRow(row);
              return (
                <TableV2.Row
                  key={row.id}
                  onClick={() => setSelectedRowId(row.id)}
                  {...row.getRowProps()}
                  bg={row.id !== selectedRowId ? 'white' : 'gray.10'}
                >
                  <TableV2.Cell key={`${row.id}-radio`}>
                    <Box testIds={{test: 'sku-detail-radio-button'}} mt={-12}>
                      <RadioButton
                        value={row.id}
                        checked={row.id === selectedRowId}
                        onChange={() => setSelectedRowId(row.id)}
                      />
                    </Box>
                  </TableV2.Cell>

If you want to pass the selectedRowId to the parent component, you can use useEffect:

 useEffect(() => {
        props.onRowSelection(selectedRowId);
      }, [props, selectedRowId]);

Hi there mate, appreciate the response but I just wanted you to know that I also managed to pull it of, and I think my way is much more simpler than that one. Let me know if you want me to share it — Àtishking, Jan 21 '21 at 09:46

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

3 Answers3