Vaadin Grid cell not showing multiline rows

Question

With Vaadin Grid, I want to generate multiline cells for every cell that have more content in cell that overlaps its width.

I have allready tried:

• java \n new line character and CSS stylings like white-space: pre; but it does not seem to work. (This solution worked for Table)

• custom renderer setRenderer(HtmlRenderer) with </br>tags and different CSS display settings

Desired result:

Answer 1

Vaadin Grid still doesn't have native support for multiline columns but you can try some improvisation, on example I suggest to see the Vaadin forum discussion on the link: Grid - How to display multiple lines in one cell

Also you can try to create custom renderer for the Grid.

Answer 2

For people with large text in columns and who want to display large data in Grid Columns without having them cutoff by default:

1. Add a Style name to your grid:

   grid.addStyleName("commentsGrid");

2. Add some style names to your rows and cells if you would like to customize them:

   grid.setRowStyleGenerator(rowRef -> {// Java 8
       return "bigRows";
   }); 
   

   and

   grid.setCellStyleGenerator(new Grid.CellStyleGenerator(){
        @Override
        public String getStyle(CellReference cellReference) {
            return "bigCell";
        }
   });
   

3. For me the problem column was comments. So surround the text with p tag with style class wrap and a fixed width.

   Converter<String, String> commentsConverter = new Converter<String,  String>(){
           @Override
           public String convertToModel(String value, Class<? extends String> targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
   
               return value;
           }
   
           @Override
           public String convertToPresentation(String value, Class<? extends String> targetType, Locale locale)
                   throws com.vaadin.data.util.converter.Converter.ConversionException {
               if(value !=null){
                   return "<p class=\"wrap\">"+value+"</p>";
               }else{
                   return "";
               }
           }
   
           @Override
           public Class<String> getModelType() {
               return String.class;
           }
   
           @Override
           public Class<String> getPresentationType() {
               return String.class;
           }
   
       };
       grid.getColumn("comments").setRenderer(new HtmlRenderer(), commentsConverter);
       grid.getColumn("comments").setWidth(700d);
   

4. Then i styled the classes mentioned above as follows:

   .commentsGrid td{
       height:150px !important;
    }
   
   p.wrap{
     width: 45em;
     word-wrap: break-word;
     word-break: break-all;
     white-space: normal; 
   }
   

And i got result like this:

I am not a CSS ninja, so you can make it way more beautiful than this.

If you don't like all rows to have equally large heights then you can calculate rowHeights on the fly and then set them in step 2. I am not 100% sure.

Answer 3

Another way of fitting long scrolling text into a grid column is to set a row height for the grid and use a component renderer and render a textarea in the grid which contains the text. This works good because if the text is too long the user will get a scrollbar inside the cell to see the overflowed text.

Column screen = grid.addComponentColumn(role->{
        TextArea ta = new TextArea();
        ta.setValue(VALUE_PROVIDER_TEXT);
        ta.setStyleName("clear");
        ta.setHeight("100px");
        ta.setReadOnly(true);
        ta.setWidth("150px");
        return ta;
    });
    screen.setWidth(150);
    screen.setCaption("Screens");
    grid.setBodyRowHeight(100);

and this in the css

  .v-textarea-clear{background-color: transparent;border: none;}

Example

Answer 4

Have you tried to add a style renderer to your ceolumns to add a custom css class, where you can place your defined height?

Example:

Java:

grid.setCellStyleGenerator(cellRef -> // Java 8
    "heigher");

CSS:

.v-grid-cell.heigher {
    height: 10em;
}

Example coming from: https://vaadin.com/docs/-/part/framework/components/components-grid.html

Answer 5

With Vaadin 24 we can use a theme variant for this:

grid.addThemeVariants(GridVariant.LUMO_WRAP_CELL_CONTENT);

Other grid variants are described in the official docs.