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>