如何在React的MUI V5 Table单元格中添加多行内容

实现思路 #

要在MUI Table的单元格里展示多行内容，核心是在列配置的render函数中返回垂直排列的元素集合，同时可根据需求调整数据结构来适配多内容存储。

修改后的代码示例 #

1. 调整数据结构与列配置 #

import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Box, Typography } from '@mui/material';

const columns = [
  { id: 'name', label: '姓名', minWidth: 170 },
  { id: 'email', label: '邮箱地址', minWidth: 90 },
  {
    id: 'project',
    label: '项目',
    minWidth: 170,
    align: 'center',
    // 渲染多行项目内容
    render: (row) => (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
        {row.projects.map((project, idx) => (
          <Typography key={idx} variant="body2">
            {project}
          </Typography>
        ))}
      </Box>
    ),
  },
  {
    id: 'access',
    label: '权限',
    minWidth: 170,
    align: 'center',
    // 渲染多行权限内容
    render: (row) => (
      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
        {row.accesses.map((access, idx) => (
          <Typography key={idx} variant="body2">
            {access}
          </Typography>
        ))}
      </Box>
    ),
  },
  {
    id: 'action',
    label: '操作',
    minWidth: 170,
    align: 'center',
  },
];

// 调整数据结构，支持多项目/权限存储
function createData(name, email, projects, accesses, action) {
  return { name, email, projects, accesses, action };
}

// 构造带多行内容的表格数据
const rows = [
  createData(
    data.username,
    data.email,
    ['项目A', '项目B', '项目C'], // 多行项目列表
    ['编辑', '查看', '管理员'], // 多行权限列表
    ''
  )
];

2. 表格基础渲染代码 #

<TableContainer component={Paper}>
  <Table sx={{ minWidth: 650 }} aria-label="多行内容表格">
    <TableHead>
      <TableRow>
        {columns.map((column) => (
          <TableCell
            key={column.id}
            align={column.align}
            style={{ minWidth: column.minWidth }}
          >
            {column.label}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
    <TableBody>
      {rows.map((row) => (
        <TableRow key={row.name}>
          {columns.map((column) => {
            const value = row[column.id];
            return (
              <TableCell key={column.id} align={column.align}>
                {/* 优先使用列定义的render函数，否则直接显示原始值 */}
                {column.render ? column.render(row) : value}
              </TableCell>
            );
          })}
        </TableRow>
      ))}
    </TableBody>
  </Table>
</TableContainer>

简化实现方式（固定多行文本） #

如果是内容固定的多行文本，可直接用换行标签快速实现：

// 在对应列的render中直接写死内容
render: () => (
  <div>
    第一行内容<br/>
    第二行内容<br/>
    第三行内容
  </div>
)

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