如何在TableBody中删除表格单元格？

Question

所以，我正在为从后端服务器检索的数据创建一个表格。我正在使用Material UI中的Table组件。从检索到的数据中，它可能为空或包含一个对象。我遇到的问题是，如果为空，我希望在Table组件的中间显示“没有记录”供用户查看。但是，由于我已经在TableHead中定义了TableCell，单元格的数量被复制到TableBody（这是我所认为的），这会阻止我的消息居中显示。

下面是我的组件：

export default function BasicTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows ? (
            <div className={classes.noLogs}>
              <p>No logs</p>
            </div>
          ) : (
            rows.map((row) => (
              <TableRow key={row.name}>
                <TableCell component="th" scope="row">
                  {row.name}
                </TableCell>
                <TableCell align="right">{row.calories}</TableCell>
                <TableCell align="right">{row.fat}</TableCell>
                <TableCell align="right">{row.carbs}</TableCell>
                <TableCell align="right">{row.protein}</TableCell>
              </TableRow>
            ))
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

完整代码可在CodeSandbox上找到。

正如您所见，在TableBody的第一个单元格中仅居中显示了消息。有没有办法仅当数据为空时删除这些单元格，或者通过其他方法使消息居中显示?

- JLI_98

Answer 1

如果您想要在表格中使用div和p标签，您可以使用TableRow和一个单一的TableCell。您可以通过添加colspan={5}到您的TableCell来指示该单元格跨越多少列，就像这样：

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell>Dessert (100g serving)</TableCell>
        <TableCell align="right">Calories</TableCell>
        <TableCell align="right">Fat&nbsp;(g)</TableCell>
        <TableCell align="right">Carbs&nbsp;(g)</TableCell>
        <TableCell align="right">Protein&nbsp;(g)</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {rows ? (
        <TableRow>
          <TableCell colspan={5} align="center">
            No items found
          </TableCell>
        </TableRow>
      ) : (
        rows.map((row) => (
          <TableRow key={row.name}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
            <TableCell align="right">{row.carbs}</TableCell>
            <TableCell align="right">{row.protein}</TableCell>
          </TableRow>
        ))
      )}
    </TableBody>
  </Table>
</TableContainer>

- Zsolt Meszaros