如何解决在表格单元格内使用tippyjs-react
我正在尝试在表格单元格中使用 tippyjs-react,但没有出现工具提示。
我在 Cell 的 React Table 选项中添加了工具提示:
Cell: ({ value }) => {
return (
<div>
<Tippy content="Tooltip content">
<span>{value}</span>
</Tippy>
</div>
);
}
解决方法
问题在于,在您的 Table
组件中,您将 columns
更改为呈现工具提示,但您在调用 useTable
之后执行此操作。
因此,一个简单的解决方法是将此逻辑放在 useTable
调用之前:
function Table({ columns,data }) {
for (let i = 0; i < columns.length; i++) {
columns[i].columns = columns[i].columns.map((column) => ({
...column,Cell: ({ value }) => {
return (
<div>
<Tippy content="Tooltip content">
<span>{value}</span>
</Tippy>
</div>
);
},}));
}
const {
getTableProps,getTableBodyProps,headerGroups,rows,prepareRow,} = useTable({
columns,data,});
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row,i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return <td {...cell.getCellProps()}>{cell.render("Cell")}</td>;
})}
</tr>
);
})}
</tbody>
</table>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。