react-table v7如何实现无单元格表头行及子行展开功能

核心实现逻辑无需修改react-table底层配置，仅需在渲染阶段对自定义行做特殊处理，同时保留useExpanded提供的展开状态控制能力即可，具体实现步骤如下：

1. 基础配置准备 #

首先确认已引入展开功能依赖的useExpanded hook，给自定义行添加专属标识用来和普通行做区分，示例数据和基础配置如下：

import { useTable, useExpanded } from 'react-table'

// 原有列配置保持不变
const columns = [/* 你的列配置 */]

const data = [
  // 普通行数据示例
  {
    name: '普通行内容',
    // 其他业务字段
    subRows: [/* 子行数据，格式和普通行一致 */]
  },
  // 自定义无单元格行数据示例
  {
    // 自定义行专属标识
    isCustomRow: true,
    // 自定义行要展示的内容，可根据需求扩展字段
    customTip: '整行自定义展示内容',
    // 子行配置和普通行完全一致即可
    subRows: [/* 子行数据 */]
  }
]

2. 重写行渲染逻辑 #

在渲染表格body的行节点时，加判断逻辑，遇到带自定义标识的行时，直接渲染一个跨所有列的单元格，同时保留react-table内置的展开事件绑定即可：

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  rows,
  prepareRow,
} = useTable(
  {
    columns,
    data,
  },
  useExpanded // 必须注册该hook才能使用展开功能
)

// 页面渲染部分
return (
  <table {...getTableProps()}>
    <thead>
      {/* 原有表头渲染逻辑保持不变 */}
      {headerGroups.map(headerGroup => (
        <tr {...headerGroup.getHeaderGroupProps()}>
          {headerGroup.headers.map(column => (
            <th {...column.getHeaderProps()}>{column.render('Header')}</th>
          ))}
        </tr>
      ))}
    </thead>
    <tbody {...getTableBodyProps()}>
      {rows.map((row, i) => {
        prepareRow(row)
        return (
          <>
            <tr {...row.getRowProps()}>
              {row.original.isCustomRow ? (
                // 自定义无单元格行：渲染单个跨所有列的td
                <td colSpan={columns.length} style={{padding: 0}}>
                  {/* 这里可以写任意自定义的整行内容 */}
                  <div style={{padding: '12px', background: '#f5f5f5'}}>
                    {/* 保留展开功能：直接使用react-table内置的toggle方法 */}
                    <button {...row.getToggleRowExpandedProps()} style={{marginRight: '8px'}}>
                      {row.isExpanded ? '收起子行' : '展开子行'}
                    </button>
                    {row.original.customTip}
                  </div>
                </td>
              ) : (
                // 普通行走原有单元格渲染逻辑
                row.cells.map(cell => {
                  return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                })
              )}
            </tr>
            {/* 子行渲染逻辑保持不变，react-table会自动处理展开状态 */}
            {row.isExpanded && row.subRows.map(subRow => {
              prepareRow(subRow)
              return (
                <tr {...subRow.getRowProps()}>
                  {subRow.cells.map(cell => <td {...cell.getCellProps()}>{cell.render('Cell')}</td>)}
                </tr>
              )
            })}
          </>
        )
      })}
    </tbody>
  </table>
)

3. 常见调整说明 #

• 若不需要显示展开按钮，可直接将展开事件绑定到整行：<tr {...row.getRowProps({ onClick: row.toggleRowExpanded })}>，即可实现点击自定义整行触发展开/收起
• 跨列属性colSpan的值需要和你实际的列总数保持一致，若存在固定列等特殊配置，调整该值适配即可
• 自定义行的样式可根据设计需求自由调整，不受原有单元格样式限制

设计参考图：

内容的提问来源于stack exchange，提问作者Hung Vu