如何在 Vaadin Flow 14 中创建一个简单的 HTML table

Question

我想在 Vaadin 流程中创建一个简单的 HTML table，但该组件不再存在（过去以 com.vaadin.ui.Table 形式提供）。 table 用于显示在网格中选择的项目的详细属性（键值对）。

我可以使用什么 Vaadin Flow 组件来实现它？为什么首先在 Vaadin Flow 中删除了 table？

Answer 1

Table 实际上已经在 Vaadin8 中被删除了。 https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-intro

要在 Flow 中实现 table，有几个选择。一种是使用元素 API，一种是为 table.

创建组件

对于元素 API 版本，它可能类似于：

Element table = new Element("table");
For(item : item rows to add) {
  Element tr = new Element("tr");
  table.appendChild(tr);
  For(int i = 0; i < dataColumns; i++) {
    Element td = new Element("td");
// could perhaps append a span with text context.
    td.setText(item text for column i);
    tr.appendChild(td);
  }
}

对于组件方法，基本情况可能是将 3 个元素实现如下：

@Tag("table")
public class Table extends Component implements HasComponents {

    public Row addRow() {
        Row row = new Row();
        add(row);
        return row;
    }

    public Row getRow(int row) {
        final Optional<Component> rowOptional = getElement().getChild(row)
                .getComponent();
        if(rowOptional.isPresent())
            return (Row) rowOptional.get();
        return null;
    }
}

@Tag("tr")
public class Row extends Component {
    public void add(Cell cell) {
        getElement().appendChild(cell.getElement());
    }
    public int getRow() {
        return getElement().getParent().indexOfChild(getElement());
    }
}

@Tag("td")
public class Cell extends Component {
    
    public int getCol() {
        return getElement().getParent().indexOfChild(getElement());
    }

    public int getRow() {
        return ((Row) getParent().get()).getRow();
    }

    public void setText(String text) {
        getElement().setText(text);
    }

}

Answer 2

Table 组件可以有多个用例。 Vaadin 的社区组件目录中有几个替代项。

Table 显示数据列表（类似于 Grid，但更轻量级的方法）

https://vaadin.com/directory/component/beantable

Table 作为布局组件，支持行跨度、列跨度等，您可以单独填充每个单元格。

https://vaadin.com/directory/component/html-table

由于这些用例非常不同，因此它们更适合不同的 Java API，尽管它们生成的 HTML DOM 结构非常相似。这些附加组件都没有尝试复制 Vaadin 7 Table 组件的 API。

Cookbook中也有秘诀，如何在Grid details行的TemplateRenderer中生成Table

https://cookbook.vaadin.com/grid-details-table

如何在 Vaadin Flow 14 中创建一个简单的 HTML table

How to create a simple HTML table in Vaadin Flow 14

html-table

vaadin

vaadin-flow

vaadin14