在表单元格内使用tipyjs react

Question

我正试图在表单元格中使用tipyjs react，但工具提示没有出现。

我在React Table的Cell选项中添加了工具提示：

Cell: ({ value }) => {
return (
<div>
<Tippy content="Tooltip content">
<span>{value}</span>
</Tippy>
</div>
);
}

代码沙箱

Answer 1

问题是，在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>
);
}

沙箱示例