Material-UIで作成する折りたたみ可能なテーブルの実装方法

方法1: Expansion Panelを使用した折りたたみテーブル

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  ExpansionPanel,
  ExpansionPanelSummary,
  ExpansionPanelDetails,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  table: {
    minWidth: 650,
  },
  expansionPanel: {
    marginBottom: theme.spacing(1),
  },
}));
const CollapsibleTable = () => {
  const classes = useStyles();
  return (
    <TableContainer component={Paper} className={classes.root}>
      <Table className={classes.table} aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Column 1</TableCell>
            <TableCell>Column 2</TableCell>
            <TableCell>Column 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row) => (
            <TableRow key={row.id}>
              <TableCell>
                <ExpansionPanel className={classes.expansionPanel}>
                  <ExpansionPanelSummary
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                  >
                    {/* 行を折りたたむためのコンテンツ */}
                  </ExpansionPanelSummary>
                  <ExpansionPanelDetails>
                    {/* 行が展開されたときに表示されるコンテンツ */}
                  </ExpansionPanelDetails>
                </ExpansionPanel>
              </TableCell>
              <TableCell>{row.column1}</TableCell>
              <TableCell>{row.column2}</TableCell>
              <TableCell>{row.column3}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};
export default CollapsibleTable;

方法2: Collapseコンポーネントを使用した折りたたみテーブル

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  Collapse,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const useStyles = makeStyles((theme) => ({
  root: {
    width: '100%',
  },
  table: {
    minWidth: 650,
  },
}));

const CollapsibleTable = () => {
  const classes = useStyles();
  const [open, setOpen] = useState(false);

  const handleRowClick = () => {
    setOpen(!open);
  };

  return (
    <TableContainer component={Paper} className={classes.root}>
      <Table className={classes.table} aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Column 1</TableCell>
            <TableCell>Column 2</TableCell>
            <TableCell>Column 3</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row) => (
            <React.Fragment key={row.id}>
              <TableRow onClick={handleRowClick}>
                <TableCell>
                  <ExpandMoreIcon
                    style={{ transform: open ? 'rotate(180deg)' : 'none' }}
                  />
                </TableCell>
                <TableCell>{row.column1}</TableCell>
                <TableCell>{row.column2}</TableCell>
                <TableCell>{row.column3}</TableCell>
              </TableRow>
              <TableRow>
                <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={4}>
                  <Collapse in={open} timeout="auto" unmountOnExit>
                    {/* 行が展開されたときに表示されるコンテンツ */}
                  </Collapse>
                </TableCell>
以上のコード例では、Material-UIを使用して折りたたみ可能なテーブルを作成する方法を示しています。方法1では、Expansion Panelコンポーネントを使用して各行を折りたたむことができます。方法2では、Collapseコンポーネントを使用して各行を折りたたむことができます。

実際のテーブルデータを表示するために、適切なデータソースを用意し、`data`配列にマップする必要があります。また、必要に応じてスタイルやデザインをカスタマイズすることもできます。

これらの方法を使用することで、Material-UIを介して折りたたみ可能なテーブルを簡単に実装することができます。