The read CRUD operation can be thought of as the action of showing all the User instances inside the Grid.

Since the Grid doesn't have any columns at this point, adding rows to it won't make any difference, so let's start by adding columns. The easiest way to add columns to a Grid is by passing the type of the bean (User) to the Grid constructor:

Grid grid = new Grid(User.class);

After this, we can add columns by using the property names in the bean. For example:

grid.setColumns("firstName", "lastName");

However, this is not type-safe. When manually adding columns to a Grid, a better approach is not to use the Grid(Class<T> beanType) constructor, and instead use a ValueProvider. Let's do this in the example application:

public class EditableGridCrud extends Composite {
    ...

    private void initBehavior() {
        grid.addColumn(User::getFirstName).setCaption("First name");
        grid.addColumn(User::getLastName).setCaption("Last name");
        grid.addColumn(User::getEmail).setCaption("Email");
        grid.addColumn(User::getPassword).setCaption("Password");
        grid.addColumn(User::isBlocked).setCaption("Blocked");
    }
 }

This is a better approach, since it's completely type-safe. The addColumn method accepts a ValueProvider, a functional interface compatible with any getter in the bean type. The addColumn method returns an instance of Grid.Column, from which we can configure any additional properties for it. In the previous snippet of code, we configured the column's caption. All the setXX methods return the same instance of Column, which allows you to chain calls to further configure the column. For example, you can set the column's caption and width as follows:

grid.addColumn(User::getFirstName)
    .setCaption("First name")
    .setWidth(150);

With the columns in place, we can now add rows to the Grid. This is as simple as calling the setItems(Collection) method, and passing a Collection of User instances. Since we will need to reload the content of the Grid after editing a row, it's a good idea to encapsulate the call to setItems as follows:

public class EditableGridCrud extends Composite {
    ...

    public EditableGridCrud() {
        initLayout();
        initBehavior();
        refresh();
    }

    private void refresh() {
        grid.setItems(UserRepository.findAll());
    }
    ...

}

There's a slight security problem at this point, and by "slight", I mean "major". Passwords are shown in plain text in the Grid. We want to keep the Password column, so that it plays nice with the Grid editor later, but we want to show a series of asterisks (********) instead of the actual passwords. This can be done through the Renderer interface. A Renderer is an extension that draws client-side representations of a value. We can use the provided TextRenderer implementation to change the text shown in the Password column as follows:

grid.addColumn(User::getPassword)
        .setCaption("Password")
        .setRenderer(user -> "********", new TextRenderer());

The setRenderer method accepts a ValueProvider and a Renderer. Instead of returning user.getPassword(), we return the "********" string, no matter what the value of the password is. TextRenderer will take the string, and draw it as text. There are many other Renderers that would take the value and draw it in many other forms; for example, as a Button or HTML. The following figure shows the implementations included with the framework: