[英]Make entire contents of a TableCell into a link conditionally
I've made a table with a folder icon that is clickable link.我制作了一个带有可点击链接的文件夹图标的表格。 To improve UX, I'd like to make the clickable area of the link bigger.
为了改善用户体验,我想让链接的可点击区域更大。 I would like to make the entire contents of 3 of 4 of the cells in a row should be clickable as a link.
我想让一行中 4 个单元格中的 3 个单元格的全部内容作为链接可点击。
Here's what I mean这就是我的意思
I can successfully make each cell contents (as in icons or text) clickable, but that still represents only a small area in each cell.我可以成功地使每个单元格内容(如图标或文本)可点击,但这仍然只代表每个单元格中的一小部分区域。
I've tried wrapping the entire cell contents in the link, but it leads to messy mapping, and still does not make the entire contents of the cell clickable.我尝试将整个单元格内容包装在链接中,但它会导致映射混乱,并且仍然无法使单元格的整个内容可点击。
Here's where I'm at so far这是我目前所处的位置
<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}
>
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
<TableCell align="center">
<IconButton color="default" size={'small'}>
<FolderIcon fontSize="default" />
</IconButton>
</TableCell>
</Link>
{[name, new Date(updatedAt)].map(cell => (
<TableCell key={index} align="center">
<Link to={APP_DASHBOARD_CHILD_FOLDER_CONTENTS_PATH(id)}>
{getCorrectFormat(cell)}
</Link>
</TableCell>
))}
<FolderActionsMenu
folderId={id}
onDeleteFolder={onDeleteFolder}
openDialogWithId={openDialogWithId}
/>
</TableRow>
);
})}
</TableBody>
Thanks!谢谢!
You can create a header cell data array that describes anything you need to render the TableCell
:您可以创建一个标题单元数据数组来描述呈现
TableCell
所需的任何内容:
const headerCellData = [
{
name: 'Calories',
link: '/',
},
{
name: 'Fat (g)',
link: '/?filter=fat',
align: 'right',
},
{
name: 'Carbs (g)',
link: '/?filter=carbs',
align: 'right',
},
{
name: 'Protein (g)',
align: 'right',
},
];
Then map each data item to the TableCell
:然后将每个数据项映射到
TableCell
:
<TableHead>
<TableRow>
{headerCellData.map((c) => (
<TableCell align={c.align}>
{c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
</TableCell>
))}
</TableRow>
</TableHead>
make the entire contents of the cell clickable
使单元格的全部内容可点击
If you want the entire cell clickable (not just the text), you need to play around with CSS a little bit.如果您希望整个单元格可点击(不仅仅是文本),您需要稍微使用 CSS。 Remove the padding of
TableCell
where it's unclickable and set the padding of the container that holds the link to 16px
which is the padding of the TableCell
we just removed:删除不可点击的
TableCell
的内边距,并将保存链接的容器的内边距设置为16px
,这是我们刚刚删除的TableCell
的内边距:
<TableCell align={c.align} sx={{ padding: 0 }}>
<Box sx={{ padding: '16px' }}>
{c.link ? <Link to={c.link}>{c.name}</Link> : c.name}
</Box>
</TableCell>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.