Clickable icons in a table header

I would like to create a table that would show two icons in each column header, next to the column name: one for filtering and one for sorting. By clicking on the filtering icon the user would be able to enter a filter value for the column ( in a separate popup window, not part of my question ) and the other one would ( obviously ) sort the table. Is it somehow possible to do it? I only found the “decorative” icon and one header listener…

You can’t make an icon which is clickable for the standard table header. Either you use the HeaderClickListener which gets called when you click anywhere on the header (you can distinguish which column it was using the event) or you use
Fakeheaders
which are basically Vaadin layouts in which you can add the components you want.

Yes, up to now we have used the HeaderClickListener because we were required to show only the filtering icon in each column header but now we have to have two icons for each column so it is not a solution anymore. Fakeheaders are nice but from what I understand this solution requires that the columns have fixed width, doesn’t it?

Yes,I think the column width is fixed when using fakeheaders (although i never used them myself but it looks like it from the code). If you can’t do that i have two recommendations for you:

  1. Vote for/Watch this ticket
    #5542
  2. Try using the Overlay Add-On (Unfortunately no Vaadin 7 support yet and i don’t know if there is a way to replicate it maybe using absolutelayout)

Otherwise i don’t think there’s much to do in that regard. You could try to somehow find a workaround which probably won’t look so nice but still has the functionality (e.g.: a window, which contains the buttons/icons, that opens when you click the header)