如何在Material UI的react-table中获取展开行完整对象值

核心原理 #

你使用的 react-table v7 版本在实例化行数据时，会把传入表格的原始完整数据挂载在每行的original属性上，不管是渲染普通行还是展开行，只要拿到当前行的row实例，就能直接取到对应完整行对象，不需要额外做全局状态存储或者ID匹配查询。

具体实现 #

1. 渲染展开区域时直接取值 #

你在表格体里渲染展开子内容时，本身就已经遍历拿到了当前row实例，展开区域渲染时直接读取row.original即可：

// TableBody 部分核心代码
<TableBody>
  {page.map((row) => {
    prepareRow(row);
    return (
      <Fragment key={row.id}>
        {/* 普通表格行 */}
        <TableRow {...row.getRowProps()}>
          {row.cells.map((cell) => (
            <TableCell {...cell.getCellProps()}>
              {cell.render("Cell")}
            </TableCell>
          ))}
        </TableRow>

        {/* 展开行区域 */}
        {row.isExpanded ? (
          <TableRow>
            <TableCell colSpan={visibleColumns.length}>
              {/* 在这里直接传入row，自定义渲染函数里取original就是完整行对象 */}
              {renderRowSubComponent({ row })}
            </TableCell>
          </TableRow>
        ) : null}
      </Fragment>
    );
  })}
</TableBody>

自定义展开内容的函数里直接读取对应数据即可：

const renderRowSubComponent = ({ row }) => {
  // 这里拿到的就是当前展开行对应的完整原始数据对象
  const expandRowData = row.original;
  
  // 后续直接基于expandRowData渲染展开内容即可，比如：
  return (
    <Box padding={2}>
      <div>当前行ID：{expandRowData.id}</div>
      <div>当前行名称：{expandRowData.name}</div>
      {/* 其他字段按需取用 */}
    </Box>
  );
};

2. 点击展开按钮时即时获取数据 #

如果你需要在触发展开/收起动作的瞬间就拿到行数据，可以给展开按钮的属性注入自定义点击事件：

<IconButton
  {...row.getToggleRowExpandedProps({
    onClick: () => {
      // 点击时直接获取当前行完整对象
      const currentRowData = row.original;
      // 这里可以做展开前的数据拉取、日志打印等逻辑
      console.log("当前操作行数据：", currentRowData);
    }
  })}
>
  {row.isExpanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
</IconButton>

注意：row.original是对传入表格源数据的直接引用，不要直接修改该对象上的属性，如果需要做行编辑交互，建议先深拷贝一份到本地状态后再修改，避免源数据被污染导致表格渲染异常。

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