React-Table: выбрать только одну строку, отключить выбор нескольких строк

Question

Я использую радиокнопки для выбора строк. Как отключить выбор нескольких строк, чтобы одновременно можно было выбирать только одну строку?

Я использую selectedFlatRows, но он позволяет выбирать несколько строк.

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

Я некоторое время ломал голову над этим, решение, которое я использовал, работает нормально и очень просто. Используйте следующее в своем методе onClick():

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

Вам нужно будет включить toggleAllRowsSelectedпри деструктурировании переменных из useTable.

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

Answer 2

Вы должны сделать это по моему опыту.

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

Answer 3

Я использовал обходной путь, чтобы заставить эту работу работать, в основном устанавливая выбранный rowId в состоянии.

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

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

Это сокращенная версия кода для таблицы. Как видите, он устанавливает состояние всякий раз, когда пользователь щелкает строку или устанавливает переключатель.

      <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>

Если вы хотите пройти selectedRowIdк родительскому компоненту, вы можете использовать useEffect:

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