Which UI Component for a microblog

In a small part of my project I have to use some sort of microblogging.

The use case is:

  • The user create a “Task”
  • The user add various “Annotation” the the “Task”

Since the “Annotations” may be a lot, I would need a component that can do lazyloading.

I tried to use the table, creating a single generated column by inserting a verticalLayout with a header (User and Date of creation) and the body (Annotation’s body) that consist of a label with type pre-format.


      final Layout mainLayout = new VerticalLayout();
      mainLayout.setStyleName("avanzamenti-token");

      final Layout headerLayout = new HorizontalLayout();
      headerLayout.setSizeUndefined();
      headerLayout.addStyleName("avanzamenti-token-header");

      final Label autore = new Label(avanzamento.getAutore());
      autore.setSizeUndefined();
      autore.setStyleName("avanzamenti-token-autore");
      headerLayout.addComponent(autore);

      final Label date = new Label(" " + avanzamento.timeAgoInWords() + " ", Label.CONTENT_XHTML);
      date.setSizeUndefined();
      date.setStyleName("avanzamenti-token-date");
      date.setDescription(DateUtils.formatDateTime(avanzamento.getData()));
      headerLayout.addComponent(date);

      final Label hasWritten = new Label("ha scritto");
      hasWritten.setSizeUndefined();
      headerLayout.addComponent(hasWritten);
      mainLayout.addComponent(headerLayout);

      final Label text = new Label(avanzamento.getTesto(), Label.CONTENT_PREFORMATTED);
      text.setStyleName("avanzamenti-token-testo");
      mainLayout.addComponent(text);

in this case, however, the table does not seem to recognize the correct height of each cell and in the bottom of the table there is only the scrolbar without more rows.

Is there anyone who has faced and solved this issue?
It is better to use a table or another component?

Regards