Opening a new window on clicking of table Header Icon

Hello All,

I am trying to open a window on clicking table header icon,

Secnario:
I have created atable with three columns, one of the column i have set header icon, here i would like to open a new window when i click on that header icon. here is my sample code.

problem:
here if i click on anywhere on the column header the window is opening, but i need, window should only open when i clik on header icon (view.png).

tiuTable.addContainerProperty(“IMO Class”, String.class, null);
tiuTable.setColumnIcon(“IMO Class”, new ThemeResource(“images/table_images/view.png”));

tiuTable.addHeaderClickListener(new Table.HeaderClickListener() {
public void headerClick(Table.HeaderClickEvent event) {
if(tiuTable.getColumnIcon(event.getPropertyId())!=null){
class MyAssSubWin extends Window {
public MyAssSubWin() {
super(“IMO Class Details”);
VerticalLayout content = new VerticalLayout();
Label myLabel=new Label(“Sorry no data available”);
content.addComponent(myLabel);
setContent(content);
}
}

               MyAssSubWin assignMsdsPopup = new MyAssSubWin();
               UI.getCurrent().addWindow(assignMsdsPopup);
               assignMsdsPopup.setModal(true);
               assignMsdsPopup.addStyleName("panelW");

}
} });

Here i have implemented header click listener, but is there any option to implemnet header icon click listener in vaadin?
could you help me on this ? i am not sure is it possile or not ?

here i have attached the screenshot my table header.

Thanks!
kiran
26441.png

Hi Kiran,

Here: https://vaadin.com/forum/#!/thread/774477/8020605 yopu can find a discussion regarding the possibility of adding a component to the header of a table. As you can see this is not simple. One approach that is mentioned here is to use a “fake header”. The bottom line is that you cannot add a component to the header of the table using core Vaadin.

Have you considered using a grid instead of table? Using a grid component, adding components to the header row is quite simple. And to achieve your goal of a “clickable icon” you can simply use a styled button. Here is a short example:

        Grid grid = new Grid();

        grid.addColumn("Column 1", String.class);
        grid.addColumn("Column 2", String.class);

        HorizontalLayout header = new HorizontalLayout();

        Button button = new Button();
        button.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                Notification.show("World!");
            }
        });
        button.addStyleName(ValoTheme.BUTTON_ICON_ONLY);
        button.addStyleName(ValoTheme.BUTTON_BORDERLESS);
        button.setIcon(FontAwesome.BANK);
        header.addComponent(button);

        Label label = new Label("My Label");
        header.addComponent(label);
        header.setComponentAlignment(label, Alignment.MIDDLE_CENTER);

        grid.getDefaultHeaderRow().getCell("Column 1").setComponent(header);

I hope this helps.

Best regards,

Henrik

Hi,

Is it possible to add multiple button inside column?

Thanks for help.

BR.

Timot

anyone can help me?

Hi,

if you’re using a Table, you can just add a HorizontalLayout with the buttons in the cell. If you’re using Grid, check out the GridActionRenderer:
https://vaadin.com/directory#!addon/gridactionrenderer-add-on

-Olli

Hi Oli,

Thanks for help. I use Grid. i show how to want do it:

is it possible?
28904.png

Yes. If you want to add a component in the Grid header, just use grid.getDefaultHeaderRow().getCell(propertyId).setComponent(yourHeaderColumnComponent);
where propertyId is the column’s property id and yourHeaderColumnComponent is the component (like a HorizontalLayout containing some buttons) you want to show.

-Olli

I want to use a component of all the column header

You can repeat that above line of code for each column. You can get all of the columns by grid.getColumns() and each Column in the returned list has a getPropertyId() method which you can use to get the HeaderCell like above.

-Olli

can you give me a examples? :slight_smile:

Sure. Something like this:

HeaderRow hr = grid.getDefaultHeaderRow();
grid.getColumns().forEach(column -> {
    HeaderCell cell = hr.getCell(column.getPropertyId());
    HorizontalLayout headerCellLayout = new HorizontalLayout();
    Button button = new Button("Hi");
    button.addClickListener(event -> Notification.show("Button pressed"));
    Label label = new Label("I'm a header");
    headerCellLayout.addComponents(button, label);
    cell.setComponent(headerCellLayout);
});