使用自定义字段而不是索引进行反应表行选择

Ana*_*rno 4 reactjs react-table react-table-v7

我正在使用反应表包。我制作了一个带有行选择的简单表格。问题是:行选择结果是一个带有索引的对象:

{
 0: true,
 1: true,
 ...
}
Run Code Online (Sandbox Code Playgroud)

但我想成为我的数据的主键,如下所示:

{
  EXoxMjyd4leYABdpuy8m: true,
  2gXlClA38AU8sSM5jnZ7: true,
  ...
}
Run Code Online (Sandbox Code Playgroud)

代码示例

在文档中,我找不到可以设置选择键的配置。问题是,我怎样才能实现第二个例子呢?

Fio*_*rei 7

您需要覆盖表选项 getRowId

例子:

const getRowId = (row, relativeIndex, parent) => {
   // In row object you have access to data. 
   // You can choose parameter. In this example I used uniqueId
   return parent ? [parent.id, row.uniqueId].join('.') : row.uniqueId;
}
Run Code Online (Sandbox Code Playgroud)

这是一个活生生的例子:

编辑 tannerlinsley/react-table:行选择控制(分叉)