EditableTableCell.tsx

import { TableCell } from "@mui/material";

/**
 * 編集可能なテーブルセルのプロパティ
 */
type Props = {
    onInput?: (e: React.FormEvent<HTMLTableCellElement>) => void;
    children?: React.ReactNode;
    sx?: React.CSSProperties;
    size?: "small" | "medium";
};

/**
 * 編集可能なテーブルセル
 * @param param0 
 * @returns 
 */
export const EditableTableCell = ({ onInput, children, sx, size }: Props) => {
    const handleCellInput = (e: React.FormEvent<HTMLTableCellElement>) => {
        onInput?.(e);
    };
    return (
        <TableCell contentEditable={true} onInput={handleCellInput} sx={sx} size={size} >
            {children}
        </TableCell>
    );
}