在 react-table 中为扩展行添加 class

Question

我在这个代码笔之后创建了一个 table 以允许可扩展的行： https://react-table.tanstack.com/docs/examples/expanding

我想在展开的行中添加 class 以更改背景颜色并删除边框。我看到您可以更改切换元素的样式，但我无法找到一种方法来定位展开的行并将 class 添加到 cells/rows。您知道是否有办法将 class 添加到扩展行？

谢谢。

Answer 1

根据Row Properties，每一行都有一个名为“深度”的属性。每个子行层的深度增加 1，因此您可以通过在迭代时检查行的深度来基于深度层设置样式；即，

          {rows.map((row, i) => {
            prepareRow(row)
            
            let s = { backgroundColor: 'red' }
            return (
              <tr {...row.getRowProps()} style={row.depth === 1 ? s : {}}>
                {row.cells.map(cell => {
                  return <td {...cell.getCellProps()} >{cell.render('Cell')}</td>
                })}
              </tr>
            )
          })}

将所有深度为 1 的子行着色为红色。

在 react-table 中为扩展行添加 class

Adding class for expanded rows in react-table

reactjs

react-table