react-table - 如何在可扩展的反应表中创建一个包含一个单元格的行？

Question

我想使用 useExpanded 创建一个沿所有列延伸的子行，类似于屏幕截图。在反应表示例中，它仅提供具有与表标题相同的列的扩展行。

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    state: { expanded }
  } = useTable(
    {
      columns: userColumns,
      data
    },
    useExpanded // Use the useExpanded plugin hook
  );

标签： react-tablereact-table-v7

Answer 1

您需要将元素上的html colspan属性设置td为行中的单元格数。

<tr>
 <td colspan="3">Extra: cdd</td>
</tr>

这是一个很好的起点。见 CSB

<tbody {...getTableBodyProps()}>
  {rows.map((row, i) => {
    prepareRow(row);
    return (
      <tr {...row.getRowProps()}>
        {!row.canExpand && <td colSpan={3}>{row.cells[1].value}</td>}
        {row.canExpand &&
          row.cells.map((cell) => {
            return (
              <td {...cell.getCellProps()}>{cell.render("Cell")}</td>
            );
          })}
      </tr>
    );
  })}
</tbody>