[FIXED] How to add spacing between rows in material UI/React?

Issue

I am trying to add some spacing between each row in my table in MUI. However when adding borderSpacing: '0px 10px!important' and borderCollapse: 'separate!important', nothing happens. How can I add spacing between each row? This normally works fine in HTML and CSS so therefor I am unsure how to solve in mui. Thanks [![This is my goal][1]][1]

import React from 'react'
import { Container, Table, TableCell, TableHead, TableRow, Paper,TableBody, Avatar, Typography,Box,TableContainer } from '@mui/material'
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(() => ({
    table: {
        minWidth: 650,
        borderCollapse: 'separate!important',
        borderSpacing: '0px 10px!important'
    }
}))
const MyTable = () => {
    const classes = useStyles();
    return (
        <React.Fragment>
            <Container maxWidth={"lg"} sx={{mt:"0.5%"}}>
                <TableContainer className={classes.tableContainer} component={Paper}>
                    <Table className={classes.table}>
                        <TableHead>
                            <TableRow>
                                <TableCell>SOMETHING</TableCell>
                                <TableCell>ELSE</TableCell>
                                <TableCell>TO</TableCell>
                                <TableCell>SORT</TableCell>
                                <TableCell></TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                            <TableRow >
                                <TableCell><Box sx={{display:"flex",justifyContent:"space-around",alignItems:"center"}}><Avatar></Avatar>|<Typography>NAME</Typography></Box></TableCell>
                                <TableCell>AGE</TableCell>
                                <TableCell>BOOK</TableCell>
                                <TableCell>SCHOOL</TableCell>
                                <TableCell>BUTTON</TableCell>
                            </TableRow>
                        </TableBody>
                    </Table>
                </TableContainer>
            </Container>
        </React.Fragment>
    )
}

export default MyTable
'''


  [1]: https://i.stack.imgur.com/FbDjm.png

Solution

It doesn't seem to be a feature in this component. You can achieve it by overriding some css as follow :

.MuiTableContainer-root {
  box-shadow: none;
}

.MuiTable-root{
  border-collapse: separate;
  border-spacing: 0 10px;
  border: transparent;
}

.MuiTable-root th, .MuiTable-root td {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

Note that you have to create the border yourelf now by adding it to the td and th. Also, think about encapsulating if you don't want this modification to be global.

Answered By - Quentin Grisel

Answer Checked By - Katrina (PHPFixing Volunteer)