如何在可扩展反应 table 中用一个单元格创建一行？

Question

我想使用 useExpanded 创建一个沿着所有列延伸的子行，类似于屏幕截图。在 react table example 中，它仅提供具有与 table header.

相同列的扩展行

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

Answer 1

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

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

这是一个很好的起点。 See the 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>

如何在可扩展反应 table 中用一个单元格创建一行？

How to create a row with one cell in a expandible react table?

react-table

react-table-v7