Add a Static Grid

Learn how to populate a grid with static data.

Copy-Paste into Your Project
Getting the Data
Populating the Grid
Filtering
Sorting

Static data refers to a fixed collection of objects held entirely in memory — such as reference data (countries, categories, status types) that is either hardcoded or loaded once at application startup. Java enum constants also fall into this category.

Because the full dataset is available in memory, the static data is loaded into the grid at once. Filtering and sorting can be performed without additional backend calls.

This guide starts with a complete example that you can copy-paste into your project if you want. It then breaks down the example into sections that explain how to populate, filter, and sort the grid. The guide does not cover setting up the Grid component itself; for that, see the Grid component documentation.

Copy-Paste into Your Project

If you want to quickly try out a static grid in your Vaadin application, copy-paste the following code into your project:

Source code

StaticGridView.javapackage com.vaadin.demo.buildingapps.grid;

import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("building-apps/grid/static-grid")
public class StaticGridView extends VerticalLayout {

    StaticGridView() {
        // In a real application, this would be injected or
        // retrieved via a service locator
        var service = new ItemService();

        // Create components
        var filterField = new TextField();
        filterField.setPlaceholder("Filter items");
        // Update the filter value as soon as the user stops typing
        filterField.setValueChangeMode(ValueChangeMode.LAZY);

        var grid = new Grid<Item>();
        grid.addColumn(Item::id).setHeader("ID").setSortable(true);
        grid.addColumn(Item::name).setHeader("Name").setSortable(true);

        // Set up data provider with filtering
        var dataView = grid.setItems(service.getAllItems());
        // Set the filter whenever the text field changes
        filterField.addValueChangeListener(e -> {
            var filterString = e.getValue().toLowerCase();
            if (filterString.isBlank()) {
                // No string -> show all items
                dataView.removeFilters();
            } else {
                dataView.setFilter(item -> item.name().toLowerCase()
                        .contains(filterString));
            }
        });

        // Layout components
        add(filterField);
        add(grid);
        setSizeFull();
    }

    // In a real application, this would be in its own file
    static class ItemService {
        private static final List<Item> ITEMS = List.of(
                new Item(1, "Denmark"),
                new Item(2, "Finland"),
                new Item(3, "Norway"),
                new Item(4, "Iceland"),
                new Item(5, "Sweden"),
                new Item(6, "Estonia"),
                new Item(7, "Germany"));

        public List<Item> getAllItems() {
            return ITEMS;
        }
    }

    record Item(long id, String name) {
    }
}

For more detailed walk-through of the example code, continue reading below.

Getting the Data

In this example, the static data is a list of record objects returned by a simple service class:

Source code

StaticGridView.javapackage com.vaadin.demo.buildingapps.grid;

import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("building-apps/grid/static-grid")
public class StaticGridView extends VerticalLayout {

    StaticGridView() {
        // In a real application, this would be injected or
        // retrieved via a service locator
        var service = new ItemService();

        // Create components
        var filterField = new TextField();
        filterField.setPlaceholder("Filter items");
        // Update the filter value as soon as the user stops typing
        filterField.setValueChangeMode(ValueChangeMode.LAZY);

        var grid = new Grid<Item>();
        grid.addColumn(Item::id).setHeader("ID").setSortable(true);
        grid.addColumn(Item::name).setHeader("Name").setSortable(true);

        // Set up data provider with filtering
        var dataView = grid.setItems(service.getAllItems());
        // Set the filter whenever the text field changes
        filterField.addValueChangeListener(e -> {
            var filterString = e.getValue().toLowerCase();
            if (filterString.isBlank()) {
                // No string -> show all items
                dataView.removeFilters();
            } else {
                dataView.setFilter(item -> item.name().toLowerCase()
                        .contains(filterString));
            }
        });

        // Layout components
        add(filterField);
        add(grid);
        setSizeFull();
    }

    // In a real application, this would be in its own file
    static class ItemService {
        private static final List<Item> ITEMS = List.of(
                new Item(1, "Denmark"),
                new Item(2, "Finland"),
                new Item(3, "Norway"),
                new Item(4, "Iceland"),
                new Item(5, "Sweden"),
                new Item(6, "Estonia"),
                new Item(7, "Germany"));

        public List<Item> getAllItems() {
            return ITEMS;
        }
    }

    record Item(long id, String name) {
    }
}

In a real world application, the service would be in its own file. The data could be statically defined as in this example, or loaded from a file or a database during application startup.

Populating the Grid

You populate the grid with static data by passing the collection of items to the grid’s setItems() method:

Source code

StaticGridView.javapackage com.vaadin.demo.buildingapps.grid;

import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("building-apps/grid/static-grid")
public class StaticGridView extends VerticalLayout {

    StaticGridView() {
        // In a real application, this would be injected or
        // retrieved via a service locator
        var service = new ItemService();

        // Create components
        var filterField = new TextField();
        filterField.setPlaceholder("Filter items");
        // Update the filter value as soon as the user stops typing
        filterField.setValueChangeMode(ValueChangeMode.LAZY);

        var grid = new Grid<Item>();
        grid.addColumn(Item::id).setHeader("ID").setSortable(true);
        grid.addColumn(Item::name).setHeader("Name").setSortable(true);

        // Set up data provider with filtering
        var dataView = grid.setItems(service.getAllItems());
        // Set the filter whenever the text field changes
        filterField.addValueChangeListener(e -> {
            var filterString = e.getValue().toLowerCase();
            if (filterString.isBlank()) {
                // No string -> show all items
                dataView.removeFilters();
            } else {
                dataView.setFilter(item -> item.name().toLowerCase()
                        .contains(filterString));
            }
        });

        // Layout components
        add(filterField);
        add(grid);
        setSizeFull();
    }

