Vaadin 8 Grid

Moving On to the Latest Version of Vaadin In vaadin 8 Table is Removed So we may use Vaadin Grid instead if Vaadin Table.

What is Vaadin Grid.?

Grid is for displaying and editing tabular data laid out in rows and columns. At the top, a header can be shown, and a footer at the bottom. In addition to plain text, the header and footer can contain HTML and components. Having components in the header allows implementing filtering easily. The grid data can be sorted by clicking on a column header; shift-clicking a column header enables secondary sorting criteria.

Grid is fully themeable with CSS and style names can be set for all grid elements. For data rows and cells, the styles can be generated with a row or cell style generator.

Now Coding Part In Grid.

The Pre-requisites For Vaadin 8 Grid are:-

1.  A pojo

          SO First lets Build a Pojo class in java 

package com.example.DemoProject;

public class Company {

    private int serialNo;

    private String name;

    private RatingStars rtstars;

    public Company() {

    }

      public Company(int serialNo, String name) {

        this.serialNo = serialNo;

        this.name = name;

    }

    public int getSerialNo() {

        return serialNo;

    }

    public void setSerialNo(int serialNo) {

        this.serialNo = serialNo;

    }

    public String getName() {

        return name;

    }

    public void setName(String name) {

        this.name = name;

    }

}

               So here our POJO class is Ready With getters and Setters 

  2.Now the Next thing we require is the List to add Items in Grid 

List<Company> items = new ArrayList<>();

items.add(new Company(1," Google"));

items.add(new Company(2," Yahoo"));

items.add(new Company(3," BMW"));

items.add(new Company(4," Audi"));

items.add(new Company(5," Jaguar"));

Now the Turn comes for Initializing the Grid as Follows

Grid<Company> grid; --> means the type of Grid is same as of Pojo class 

grid = new Grid<>(); 

grid.setItems(items);   -->here Comes the List We have Taken to add Items in List

Now to show the Items We have added we need to show in the Grid so we have to create columns

Here comes the Logic to add the Columns as many as you want Depends on the Pojo which Defines How many fields we have in our Pojo.

we have two Fields here so we can say we can prepare 2 columns for the given fields.

grid.addColumn(Company::getSerialNo);

grid.addColumn(Company::getName);
Now if you want to add the Name For the Given Generated Columns you can Provide it by setCaption property as Follows
grid.addColumn(Company::getSerialNo).setCaption("sr no");
grid.addColumn(Company::getName).setCaption("Name");

Your Grid is Ready but to make the grid Visible ofcourse you have to extend your class
with CustomComponent as 
class mygrid extends CustomComponent;
{
//create a Pojo same as shown above
//write the code of the grid shown above 

}






Here is the Output Of the Given Code :). cheers.