Optimization

_optimization.java

@Theme("demo")
public class OptimizationUI extends UI {

    private static final long serialVersionUID = 8621351077936927377L;

    @Override
    public void init(VaadinRequest request) {

        String str = "<table width=\"100%\"><tr><td width=\"600px\"></td><td></td></tr>";

        for (int i = 0; i < 100; i++) {
            str += "<tr><td colSpan=\"2\" class=\"h\">John Doe</td></tr>";
            str += "<tr>";
            str += "<td>Phone: 123 4567<br/>Fax: 123 4568<br/>Email: example@example.com</td>";
            str += "<td>Random street 1<br/>City of Lorem Ipsum<br/>012345</td>";
            str += "</tr>";
        }

        str += "</table>";

        CssLayout layout = new CssLayout();
        layout.addComponent(new Label(str, ContentMode.HTML));

        setContent(layout);
    }
}

demo.scss

/* Import the reindeer theme.*/
/* This only allows us to use the mixins defined in it and does not add any styles by itself. */
@import "../reindeer/reindeer.scss";

/* This contains all of your theme.*/
/* If somebody wants to extend the theme she will include this mixin. */

$red: #ff0000;

@mixin demo {
  /* Include all the styles from the reindeer theme */
  @include reindeer;

  .warning-label {
    color: $red;
    background-color: #ffff00;
  }

  .v-table-cell-content-red .v-table-cell-wrapper {
    color: $red;
  }

  td.h {
    color: #424242;
    background-color: #F5F5F5;
    font-weight: bold;
    padding: 0;
  }

  td {
    padding: 0 0 16px 16px;
  }

  table {
    background-color: white;
    border: 0;
    margin: 10px;
  }

  body {
    background-color: #F5F5F5 !important;
  }
}