SelectableTableCell.tsx

import { Select, SelectChangeEvent, TableCell } from "@mui/material";

/**
 * 選択可能なテーブルセルのプロパティ
 * @param param0 
 * @returns 
 */
type Props = {
    onchange?: (e: SelectChangeEvent<unknown>, child: React.ReactNode) => void;
    children?: React.ReactNode;
    sx?: React.CSSProperties;
    defaultValue?: string;
    size?: "small" | "medium";
    fontSize?: string;
};

/**
 * 選択可能なテーブルセル
 * @param param0 
 * @returns 
 */
export const SelectableTableCell = ({ onchange, children, sx, defaultValue, size, fontSize }: Props) => {
    const handleSelectChange = (e: SelectChangeEvent<unknown>, child: React.ReactNode) => {
        onchange?.(e, child);
    };

    return (
        <TableCell contentEditable={true} sx={sx}>
            <Select onChange={handleSelectChange} defaultValue={defaultValue} displayEmpty size={size} sx={{fontSize:{fontSize} }}>
                {children}
            </Select>
        </TableCell>
    );
}

import React, { useState } from 'react';
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, MenuItem } from '@mui/material';
import { type } from 'os';
import { EditableTableCell } from './EditableTableCell';
import { SelectableTableCell } from './SelectableTableCell';

function SimpleTable() {
  // 1. セルの内容を状態として管理
  const [cellValue, setCellValue] = useState('default');

  // 2. セルの内容が変更されたときに呼ばれるハンドラ
  const handleCellInput = (e) => {
    setCellValue(e.target.textContent);
  };
  const [selectedValue, setSelectedValue] = useState(''); // セレクトボックスの選択内容を管理

  const handleSelectChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <>
      <h3>text:{cellValue}</h3>
      <h3>select:{selectedValue}</h3>
      <TableContainer component={Paper}>
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>列1</TableCell>
              <TableCell>列2</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            <TableRow>
              {/* 3. セルの内容を状態に表示し、入力時にハンドラを呼び出す */}
              {/* <TableCell contentEditable={true} onInput={handleCellInput}>
                {cellValue}
              </TableCell> */}
              <EditableTableCell onInput={handleCellInput} sx={{ padding: "0" }} size='small'>
                {cellValue}
              </EditableTableCell>
              <SelectableTableCell onchange={handleSelectChange} sx={{ padding: "0"}} defaultValue='0' size='small' fontSize='0.8rem'>
                <MenuItem value="0">選択してください</MenuItem>
                <MenuItem value="1">オプション1</MenuItem>
                <MenuItem value="2">オプション2</MenuItem>
                <MenuItem value="3">オプション3</MenuItem>
              </SelectableTableCell>
            </TableRow>
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
}

export default SimpleTable;