带钩子的Material-UI收拢表格

import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, IconButton, Typography } from '@material-ui/core';
import { ExpandMore, ChevronDown, ChevronRight } from '@material-ui/icons';

const CollapsibleTable = ({ data }) => {
  const [expandedRow, setExpandedRow] = useState(null);

  const handleExpandClick = (index) => {
    if (expandedRow === index) {
      setExpandedRow(null);
    } else {
      setExpandedRow(index);
    }
  };

  return (
    <TableContainer component={Paper}>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>ID</TableCell>
            <TableCell>Name</TableCell>
            <TableCell>Actions</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, index) => (
            <React.Fragment key={row.id}>
              <TableRow onClick={() => handleExpandClick(index)}>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
                <TableCell>
                  {expandedRow === index ? (
                    <IconButton onClick={() => handleExpandClick(index)}>
                      <ChevronDown />
                    </IconButton>
                  ) : (
                    <IconButton onClick={() => handleExpandClick(index)}>
                      <ChevronRight />
                    </IconButton>
                  )}
                </TableCell>
              </TableRow>
              {expandedRow === index && (
                <TableRow>
                  <TableCell colSpan={3}>
                    <Typography variant="body2">{row.details}</Typography>
                  </TableCell>
                </TableRow>
              )}
            </React.Fragment>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

export default CollapsibleTable;