patient_Information_reactProject/src/Components/Helper/AddNewTable.tsx

import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material';
import * as React from 'react';

interface RowData {
  date: string;
  illness: string;
  treatment: string;
  results: string;
}

interface DataTableProps {
  data: RowData[];
  onAddRow: () => void;
}

const DataTable: React.FC= () => {

  const [illnessFromData, setIllnessFromData] = React.useState<any>({
    id:0,date:'',illness:'',treatment:'',results:''
  })
  const [illnessData, setIllnessData] = React.useState<any[]>([
    {id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'}
  ]);

  const deleteIllnessData = (idToDelete:number) => {
    const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete);
    setIllnessData(updatedIllnessData);
  };
  

  const handleAddRow = () => {
    if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){

      const newId = Math.max(...illnessData.map(item => item.id)) + 1;
      const newIllnessData = [
        ...illnessData,
        {
          ...illnessFromData,
          id: newId
        }
      ];
      setIllnessData(newIllnessData);
      setIllnessFromData({
        id: 0,
        date: '',
        illness: '',
        treatment: '',
        results: ''
      });
    }
  };

  console.log("sdfsdfdsf",illnessData, illnessFromData)
  

  return (
    <>
    <FormLabel>Please enter the details below:</FormLabel><br></br>
    <FormControl>
      <Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
        <Grid item xs={2} className='addNew-form-table-style'>
            <TextField 
              required
                variant="outlined"
                label="Date" 
                value={illnessFromData.date}
                onChange={(event) => {
                  setIllnessFromData((prevValues:any) => ({
                    ...prevValues,
                    date: event.target.value,
                  }));
                }}
                />
        </Grid>
        <Grid item xs={3.7} className='addNew-form-table-style'>
            <TextField 
              required
                variant="outlined"
                label="Injury/Illness/Surgeries" 
                value={illnessFromData.illness}
                onChange={(event) => {
                  setIllnessFromData((prevValues:any) => ({
                    ...prevValues,
                    illness: event.target.value,
                  }));
                }}
                />
        </Grid>
        <Grid item xs={3.5} className='addNew-form-table-style'>
            <TextField 
              required
                variant="outlined"
                label="Treatment" 
                value={illnessFromData.treatment}
                onChange={(event) => {
                  setIllnessFromData((prevValues:any) => ({
                    ...prevValues,
                    treatment: event.target.value,
                  }));
                }}
                />
        </Grid>
        <Grid item xs={2} className='addNew-form-table-style'>
            <TextField 
                required
                variant="outlined"
                label="Results" 
                value={illnessFromData.results}
                onChange={(event) => {
                  setIllnessFromData((prevValues:any) => ({
                    ...prevValues,
                    results: event.target.value,
                  }));
                }}
                />
        </Grid>
        <Grid item xs={0.8} className='addNew-form-table-style'>
          <Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
        </Grid>
        
      </Grid>
    </FormControl>
    
     
      <TableContainer sx={{width:800}} className='illness-table-style'>
        <Table  aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell align='left'>Date</TableCell>
              <TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
              <TableCell align='left'>Treatment</TableCell>
              <TableCell align='left'>Results</TableCell>
              <TableCell align='left'></TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {illnessData.map((row, index) => (
              <TableRow key={index}>
                <TableCell align='left'>
                    {row.date}
                </TableCell>
                <TableCell align='center'> 
                  {row.illness}
                </TableCell>
                <TableCell align='left'> 
                  {row.treatment}
                </TableCell>
                <TableCell align='left'> 
                  {row.results}
                </TableCell>
                <TableCell align='left'> 
                  <Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
                    Delete
                  </Button>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </TableContainer>
    </>
  );
};

export default DataTable;