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

问题描述

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

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

解决方法

您需要将 html 元素的 td 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>