By Vaadin

Part of tutorial series CRUD app tutorial

Listing Entities in a Grid

This part of the tutorial shows how to display data in a Grid component.

Adding the Domain Objects

Before getting into actual web development with Vaadin, we need to add the necessary domain objects and a dummy back end.

Copy or download the following three Java classes from GitHub and add them to your project:

CustomerStatus.java: This is a simple enum type.
Customer.java: This this is the main domain object, a basic Java bean that encapsulates data about a customer.
CustomerService.java: This is a simple service class that you can use to get and save Customer instances. Think of this class as the entry point to a dummy database.

Tip

A fast way to copy classes in IntelliJ IDEA is to use the clipboard. In the browser, select the content of the file and choose Edit > Copy. In IntelliJ IDEA, right-click org.vaadin.example in the Project view and select Paste. IntelliJ IDEA is smart enough to create a properly-named Java file automatically.

Note	The actual implementation of these classes is not relevant for this tutorial, but feel free to explore them. In a real-world application, you would most likely have something similar, but implemented with JPA, and EJB or Spring-managed beans, for example.

Showing Data in a Grid

When building UIs for data-centric applications, you frequently start by listing data from a back end. Vaadin offers several components and ways to do this. This tutorial uses the Grid component to present data in a table. The data comes from the dummy back end you added in the previous section.

To show the data in a Grid component:

In the MainView class, add a reference to the CustomerService class and introduce an instance variable of type Grid as follows:

...
public class MainView extends VerticalLayout {

    private CustomerService service = CustomerService.getInstance();
    private Grid<Customer> grid = new Grid<>(Customer.class);

    public MainView() {
        ...
    }
}

Tip	You can fix the compilation errors shown in red using the [Alt+Enter] (Windows) or [Option+Enter] (Mac) shortcut. Position the cursor right after the error in red (for example `Grid`) and then use the shortcut. Make sure to choose the correct class from the `org.vaadin` package.

The Grid component uses columns and rows to show data. Configure the columns by replacing the constructor of the MainView class with :

...
    public MainView() {
        grid.setColumns("firstName", "lastName", "status");

        add(grid);

        setSizeFull();
    }
...

setColumns configures the Grid to show the firstName, lastName, and status properties of the Customer class.
add(grid) adds the Grid to the VerticalLayout.

setSizeFull sets the height and width of the VerticalLayout to 100% so that it uses all the space available in the browser.

Tip	As an alternative, you can use the `addColumn(ValueProvider)` method to add columns in a type-safe manner. For example, to add a column for the `firstName` property, call `grid.addColumn(Customer::getFirstName)`.

At this point, the Grid columns are ready, but there are no rows yet. To add rows, use the setItems(Customer…) method. Since later in the tutorial you will need to refresh the rows, it makes sense to create a method for this now. Create a new updateList() method and call it from the constructor as follows:
```
...
    public MainView() {
        ...

        updateList();
    }

    public void updateList() {
        grid.setItems(service.findAll());
    }
...
```
Compile the project, by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes.

Setting up the Project - Vaadin CRUD tutorial part 1

Filtering Entities in a Grid - Vaadin CRUD tutorial part 3

Comments (18)

Süleyman Coskun

Hello, the links are not working. Can you update the links pls.

Teodor Iancu

It is posible to use two entitys (sql tables)in one grid?

Matti Tahvonen

Sure. Pick up some common superclass for the list that you assing to the Grid. Object can be the last resort. Then you can add custom columns if the common properties are not enough using the addColumn method.

Teodor Iancu

Thanks for the Tip, but unfortunately it doesn't work for me. Is there an example to see how to do exactly?

Thanks a lot

Matti Tahvonen

Hi!

@Route
public class MainView extends VerticalLayout {

    public MainView() {
        Grid<Object> grid = new Grid<>();
        grid.addColumn(o -> o.getClass().getSimpleName()).setHeader("object type");
        grid.addColumn(o -> o.toString()).setHeader("toString() representation");
        
        List<Object> data = new ArrayList<>();
        data.add(new Integer(5));
        data.add(new Double(1.2332));
        data.add(new String("foobar"));
        grid.setItems(data);
        add(grid);
    }
    
}

The result is a two column grid, pretty much like:

object type      toString() representation
Integer          5
Double           1.2332
String           foobar

Teodor Iancu

Thanks, but how is to do with two concrete entity like this ?

https://stackoverflow.com/questions/57345886/vaadin-flow-it-is-posible-to-list-two-entitys-in-one-grid-only-display-it

Teodor Iancu

I mean a different entity per column

Matti Tahvonen

Sure. You'll just need to do a proper join query (the best way depends on your backend, but you can do that even with plain JDBC API) and then define the columns dynamically like above, but from your query. In a gist below, you can see a trivial example how you can define the the columns directly from jdbc metadata.

https://gist.github.com/mstahv/b22fb63791132a3e4b33d2aef17a294b

Marco de Bie

Hi,

I try to understand this remark :

As an alternative, you can use the addColumn(ValueProvider) method to add columns in a type-safe manner. For example, to add a column for the firstName property, call grid.addColumn(Customer::getFirstName).

If I do that , so my code is like this :

grid.addColumn(Customer::getFirstName).setHeader("First Name");
grid.addColumn(Customer::getLastName).setHeader("Last Name");
grid.addColumn(Customer::getStatus).setHeader("Status");

add(grid);
setSizeFull();
updateList();

Now i get to see all the fields in customer in my grid plus firstname, lastname and status twice. I do not understand and can not find why?

Alejandro Duarte

Hi, good point. The new Grid<>(Customer.class); constructor automatically adds the columns. If you want to add columns manually, use the new Grid<>() constructor which doesn't add any columns.

Olli Tietäväinen

There are two differently behaving constructors in Grid.

The first one takes a class parameter: new Grid<Customer>(Customer.class);. This one will use Java reflection and scan the Customer.class class object to create columns for each of the available properties automatically. You can still add and remove columns after this.

The second constructor takes no parameters: new Grid<Customer>();. Using this constructor gives you no columns by default, so you need to add them to see any data in the Grid. This is where the various flavors of grid.addColumn() come in.

Srinivasa Babu

The links (https://raw.githubusercontent.com/vaadin/tutorial/vaadin10%2B/src/main/java/com/vaadin/starter/skeleton/backend/Customer.java) are not working. Seems to be broken or unavailable

Sebastian Heikamp

Looks like the resources were moved here.

Alejandro Duarte

Thanks for reporting. A fix is on its way.

Jonathan Google

Hey, why is it necessary to have the Customer.class defined like new Grid<>(Customer.class); ?

Alejandro Duarte

That constructor adds an initial set of columns with the corresponding column ids. This way you can configure the visible columns using these IDs (strings) like grid.setColumns("firstName", "lastName", "status"). The Grid() constructor doesn't add any columns, so you would need to use something like grid.addColumn(Customer:getFirstName).setHeader("First Name") to add the First Name column, for example.

Matti Tahvonen

"Type erasure" in Java makes it impossible for Grid to automatically detect properties (aka columns) without the actual class.

In the constructor that is optional though, but in that case you'll manually need to declare all columns, e.g.

grid.addColumn(Person:getFirstName).setCaption("First Name");

Matti Tahvonen

Eh:-) Alejanrdro was two seconds faster :-)

Listing Entities in a Grid

Adding the Domain Objects

Showing Data in a Grid

Comments (18)

Download Modern Web App Development Guide