如何实现点击Material UI Table行后在该行下方打开Drawer展示信息

核心思路是基于表格原生结构做行级展开，无需额外调整Drawer的定位，完全匹配你提供的效果图，实现步骤如下：

• 用React状态管理当前展开的行标识，支持点击已展开行自动关闭
• 每个可点击行绑定点击事件，更新展开状态
• 条件渲染跨列的详情行，仅在对应行被点击时展示

以下是适配MUI 5.0.6的完整代码示例：

import { useState } from 'react';
import { Table, TableHead, TableBody, TableRow, TableCell } from '@mui/material';

export default function ExpandableTable() {
  // 存储当前展开的行索引，也可以换成行的唯一ID
  const [expandedRowIndex, setExpandedRowIndex] = useState(null);
  // 模拟表格数据
  const tableData = [
    { col1: 'row 1, column 1', col2: 'row 1, column 2', detail: '这是第一行的额外详情信息，你可以在这里插入任意自定义内容，比如表单、子表格、图表等' },
    { col1: 'row 2, column 1', col2: 'row 2, column 2', detail: '这是第二行的额外详情信息，支持自定义样式和交互' },
    { col1: 'row 3, column 1', col2: 'row 3, column 2', detail: '这是第三行的额外详情信息' },
  ];

  const handleRowClick = (index) => {
    // 如果点击的是已经展开的行，就关闭展开区域，否则展开当前点击行
    setExpandedRowIndex(expandedRowIndex === index ? null : index);
  };

  return (
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>column 1</TableCell>
          <TableCell>column 2</TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {tableData.map((row, index) => (
          <>
            {/* 普通数据行 */}
            <TableRow
              key={`data-row-${index}`}
              onClick={() => handleRowClick(index)}
              sx={{ cursor: 'pointer' }}
            >
              <TableCell align="center">{row.col1}</TableCell>
              <TableCell align="center">{row.col2}</TableCell>
            </TableRow>
            {/* 展开的详情行 */}
            {expandedRowIndex === index && (
              <TableRow key={`detail-row-${index}`}>
                {/* colSpan设置为表格总列数，占满整行 */}
                <TableCell colSpan={2} sx={{ backgroundColor: '#fafafa', padding: 3 }}>
                  {/* 这里可以替换为你需要的任意内容，包括嵌套Drawer组件 */}
                  {row.detail}
                </TableCell>
              </TableRow>
            )}
          </>
        ))}
      </TableBody>
    </Table>
  );
}

如果你确实需要使用MUI的Drawer组件实现，需要额外做定位处理：给每个TableRow绑定ref，点击行时通过ref.current.getBoundingClientRect()获取行的底部坐标，将Drawer设置为绝对定位，top值等于行底部坐标，宽度和表格保持一致即可，该方案需要额外处理页面滚动时的位置偏移问题，稳定性不如上述原生表格展开方案。

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