Right-align column contents in Vaadin Grid?

Question

In the new Vaadin Grid widget (alternative to venerable Table), how does one right-align numbers or other content in a column?

Answer 1

The simplest way I can think of is to define your own CSS classes and style generator, pretty much similar to what I'd had done when working with tables.

@Theme("mytheme")
@Widgetset("com.matritza.MyAppWidgetset")
public class MyUI extends UI {

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
        // meh, default stuff
    }

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        // create a grid
        Grid grid = new Grid("Grid test");

        // create a specific container for the grid to hold our persons
        BeanItemContainer<Person> container = new BeanItemContainer<>(Person.class);
        grid.setContainerDataSource(container);

        // define our own style generator
        grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
            @Override
            public String getStyle(Grid.CellReference cellReference) {
                if ("age".equals(cellReference.getPropertyId())) {
                    // when the current cell is number such as age, align text to right
                    return "rightAligned";
                } else {
                    // otherwise, align text to left
                    return "leftAligned";
                }
            }
        });

        // generate some dummy data
        for (int i = 0; i < 10; i++) {
            container.addItem(new Person("Name " + i, "Surname " + i, i));
        }

        layout.addComponent(grid);
    }


    // basic class to populate the grid in a fast & simple way
    public class Person {
        private String name;
        private String surname;
        private int age;

        private Person(String name, String surname, int age) {
            this.name = name;
            this.surname = surname;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getSurname() {
            return surname;
        }

        public void setSurname(String surname) {
            this.surname = surname;
        }

        public int getAge() {
            return age;
        }

        public void setAge(int age) {
            this.age = age;
        }
    }
}

And the basic CSS styles

@mixin mytheme {
    @include valo;

    // Insert your own theme rules here
    .leftAligned {
      text-align: left;
    }

    .rightAligned {
      text-align: right;
    }
}

And you should see something like

By the way, in Java 8 and later, the new Lambda syntax for that style generator would be:

grid.setCellStyleGenerator(( Grid.CellReference cellReference ) -> {
    if ( "age".equals( cellReference.getPropertyId() ) ) {
        // when the current cell is number such as age, align text to right
        return "rightAligned";
    } else {
        // otherwise, align text to left
        return "leftAligned";
    }
});

Answer 2

One can also use already present styles like v-align-right, v-align-middle, etc. Just see what themes like Valo already contain, and extend existing themes only when needed.

Here's simple example how one could implement cell generator with regexp (matching one or multiple fields based on name of field)

public class RegexpCellStyleGenerator implements CellStyleGenerator {

private String regex = ".*"; // defaults all
String style = "v-align-right"; // default is here just as example

// special version useful only when one wants to style all fields inside grid
public RegexpCellStyleGenerator(String style) {
    super();
    this.style = style;
}

public RegexpCellStyleGenerator(String regex, String style) {
    super();
    this.regex = regex;
    this.style = style;
}

@Override
public String getStyle(CellReference cellReference) {
    String propertyId = cellReference.getPropertyId().toString();
    if (propertyId.matches(regex)) {
        return style;
    }
    return null;
}

and as this is only partially useful as most grids have multiple fields composite generator could be handy

public class CompositeCellStyleGenerator implements CellStyleGenerator {

List<CellStyleGenerator> generators = new ArrayList<>();

public CompositeCellStyleGenerator() {}

public void addCellStyleGenerator(CellStyleGenerator generator) {
    generators.add(generator);
}

@Override
public String getStyle(CellReference cellReference) {
    List<String> styles = new ArrayList<>();
    for (CellStyleGenerator generator : generators) {
        String style = generator.getStyle(cellReference);
        if (style != null) {
            styles.add(style);
        }
    }
    if (!styles.isEmpty()) {
        return styles.stream().collect(Collectors.joining(" "));
    }
    return null;
}

Composite generator joins all styles together and can be used like this. If there's multiple styles for one column both are applied.

    RegexpCellStyleGenerator yearGenerator = new RegexpCellStyleGenerator("yearOfFoundation", "v-align-right");
    RegexpCellStyleGenerator nameGenerator = new RegexpCellStyleGenerator("name", "v-align-center");
    RegexpCellStyleGenerator nameGenerator2 = new RegexpCellStyleGenerator("name", "v-label-huge");

    CompositeCellStyleGenerator compositeGenerator = new CompositeCellStyleGenerator();

    compositeGenerator.addCellStyleGenerator(yearGenerator);
    compositeGenerator.addCellStyleGenerator(nameGenerator);
    compositeGenerator.addCellStyleGenerator(nameGenerator2);

    grid.setCellStyleGenerator(compositeGenerator);

Note that composite generator can use generic generators like one with regexp definitions and more complex use case specific ones.

Hope this helps those who try to find easy way to style cells. Happy Experimenting.