【Material-UI】Table 组件中的 Collapsible Table 详解

Material-UI 是 React 生态系统中备受推崇的 UI 框架，其丰富的组件库能够帮助开发者快速构建现代化的用户界面。本文将深入探讨 Material-UI 的 Table 组件，重点介绍其中的 Collapsible Table 功能，即具有可展开行的表格。通过这一功能，开发者可以创建更加交互式和信息丰富的表格，提升用户体验。

一、Collapsible Table 概述

1. 功能简介

Collapsible Table 是 Material-UI Table 组件的一种扩展形式，它允许表格中的某些行具备展开和折叠功能。点击某一行的展开按钮，用户能够查看更多的详细信息，而无需跳转到其他页面或弹出新的窗口。这种设计在数据量较大或需要展示层次信息的情况下尤为实用。

2. 应用场景

在实际应用中，Collapsible Table 常用于以下场景：

• 订单详情展示：在订单列表中，用户可以点击某一订单的行来查看详细的商品信息、配送状态等。
• 数据层次展示：例如财务报表中展示各部门的收入支出明细。
• 日志信息展示：用户可以展开一行查看操作日志的详细记录。

二、Collapsible Table 的实现

1. 引入必要组件

在实现 Collapsible Table 时，我们需要引入一系列 Material-UI 组件，包括 Table、TableBody、TableCell、TableContainer、TableHead、TableRow、Collapse 和 IconButton。此外，还需要使用 Box 和 Typography 组件来进一步美化展开部分的内容。

import * as React from 'react';
import Box from '@mui/material/Box';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import Typography from '@mui/material/Typography';
import Paper from '@mui/material/Paper';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';

2. 创建数据

首先，我们需要为表格准备数据。在本例中，使用了 createData 函数来生成每一行的数据对象。除了基础的表格数据外，每一行数据还包含一个 history 属性，用于存储展开后显示的额外信息。

function createData(name, calories, fat, carbs, protein, price) {
  return {
    name,
    calories,
    fat,
    carbs,
    protein,
    price,
    history: [
      {
        date: '2020-01-05',
        customerId: '11091700',
        amount: 3,
      },
      {
        date: '2020-01-02',
        customerId: 'Anonymous',
        amount: 1,
      },
    ],
  };
}

const rows = [
  createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99),
  createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99),
  createData('Eclair', 262, 16.0, 24, 6.0, 3.79),
  createData('Cupcake', 305, 3.7, 67, 4.3, 2.5),
  createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5),
];

3. 构建可展开的表格行

Row 组件是 Collapsible Table 的核心部分。它负责渲染每一行的基本信息，以及在行被展开时显示的详细数据。通过 Collapse 组件，我们可以控制详细信息的显隐状态。

function Row(props) {
  const { row } = props;
  const [open, setOpen] = React.useState(false);

  return (
    <React.Fragment>
      <TableRow>
        <TableCell>
          <IconButton
            aria-label="expand row"
            size="small"
            onClick={() => setOpen(!open)}
          >
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <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>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box margin={1}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>Date</TableCell>
                    <TableCell>Customer</TableCell>
                    <TableCell align="right">Amount</TableCell>
                    <TableCell align="right">Total price ($)</TableCell>
                  </TableRow>
                </TableHead>
                <TableBody>
                  {row.history.map((historyRow) => (
                    <TableRow key={historyRow.date}>
                      <TableCell component="th" scope="row">
                        {historyRow.date}
                      </TableCell>
                      <TableCell>{historyRow.customerId}</TableCell>
                      <TableCell align="right">{historyRow.amount}</TableCell>
                      <TableCell align="right">
                        {Math.round(historyRow.amount * row.price * 100) / 100}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

在 Row 组件中，通过 IconButton 和 Collapse 组件的结合，实现了表格行的展开和折叠效果。IconButton 通过点击事件来控制 Collapse 组件的状态，从而决定是否显示额外的详细信息。

4. 渲染表格

最后，我们使用 TableContainer 组件将整个表格包裹起来，并在其中渲染表头和表身。通过将 Row 组件应用到 TableBody 中，最终实现了具有展开功能的表格。

export default function CollapsibleTable() {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <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.map((row) => (
            <Row key={row.name} row={row} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

三、Collapsible Table 的优势

1. 用户体验提升

Collapsible Table 通过提供信息的分层展示，避免了信息过载的问题。用户可以自主选择查看哪些信息，表格的可读性得到了显著提高。

2. 界面整洁

对于需要展示大量数据的场景，Collapsible Table 能够有效减少初始界面的复杂度，将次要信息隐藏在展开的部分中，保持界面的简洁。

3. 实现简单

借助 Material-UI 提供的丰富组件，开发者可以轻松实现 Collapsible Table 功能，无需手动编写复杂的样式和交互逻辑。这极大地提高了开发效率。

四、总结

Collapsible Table 是 Material-UI Table 组件中的一个实用扩展，能够通过简单的实现为复杂数据展示提供有效的解决方案。在开发过程中，通过灵活运用 Collapse、IconButton 等组件，开发者可以轻松实现具有良好用户体验的表格交互效果。

推荐：

• JavaScript
• react
• vue