getting header mouse click location in a table


I would like to make a custom table. What I want to do is show a popup menu when the user clicks on a header. I would like the popup menu to ‘replace’ or cover up the existing header.

So, if the header looks like this:


I want a menu to popup and show a context menu that might look something like:

Sort >
Filter >

Thus, the popup has to be positioned exactly as to where the header is.

Of course, the problem I’m having is to position the popup menu where it should go. With the HeaderClickListener, the component that I get back is the table itself, not the header, so I cannot determine where the top left corner of the header is (which would allow me to show the popup where it needs to be to cover the header).

I see there is a:

private void fireHeaderClickedEvent(Event event) {
            if (client.hasEventListeners(VScrollTable.this,
                    HEADER_CLICK_EVENT_ID)) {
                MouseEventDetails details = new MouseEventDetails(event);
                client.updateVariable(paintableId, "headerClickEvent",
                        details.toString(), false);
                client.updateVariable(paintableId, "headerClickCID", cid, true);

and I’m pretty sure that the following would make it relative to the header cell:

 MouseEventDetails details = new MouseEventDetails(event[b]
, getElement()

but I’m not sure how to do it. Everything in VScrollTable is pretty locked down and I can’t get to the table header itself/override anywhere, do I need to check out the entire source code tree to try this? This is my first custom component so I would like to make sure I’m not missing something. Are there other worthwhile options/approaches I should consider?