Dfyjkt

I want to display two tabs (Providers and Products) in a Vaadin page. The Providers should contain a grid with one record.

I wrote the following code for this:

import java.util.ArrayList;
import java.util.List;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.tabs.Tab;
import com.vaadin.flow.component.tabs.Tabs;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout 

 public MainView() 
 final Text header = new Text("Header");
 add(header);

 final Tab productsTab = new Tab("Products");
 final Tab providersTab = new Tab("Providers");
 final Grid<LoanProvider> providersGrid = new Grid<>();
 providersGrid.addColumn(LoanProvider::getName).setHeader("Name");
 providersGrid.addColumn(LoanProvider::getRegions).setHeader("Regions");
 providersGrid.addColumn(LoanProvider::getUrl).setHeader("URL");
 providersGrid.setSizeFull();
 providersTab.add(providersGrid);
 final Tabs tabs = new Tabs(providersTab, productsTab);
 add(tabs);
 providersGrid.setItems(getLoanProviders());
 

 private List<LoanProvider> getLoanProviders() 
 final List<LoanProvider> coll = new ArrayList<>();
 final LoanProvider sample = new LoanProvider();
 sample.setName("Provider name");
 sample.setRegions("Region1");
 sample.setUrl("http://www.someserver.com");
 coll.add(sample);
 return coll;
 


public class LoanProvider 
 private String name;
 private String regions;
 private String url;

 public String getName() 
 return name;
 

 public void setName(String name) 
 this.name = name;
 

 public String getRegions() 
 return regions;
 

 public void setRegions(String regions) 
 this.regions = regions;
 

 public String getUrl() 
 return url;
 

 public void setUrl(String url) 
 this.url = url;
 

When I run the application, I don't see any data in the Products tab:

How can I change the code in order for the grid contents to be displayed?

Calling setSizeFull and setting height didn't help.

Tabs in Flow should not contain the page content, what you are doing now is adding the grid to the tab itself (right after the Providers text).

On this page there's an example Tabs with pages
https://vaadin.com/components/vaadin-tabs/java-examples

Basically you should add a SelectedChangeListener to the tabs component, and depending on which tab was clicked, show or hide the grid (either by setVisible or by removing it and re-adding it to the parent).

There is also an addon in Vaadin Directory that wraps similar logic of the above example
https://vaadin.com/directory/component/paged-tabs