Open isabellachen opened 7 months ago
hi @isabellachen, apologies, I just saw this notification 🤦♂️ any chance you have found the solution?
At the moment, here's how I think we could do so: https://codesandbox.io/p/devbox/x7skdc?file=%2Fsrc%2Fstyles.css%3A4%2C27
{
prop: "score",
title: "Score",
isSortable: true,
thProps: {
className: "hoverable",
},
headerCell: (sortIcon, sortState) => (
<>
Score2
<span>{sortIcon}</span>
<div className="popover">Test popover</div>
</>
),
},
Then, in CSS:
.hoverable > .popover {
display: none;
padding: 4px;
border: 1px solid black;
position: absolute;
}
.hoverable:hover > .popover {
display: block;
position: absolute;
}
(I think similar approach could be used with similar libraries as well, e.g. Popper.js)
Is it possible to do a custom header cell? For example, to wrap the header cell in a Popover component, so when the user hovers over the popover, they can see a tooltip explaining some caveats about the column data (e.g. data is an estimate).
Thank you!