Search code examples
reactjsmaterial-ui

React - Material UI - Table no rows

I am rendering a table dynamically using React and Material UI.

My problem is related to when the table has no corresponding rows - in this scenario I would like to add a simple info message that there is no data to display.

I tried to check the length of my array, and if the length !===0 i return a table body, else I return an alert.

const EntityTable = ({ entity }) => {

const getEntityRelationshipsTableContents = () => {
    if (entity.relations.length === 0) {
        return (
            <Stack sx={{ width: '100%' }} spacing={2}>
                <Alert severity="info">No Data !</Alert>
            </Stack>
        );
    }
    else {
        return (
            <TableBody>
                {entity.relations.map((relation, index) => {
                    var otherRole = relation.Roles.find(role => role.Entity.Text !== entity.Text && role.Entity.Offset !== entity.Offset);

                    return (
                        <TableRow
                            key={index}
                            sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
                        >
                            <TableCell sx={whiteColorStyle} component="th" scope="row" align="center">{relation.RelationType}</TableCell>
                            <TableCell sx={whiteColorStyle} align="center">{otherRole.Name}</TableCell>
                            <TableCell sx={whiteColorStyle} align="center">{otherRole.Entity.Category}</TableCell>
                            <TableCell sx={whiteColorStyle} align="center">{otherRole.Entity.Text}</TableCell>
                            <TableCell sx={whiteColorStyle} align="center">
                                <IconButton
                                    toolTipText="Go to"
                                    toolTipPlacement="top"
                                    icon={<ArrowCircleRightIcon />}
                                ></IconButton>
                            </TableCell>
                        </TableRow>
                    );
                })}
            </TableBody>
        );
    }
}

const getEntityRelationshipsTable = () => {
    return (
        <TableContainer component={Paper}>
            <Table sx={tableStyle} aria-label="Entity Relationships">
                <TableHead>
                    <TableRow>
                        <TableCell sx={whiteColorStyle} align="center"><b><u>Relationship Type</u></b></TableCell>
                        <TableCell sx={whiteColorStyle} align="center"><b><u>Role Type</u></b></TableCell>
                        <TableCell sx={whiteColorStyle} align="center"><b><u>Related Entity Type</u></b></TableCell>
                        <TableCell sx={whiteColorStyle} align="center"><b><u>Related Entity Text</u></b></TableCell>
                        <TableCell sx={whiteColorStyle} align="center"></TableCell>
                    </TableRow>
                </TableHead>
                {getEntityRelationshipsTableContents()}
            </Table>
        </TableContainer >
    );


}

return (
            {getEntityRelationshipsTable()}
);

} }

Although this is working fine, the div is appearing only on the first column as per below. I tried playing around with the width of the stack/alert components but I cannot get it to span the full width of the table.

enter image description here

Any Ideas?

Edit: I just realised on console there is the following error: enter image description here

How should I implement this?

Solution

  • You should put your Stack component inside a TableCell with a colSpan like this:

    if (entity.relations.length === 0) {
    return (
        <TableBody>
            <TableRow>
                <TableCell colSpan={5}>
                    <Stack sx={{ width: '100%' }} spacing={2}>
                        <Alert severity="info">No Data !</Alert>
                    </Stack>
                </TableCell>
            </TableRow>
        </TableBody>
    );
}