Column Issue in React and Material UI

I have three columns and I wanted to add a column for removing each row.
I need to add a column for "removing" on the right. Is it possible?
How will I do it?

CODESANDBOX: CLICK HERE

const CustomTableRow = ({ row, index, arrayHelpers }) => {
  return (
    <>
      <TableRow
        sx={{
          "th, td": { border: 0 }
        }}
      >
        <TableCell component="th" scope="row">
          <FastField
            name={`rows.${index}.attribute`}
            component={TextField}
            fullWidth
          />
        </TableCell>
        <TableCell>
          <FastField
            name={`rows.${index}.ruleId`}
            component={TextField}
            fullWidth
          />
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell colSpan={2}>
          <FastField
            name={`rows.${index}.thirdRow`}
            component={TextField}
            fullWidth
          />
        </TableCell>
      </TableRow>
      {/* <TableCell align="right">
        <IconButton
          aria-label="delete"
          onClick={() => arrayHelpers.remove(index)}
          size="small"
        >
          <RemoveCircleOutlineIcon sx={{ fontSize: "1.25rem" }} />
        </IconButton>
      </TableCell> */}
    </>
  );
};

Just a rough start, but edit the rows to occupy 5 columns of space, 4 for the row data/fields and 1 for the remove button. You can tweak the column spans to adjust the UI to your liking.

Table

<Table sx={{ minWidth: 650 }} aria-label="simple table">
  <TableHead>
    <TableRow
      sx={{
        th: { border: 0 }
      }}
    >
      <TableCell colSpan={2}>Attribute</TableCell>
      <TableCell colSpan={2}>Rule ID</TableCell>
      <TableCell />
    </TableRow>
    <TableRow>
      <TableCell colSpan={4}>Third Row</TableCell>
      <TableCell />
    </TableRow>
  </TableHead>
  <TableBody>
    {values.rows?.map((row, index) => (
      <CustomTableRow
        key={row.id}
        row={row}
        index={index}
        arrayHelpers={arrayHelpers}
      />
    ))}
  </TableBody>
</Table>

CustomTableRow

const CustomTableRow = ({ row, index, arrayHelpers }) => {
  return (
    <>
      <TableRow
        sx={{
          "th, td": { border: 0 }
        }}
      >
        <TableCell colSpan={2} component="th" scope="row">
          <FastField
            name={`rows.${index}.attribute`}
            component={TextField}
            fullWidth
          />
        </TableCell>
        <TableCell colSpan={2}>
          <FastField
            name={`rows.${index}.ruleId`}
            component={TextField}
            fullWidth
          />
        </TableCell>
        <TableCell align="center" colSpan={1} rowSpan={2}>
          <IconButton
            aria-label="delete"
            onClick={() => arrayHelpers.remove(index)}
            size="small"
          >
            <RemoveCircleOutlineIcon sx={{ fontSize: "1.25rem" }} />
          </IconButton>
        </TableCell>
      </TableRow>
      <TableRow
        sx={{
          "th, td": { border: 0 }
        }}
      >
        <TableCell colSpan={4}>
          <FastField
            name={`rows.${index}.thirdRow`}
            component={TextField}
            fullWidth
          />
        </TableCell>
      </TableRow>
    </>
  );
};

I think Column issue is solved and it might be helpful to you as well
Please check the file which have been updated below :

demo.js

    import React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import { Box, Button } from "@mui/material";
import AddIcon from "@mui/icons-material/Add";
import { FieldArray, Form, Formik } from "formik";
import CustomTableRow from "./CustomTableRow";
const CustomTable = () => {
const handleSubmit = () => {};
return (
<TableContainer component={Paper}>
<Formik
initialValues={[
{
id: 1,
attribute: "",
ruleId: "",
thirdRow: ""
}
]}
onSubmit={handleSubmit}
>
{({ values }) => (
<Form>
<FieldArray
name="rows"
render={(arrayHelpers) => (
<React.Fragment>
<Box>
<Button
variant="contained"
type="submit"
startIcon={<AddIcon />}
onClick={() =>
arrayHelpers.unshift({
id: Date.now(),
attribute: "",
ruleId: "",
thirdRow: ""
})
}
>
Add New
</Button>
</Box>
<Table sx={{ minWidth: 650 }} aria-label="simple table">
<TableHead>
<TableRow
sx={{
th: { border: 0 }
}}
>
<TableCell>Attribute</TableCell>
<TableCell>Rule ID</TableCell>
<TableCell colSpan={2}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{values.rows?.map((row, index) => (
<CustomTableRow
key={row.id}
row={row}
index={index}
arrayHelpers={arrayHelpers}
/>
))}
</TableBody>
</Table>
</React.Fragment>
)}
/>
</Form>
)}
</Formik>
</TableContainer>
);
};
export default CustomTable;

CustomTableRow.js

    import { TableCell, TableRow, TextField, IconButton } from "@mui/material";
import { FastField } from "formik";
import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
import { Button } from "@mui/material";
const CustomTableRow = ({ row, index, arrayHelpers }) => {
return (
<>
<TableRow
sx={{
"th, td": { border: 0 }
}}
>
<TableCell component="th" scope="row">
<FastField
name={`rows.${index}.attribute`}
component={TextField}
fullWidth
/>
</TableCell>
<TableCell>
<FastField
name={`rows.${index}.ruleId`}
component={TextField}
fullWidth
/>
</TableCell>
<TableCell>
<FastField
name={`rows.${index}.ruleId`}
component={TextField}
fullWidth
/>
</TableCell>
</TableRow>
</>
);
};
CustomTableRow.displayName = "CustomTableRow";
export default CustomTableRow;

Look over your imports: Verify that the appropriate Material UI components have been loaded. You should integrate the Grid component for columns.

Verify your code: Verify that the Props and Syntax for the Grid component are accurate. Make sure that the xs, sm, md, lg, and xl props add up to 12. The Grid component utilises a 12-column layout.

import { Grid } from '@material-ui/core';
function App() {
return (
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
{/* Left column content */}
</Grid>
<Grid item xs={12} md={6}>
{/* Right column content */}
</Grid>
</Grid>
);
}

Make sure there are no CSS styles that clash with the Material UI designs by checking for conflicts. The And'so make use the total cost effective date and'so make use the total cost-effective date and so make use the total cost effective date and'so make use the total cost effective date and'so make use the