Vaadin Grid Table: how to draw border for certain columns?

Question

I'm using Vaadins Grid table for data representation. Therefore I want to draw a thick line for the right border of the Employee-ID-column and for both border sides of the name or name and surname column.

The result should look like this:

How I can manage that?

Answer 1

Continuing from where we left off in your other question regarding cell background, update your CellStyleGenerator to handle your other columns. For the sake of brevity I'll just demo a column with both borders, but you'll get the idea:

grid.setCellStyleGenerator(new Grid.CellStyleGenerator() {
    @Override
    public String getStyle(Grid.CellReference cellReference) {
        if ("c1".equals(cellReference.getPropertyId())) {
            return "green";
        } else if ("c2".equals(cellReference.getPropertyId())) {
            return "right-and-left-border";
        } else {
            return null;
        }
    }
});

... add the appropriate styles in your theme file:

.v-grid-cell.right-and-left-border {
  border-left: solid 2px black;
  border-right: solid 2px black;
}

... and you should get something similar to:

Answer 2

You need to:

1. Add style name to your grid component:

   Grid grid = new Grid();
   grid.addStyleName("grid-column-seperators")
   

2. Then in your *.scss file you need to add css style for class .grid-column-separator that add thick lines in your grid as explained here

Remember to compile Vaadin theme before deploying your app to see desired effect.