    // In a real application, this would be in its own file
    static class ItemService {
        private static final List<Item> ITEMS = List.of(
                new Item(1, "Denmark"),
                new Item(2, "Finland"),
                new Item(3, "Norway"),
                new Item(4, "Iceland"),
                new Item(5, "Sweden"),
                new Item(6, "Estonia"),
                new Item(7, "Germany"));

        public List<Item> getAllItems() {
            return ITEMS;
        }
    }

    record Item(long id, String name) {
    }
}

The method returns a ListDataView object that you need if you want to filter the data. This is covered in the next section.

Filtering

To filter the grid, you need to add a filter to the ListDataView. A filter is a predicate that tests each item in the data set in memory. The filter is applied whenever the data view is refreshed, or when the filter itself is changed.

In this example, the filter checks whether the item’s name contains the filter string entered into the filter text field. If the filter string is blank, all items are shown:

Source code

StaticGridView.javapackage com.vaadin.demo.buildingapps.grid;

import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("building-apps/grid/static-grid")
public class StaticGridView extends VerticalLayout {

    StaticGridView() {
        // In a real application, this would be injected or
        // retrieved via a service locator
        var service = new ItemService();

        // Create components
        var filterField = new TextField();
        filterField.setPlaceholder("Filter items");
        // Update the filter value as soon as the user stops typing
        filterField.setValueChangeMode(ValueChangeMode.LAZY);

        var grid = new Grid<Item>();
        grid.addColumn(Item::id).setHeader("ID").setSortable(true);
        grid.addColumn(Item::name).setHeader("Name").setSortable(true);

        // Set up data provider with filtering
        var dataView = grid.setItems(service.getAllItems());
        // Set the filter whenever the text field changes
        filterField.addValueChangeListener(e -> {
            var filterString = e.getValue().toLowerCase();
            if (filterString.isBlank()) {
                // No string -> show all items
                dataView.removeFilters();
            } else {
                dataView.setFilter(item -> item.name().toLowerCase()
                        .contains(filterString));
            }
        });

        // Layout components
        add(filterField);
        add(grid);
        setSizeFull();
    }

    // In a real application, this would be in its own file
    static class ItemService {
        private static final List<Item> ITEMS = List.of(
                new Item(1, "Denmark"),
                new Item(2, "Finland"),
                new Item(3, "Norway"),
                new Item(4, "Iceland"),
                new Item(5, "Sweden"),
                new Item(6, "Estonia"),
                new Item(7, "Germany"));

        public List<Item> getAllItems() {
            return ITEMS;
        }
    }

    record Item(long id, String name) {
    }
}

Note	The predicate executes once for each item in the data set. Because of this, you should keep the predicate as simple and efficient as possible. For instance, in the example above, the filter string is converted outside the predicate to avoid doing it repeatedly for each item.

For more information about filtering, see the Grid component documentation.

Sorting

Sorting happens in the grid automatically, for every column that is marked as sortable:

Source code

StaticGridView.javapackage com.vaadin.demo.buildingapps.grid;

import java.util.List;

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.data.value.ValueChangeMode;
import com.vaadin.flow.router.Route;

@Route("building-apps/grid/static-grid")
public class StaticGridView extends VerticalLayout {

    StaticGridView() {
        // In a real application, this would be injected or
        // retrieved via a service locator
        var service = new ItemService();

        // Create components
        var filterField = new TextField();
        filterField.setPlaceholder("Filter items");
        // Update the filter value as soon as the user stops typing
        filterField.setValueChangeMode(ValueChangeMode.LAZY);

        var grid = new Grid<Item>();
        grid.addColumn(Item::id).setHeader("ID").setSortable(true);
        grid.addColumn(Item::name).setHeader("Name").setSortable(true);

        // Set up data provider with filtering
        var dataView = grid.setItems(service.getAllItems());
        // Set the filter whenever the text field changes
        filterField.addValueChangeListener(e -> {
            var filterString = e.getValue().toLowerCase();
            if (filterString.isBlank()) {
                // No string -> show all items
                dataView.removeFilters();
            } else {
                dataView.setFilter(item -> item.name().toLowerCase()
                        .contains(filterString));
            }
        });

        // Layout components
        add(filterField);
        add(grid);
        setSizeFull();
    }

    // In a real application, this would be in its own file
    static class ItemService {
        private static final List<Item> ITEMS = List.of(
                new Item(1, "Denmark"),
                new Item(2, "Finland"),
                new Item(3, "Norway"),
                new Item(4, "Iceland"),
                new Item(5, "Sweden"),
                new Item(6, "Estonia"),
                new Item(7, "Germany"));

        public List<Item> getAllItems() {
            return ITEMS;
        }
    }

    record Item(long id, String name) {
    }
}

For more information about sorting, see the Grid component documentation.

Docs

Docs

Add a Static Grid

Copy-Paste into Your Project

Getting the Data

Populating the Grid

Filtering

Sorting