CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Cosmin Ciolacu
Cosmin Ciolacu

Reputation: 494

display an full-width row in material-ui table react

I want to display some data in a table this is my JSX code:

const StudentsTable = (props) => {
  const classes = useStyles();
  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>NR.</TableCell>
            <TableCell align="right">NUME</TableCell>
            <TableCell align="right">E-MAIL</TableCell>
            <TableCell align="right">NR.TELEFON</TableCell>
            <TableCell align="right">CLASA</TableCell>
            <TableCell align="right">ACTIUNI</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {props.students.length > 0 ? (
            props.students.map((student, i) => (
              <TableRow key={student.studentName}>
                <TableCell component="th" scope="row">
                  {i + 1}
                </TableCell>
                <TableCell align="right">{student.studentName}</TableCell>
                <TableCell align="right">{student.studentEmail}</TableCell>
                <TableCell align="right">{student.studentPhone}</TableCell>
                <TableCell align="right">{student.clasa}</TableCell>
                <TableCell align="center" className={classes.actionsCell}>
                  <BootstrapButton variant="primary" size="sm">
                    EDITARE
                  </BootstrapButton>
                  <BootstrapButton
                    variant="danger"
                    size="sm"
                    onClick={() => props.deleteStudent(student.studentName)}
                  >
                    STERGERE
                  </BootstrapButton>
                </TableCell>
              </TableRow>
            ))
          ) : (
            <Typography variant="h5">
              NU EXISTA ELEVI ADAUGATI.{"\n"} PUTETI ADAUGA APASAND PE BUTONUL
              "ADAUGA ELEVI"
            </Typography>
          )}
        </TableBody>
      </Table>
    </TableContainer>
  );
};

when the props.students it's an empty array I want to return a single full-width row with this message: NU EXISTA ELEVI ADAUGATI.{"\n"} PUTETI ADAUGA APASAND PE BUTONUL "ADAUGA ELEVI" but in my app, the table looks something like this: table image how to fix it?

Upvotes: 2

Views: 4039

Answers (1)

Someone Special
Someone Special

Reputation: 13588

In the place where you want to render a full row

use

<TableRow><TableCell colSpan={6}>"your message"</TableCell></TableRow>

Upvotes: 2

Related Questions