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:

  1. 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.
  2. 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).
  3. 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());
        }
    ...
  4. Compile the project, by selecting Build > Build Project in IntelliJ IDEA, and refresh your browser to see the changes.

    Grid with columns and rows
Vaadin is an open-source framework offering the fastest way to build web apps on Java backends
GET STARTED

Comments (18)

Matti Tahvonen
2 years ago Aug 05, 2019 6:38am
Teodor Iancu
2 years ago Aug 05, 2019 10:01am
Matti Tahvonen
2 years ago Aug 05, 2019 10:24am
Teodor Iancu
2 years ago Aug 05, 2019 10:43am
Teodor Iancu
2 years ago Aug 05, 2019 11:07am
Matti Tahvonen
2 years ago Aug 05, 2019 3:11pm
Alejandro Duarte
3 years ago Mar 22, 2019 7:13am
Olli Tietäväinen
3 years ago Mar 22, 2019 7:48am
Sebastian Heikamp
3 years ago Mar 21, 2019 9:27am
Alejandro Duarte
3 years ago Mar 21, 2019 10:48am
Alejandro Duarte
3 years ago Mar 01, 2019 11:24am
Matti Tahvonen
3 years ago Mar 01, 2019 11:26am
Matti Tahvonen
3 years ago Mar 01, 2019 11:27am