Can header text in Grid change line

user_18022805 0
Viewed 84

I add a Gird column and want to display Data Name and Data Unit in in column header:

grid.addColumn("v1").setWidth("20%").setHeader("Data Name (Data Unit)").setSortable(false);

The text "Data Name (Data Unit)" is displayed in one line.

If I need to display Data Unit in a serperated line, how to modify the code? Following cases are failed:

grid.addColumn("v1").setWidth("20%").setHeader("Data Name \n(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name \r(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name <br>(Data Unit)").setSortable(false); 
grid.addColumn("v1").setWidth("20%").setHeader("Data Name <br/>(Data Unit)").setSortable(false);
vaadin header grid
2 Answers

You could do something like:

.setHeader(new Html("<span>Data Name <br>(Data Unit)</span>"))
user_165312810

Maybe this help:

Div div = new Div();
div.setText("Data Name\n(Data Unit)");
div.getElement().setAttribute("style", "white-space: pre-wrap;");       
grid.addColumn("v1").setWidth("20%").setHeader(div).setSortable(false);
user_10591040
Related