Vaadin Connect Layout и DataProvider

Question

Я хотел бы отобразить компоненты в макете в зависимости от нескольких фильтров. Макет не поддерживает добавление DataProvider. Как можно сопоставить FilterablePageableDataProvider с макетом?

@PageTitle(VIEW_RECIPES_TITLE)
@UIScope
@Route(value = PAGE_RECIPES, layout = MainView.class)
public class RecipesView extends VerticalLayout implements DataProviderListener<Cookbook> {

    private final CookbookService cookbookService;
    private final TextField nameFilter;
    private final VerticalLayout layout;
    private final FilterablePageableDataProvider<Cookbook, Void> dataProvider;

    @Autowired
    public RecipesView(CookbookService cookbookService) {
        this.cookbookService = cookbookService;

        layout = new VerticalLayout();
        layout.setSizeFull();
        setSizeFull();

        dataProvider = new FilterablePageableDataProvider<Cookbook, Void>() {
            @Override
            protected Page<Cookbook> fetchFromBackEnd(Query<Cookbook, Void> query, Pageable pageable) {
                return cookbookService.findByNameLikeWithEagerRelationships(getRepoFilter(), pageable);
            }

            @Override
            protected int sizeInBackEnd(Query<Cookbook, Void> query) {
                return cookbookService.findByNameLikeWithEagerRelationships(getRepoFilter(), PageRequest.of(query.getOffset(), query.getLimit())).getNumberOfElements();
            }

            private String getRepoFilter() {
                String filter = nameFilter.getValue();
                return "%" + filter + "%";
            }

            @Override
            protected List<QuerySortOrder> getDefaultSortOrders() {
                return new QuerySortOrderBuilder().thenAsc("name").build();
            }

        };

        nameFilter = new TextField();
        nameFilter.setPlaceholder("Name...");
        nameFilter.addValueChangeListener(e -> dataProvider.refreshAll());

        dataProvider.addDataProviderListener(this);

        for (int i = 0; i < 7; i++) {
            layout.add(createCard(i));
        }

        add(nameFilter, layout);

    }

    private Component createCard(int i) {
        return new Div(new Text("Hello world " + i));
    }

    @Override
    public void onDataChange(DataChangeEvent<Cookbook> event) {
        if (layout != null) {
            layout.removeAll();
            for (int i = 0; i < 7; i++) {
                layout.add(createCard(i));
            }
        }
    }
}

Код содержит dataProvider для службы, и я попытался поиграть с addDataProviderListener, но он не работает. Моя идея заключалась в том, чтобы добавить из макета, если я получу ChangeEvent (соответственно удалить) - но событие не содержит эту информацию. Есть ли какой-то картограф для Layouts и DataProvider?