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

微信截图_20180315172853

(this picture is a datagrid table)

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

Hi,

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

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

    @Override
    public Class<String> getType() {
        return String.class;
    }
});
ordersDataGrid.getColumnNN("amount").setRenderer(ordersDataGrid.createRenderer(DataGrid.HtmlRenderer.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.

1 Like