我如何在 react-table 中指定扩展数据行？

Question

来自这个文档示例。

https://react-table.js.org/#/story/custom-expander-position

文档示例的结果：

when i click row0 data that expanded under row0 will show Hello

when i click row1 data that expanded under row1 will show Hello

关于 ReactTable 中的道具 SubComponent。当展开一行时，每一行都会显示相同的数据，但我想显示特定于行的数据

我想做的结果：

when i click row0 data that expanded under row0 will show Hello 0

when i click row1 data that expanded under row1 will show Hello 1

如何使用 react-table 执行此操作？

Answer 1

您可以为您尝试这个子组件：

SubComponent={(v) => <div style={{padding: '10px'}}>Hello {v.row._index}</div>}

沙盒：https://codesandbox.io/s/o708980o7q

v 是元素，你得到要显示的行的索引。希望这有帮助。

Answer 2

对于使用挂钩的 React table v7.7.0，要在行上展开，请单击下面的内容，

第 1 步：将 useExpanded 传递给 useTable。

第 2 步：对于子组件

  const renderRowSubComponent = React.useCallback(
({ row }) => (
  <div style={{padding: '10px'}}>Hello {v.row.id}</div>
),
[])

第 3 步：要使行展开，请将以下内容添加到您的 <tr>

    <tbody>
  {rows.map((row, i) => {
        prepareRow(row)
        return (
          // Use a React.Fragment here so the table markup is still valid
          <React.Fragment {...row.getRowProps()}>
             <tr {...row.getRowProps()} onClick={() => { 
              row.toggleRowExpanded(); // toggle row expand
        }} >
              {row.cells.map(cell => {
                return (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                )
              })}
            </tr>
            {/*
                If the row is in an expanded state, render a row with a
                column that fills the entire length of the table.
              */}
            {row.isExpanded ? (
              <tr>
                <td colSpan={visibleColumns.length}>
                  {/*
                      Inside it, call our renderRowSubComponent function. In reality,
                      you could pass whatever you want as props to
                      a component like this, including the entire
                      table instance. But for this example, we'll just
                      pass the row
                    */}
                  {renderRowSubComponent({ row })}
                </td>
              </tr>
            ) : null}
          </React.Fragment>
        )
      })}
  </tbody>

我如何在 react-table 中指定扩展数据行？

How can i specific expanded data row in react-table?

reactjs

react-table