header Grid 中的文本可以换行吗

Question

我添加了一个 Gird 列，并希望在 header 列中显示数据名称和数据单位：

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

文本“数据名称（数据单元）”显示在一行中。

如果我需要以锯齿线显示Data Unit，如何修改代码？以下案例失败：

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);

Answer 1

你可以这样做：

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

Answer 2

也许这有帮助：

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);

header Grid 中的文本可以换行吗

Can header text in Grid change line

header

grid

vaadin