Different Text Alignments in Different Grid Columns

Hello,

I want to make Grid two columns (first name, last name) aligned left and one column (savings) aligned right.

What I tried:

  • Add class name to Grid, as in method generateGrid1(Person persons). Added some CSS to shared-styles.html .
  • Add class name to Label, as in method generateGrid2(Person persons). Added some CSS to shared-styles.html .
  • Add class name to Column, but no luck, because there is no method addClassName(String) in class Column.

Where is my mistake? How should I achieve desired text alignment in Grid columns?

My source code:

MainView.java

package lt.brasiunas;

import com.vaadin.flow.component.dependency.HtmlImport;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.html.Label;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.data.renderer.NumberRenderer;
import com.vaadin.flow.router.Route;

@HtmlImport("styles/shared-styles.html")
@Route("")
public class MainView extends VerticalLayout {
	private static final long serialVersionUID = 2809511250673647773L;

	public Grid<Person> generateGrid1(Person[] items) {
		Grid<Person> grid = new Grid<>();
		grid.addColumn(Person::getFirstname_).setHeader("First name");
		grid.addColumn(Person::getLastname_).setHeader("Last name");
		grid.addColumn(new NumberRenderer<>(Person::getSavings_, "%.2f")).setHeader("Savings");
		grid.setItems(items);
		grid.addClassName("grid");
		return grid;
	}
	
	public Grid<Person> generateGrid2(Person[] items) {
		Grid<Person> grid = new Grid<>();
		grid.addColumn(Person::getFirstname_).setHeader("First name");
		grid.addColumn(Person::getLastname_).setHeader("Last name");
		
		grid.addColumn(new ComponentRenderer<Label, Person>(bean -> {
			if (bean instanceof Person) {
				Label lblSavings = new Label();
				lblSavings.addClassName("lblSavings");
				lblSavings.setSizeFull();
				if (bean.getSavings_() == null) {
					lblSavings.setText("");
				} else {
					lblSavings.setText(String.format("%.2f", bean.getSavings_()));
				}
				return lblSavings;
			} else {
				return new Label("Bad data type!");
			}
		})).setHeader("Savings");
		grid.setItems(items);
		return grid;
	}
	public MainView() {
		Person[] persons = {
				new Person("Matthew", "Wells", 0.5d),
				new Person("Carlos", "Cordero", 1.51d),
				new Person("Ganzeb", "Shumi", 12.3),
				new Person("Bilisuma", "Shugi", 459d),
				new Person("Elena", "Romagnolo", 123.45d),
				new Person("Tejitu", "Daba", 12.2d),
		};
		
		add(
				new Label("Grid version 1"),
				generateGrid1(persons),
				new Label("Grid version 2"),
				generateGrid2(persons)
		);
    }
}

Person.java

package lt.brasiunas;

public class Person {
	private String firstname_;
	private String lastname_;
	private Double savings_;
	
	public Person(String firstname_, String lastname_, Double savings_) {
		this.firstname_ = firstname_;
		this.lastname_ = lastname_;
		this.savings_ = savings_;
	}

	public String getFirstname_() {
		return firstname_;
	}

	public String getLastname_() {
		return lastname_;
	}

	public Double getSavings_() {
		return savings_;
	}
}

shared-styles.html

<custom-style>
    <!-- This is where your App's styling should go. You can use .css files too. -->
    <style>
    	.grid {
    		text-align: right;
    	}
    	
		.lblSavings {
			text-align: right;
			background-color: #FFFF00;
		}
    </style>
</custom-style>

I attached two pictures:

  • How I want alignment to look like.
  • What alignment now I have in a web browser.
    17163109.png
    17163112.png

As far as I can tell, that should work. Can you check with browser developer tools if the style name is applied properly and if you can add the text-align: right style manually?

-Olli

Test no.1.
Checked it with browser developer tools. I guess, that class “lblSavings” is interpreted ( screen-inspector-loaded.png ). I tried to add/modify/delete some values ( screen-inspector-modified.png ). It looks like some values are interpreted (background-color, font-size) and some are not (width, min-width, text-align).

Test no.2.
Tried to remove “text-align: right;” from shared-styles.html (line number 9, nine). Then tried to add “text-align: right;” manually through developer tools. That didn’t help either.
17163625.png
17163628.png