I am trying to make the entire contents of my table cells clickable (for routing to elsewhere in my app; the routing works fine).
I have succeeded in removing the unclickable horizontal space within the row between by explicitly declaring padding: 0
in my tableRow
styling overrides (which already seems excessive).
And I have succeeded in removing all of the unclickable space within a cell in the case that the child
styling is directly accessed and overridden, eg using '& .MuiTableCell-root:first-child'
But I still have unclickable space on the top and bottom of some of the cells when I do not directly access the child.
Why?
I have tried inspecting element to narrow down the root cause; it seemed that I was close and just had to add some "& .MuiTableCell-sizeSmall"
specific styling. But even when I set padding: 0
in tableRow
using "& .MuiTableCell-sizeSmall"
there is no effect and the vertical space between rows remains unclickable.
//Styling
const useStyles = makeStyles(theme => ({
table: {
minWidth: 650,
position: 'relative',
fontSize: 10
},
largeIcon: {
width: 60,
height: 60
},
tableContainer: {
minHeight: 320
},
tableBodyContainer: {
minHeight: 265
},
tableHeadRow: {
'& .MuiTableCell-root': {
borderRight: `1px solid ${COLORS.WHITE}`,
borderBottom: `none`,
padding: '8px 5px 8px',
fontSize: 10,
cursor: 'pointer'
}
},
arrow: {
color: theme.palette.grey[500]
},
arrowActive: {
transform: 'rotate(-180deg)',
color: theme.palette.primary.main,
display: 'inline-block'
},
tableRow: {
'& .MuiTableCell-root': {
borderRight: `1px solid ${theme.palette.grey[200]}`,
borderBottom: 'none',
minWidth: 25,
padding: 0
},
'& .MuiTableCell-root:first-child': {
border: 'none',
padding: 0
},
'& .MuiTableCell-sizeSmall': {
padding: 0
}
},
selectedRow: {
backgroundColor: `${COLORS.SECONDARY} !important`,
'& .MuiTableCell-root': {
color: COLORS.WHITE
}
}
}));
//table code
return (
<div className={classes.tableContainer}>
<TableContainer className={classes.tableBodyContainer}>
<Table className={classes.table} size="small">
<TableHead>
<TableRow className={classes.tableHeadRow}>
<TableCell />
{tableHeadElements.map(e => (
<TableCell key={e.key} align="center">
{e.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{folders?.items.map((folder: IFolderDTO, index: number) => {
const { id, name, updatedAt } = folder;
return (
<TableRow
className={classes.tableRow}
classes={{ selected: classes.selectedRow }}
selected={selectedRow === id}
onClick={() => setSelectedRow(id)}
key={index}
>
<TableCell align="center">
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
<Box>
<IconButton color="default" size={'medium'}>
<FolderIcon fontSize="default" />
</IconButton>
</Box>
</Link>
</TableCell>
{[name, new Date(updatedAt)].map(cell => (
<TableCell key={index} align="center">
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
<Box>{getCorrectFormat(cell)}</Box>
</Link>
</TableCell>
))}
<FolderActionsMenu
folderId={id}
onDeleteFolder={onDeleteFolder}
openDialogWithId={openDialogWithId}
/>
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<FolderFormDialog />
</div>
);
};
may you need to use A simple example of a dense table with no frills?
import * as 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';
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
const rows = [
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
createData('Eclair', 262, 16.0, 24, 6.0),
createData('Cupcake', 305, 3.7, 67, 4.3),
createData('Gingerbread', 356, 16.0, 49, 3.9),
];
export default function DenseTable() {
return (
<TableContainer component={Paper}>
<Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Protein (g)</TableCell>
</TableRow>
</TableHead>
<TableBody>
{rows.map((row) => (
<TableRow
key={row.name}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.name}
</TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">{row.protein}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.