Custom HTML for header cell

[isabellachen]

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!

[imballinst]

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)