Vaadin Grid - header text alignment

Flow
1

Hello,

Is it possible to align all header row besides the last one according to ColumnTextAlign value?
Code snippet:

final Grid<String> g = new Grid<>();
final Column<?> col = g.addColumn(String::toString).setHeader("Header 1").setTextAlign(ColumnTextAlign.END);

g.prependHeaderRow().getCell(col).setText("Header 0");
g.appendHeaderRow().getCell(col).setText("Header 2");
g.appendHeaderRow().getCell(col).setText("Header 3");

g.prependFooterRow().getCell(col).setText("Footer 0");
g.appendFooterRow().getCell(col).setText("Footer 1");
g.appendFooterRow().getCell(col).setText("Footer 2");

Result attached:

As you can see only last header cell (first footer) text is correctly aligned. Is it works as expected? If yes, I’d be grateful for some workaround.

Thanks in advance!

17810031.png

2

Unfortunately, ColumnTextAlign not works for header.

You can apply like this

grid.getColumnByKey(COLUMN).getElement().getStyle().set("text-align", "right");

It works for me.

3

Vaadin VerticalLayout can be used for alignment of Grid header content. Sample code for centered text header follows.

Label headerText = new Label("Header text");

VerticalLayout headerContent = new VerticalLayout();
headerContent.setSizeFull();
headerContent.setPadding(false);
headerContent.setSpacing(false);
headerContent.setMargin(false);
headerContent.add(headerText);
headerContent.setHorizontalComponentAlignment(FlexComponent.Alignment.CENTER, headerText);

Grid.Column<GridItem> column = grid.addColumn(...)
column.setHeader(headerContent)

It works for VaadinIcon grid header content as well. Just put it into the VerticalLayout with required component alignment set. I’m using Vaadin 14.1.25.

4

Tomas Novosad:
Vaadin VerticalLayout can be used for alignment of Grid header content. Sample code for centered text header follows.

Label headerText = new Label("Header text");

VerticalLayout headerContent = new VerticalLayout();
headerContent.setSizeFull();
headerContent.setPadding(false);
headerContent.setSpacing(false);
headerContent.setMargin(false);
headerContent.add(headerText);
headerContent.setHorizontalComponentAlignment(FlexComponent.Alignment.CENTER, headerText);

Grid.Column<GridItem> column = grid.addColumn(...)
column.setHeader(headerContent)

It works for VaadinIcon grid header content as well. Just put it into the VerticalLayout with required component alignment set. I’m using Vaadin 14.1.25.

Thanks for your input. Actually Im aware of such kind of workarounds. Unfortunately it does not work when sort indicator is visible.

5

This works for me either.

private Div getHeaderDiv( String text, String align) {
	Div div = new Div();
	div.setText( text);
	div.getElement().setAttribute( "align", align);
	return div;
}

grid.getColumnByKey("myKey").setHeader( getHeaderDiv("text", "right"));