Question 44701 in Html Question posted in
Some basic documentation can be found here.

Column Issue in React and Material UI – Html

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> */}
    </>
  );
};
Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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;
    Login or Signup to reply.
  3. 0

    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>
    </>
  );
};

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search