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();
  }

从 useTable 解构变量时，您需要包含

toggleAllRowsSelected

。

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

Answer 4

Tanstack 表已经有一个预构建的表选项可以处理该问题，即

enableMultiRowSelection

，它可以通过两种方式使用：

• 传递布尔值以允许或不允许多行选择
• 给定一行的函数，返回是否启用/禁用该行的子代/孙代的多行选择。

这是我使用它的第一个用例的示例：

const { table } = useCustomTable({
    multiRows: false,
    ...
});

从上面的代码片段中，

multiRows

变量用于传递布尔函数，然后在我的

useReactTable

道具中，我将

enableMultiRowSelection

选项分配给

multiRows

道具值，如下所示：

function useCustomTable({ tableData, columns, multiRows=true }: ITableProps) {
const data = useMemo(() => tableData || [], [tableData]);

const table = useReactTable({
    data,
    columns,
    enableMultiRowSelection: multiRows,
    ...
  });
  return { table };
}

export { useCustomTable };

您可以从他们的官方文档中阅读更多内容：Tanstack Table Options