How to show the long text in table? don't show "...."


(this picture is a datagrid table)

if the text too long,I want it show two row or more ,Rather than show " …"


To achieve text wrapping you need to wrap values into <div> tag using generated columns:

ordersDataGrid.addGeneratedColumn("amount", new DataGrid.ColumnGenerator<Order, String>() {
    public String getValue(DataGrid.ColumnGeneratorEvent<Order> event) {
        BigDecimal amount = event.getItem().getAmount();
        return "<div>" + amount + "</div>";

    public Class<String> getType() {
        return String.class;

then define custom style name for a DataGrid and add the following styles:

.wrapping-grid {
  .v-grid-cell {
    div {
      width: 100%;
      height: 100%;
      white-space: normal;
      word-wrap: break-word;

    height: 50px;

Unfortunately, DataGrid only supports equal height rows, so you have to make each row tall enough to accommodate two lines or more, even though there would only be one row in some of them.