如何在 Vaadin Flow 14 中创建一个简单的 HTML 表格答案

【问题标题】：How to create a simple HTML table in Vaadin Flow 14如何在 Vaadin Flow 14 中创建一个简单的 HTML 表格
【发布时间】：2022-01-21 21:52:51
【问题描述】：

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

我可以使用什么 Vaadin Flow 组件来实现这一点？为什么首先在 Vaadin Flow 中删除了表格？

【问题讨论】：

标签： html-table vaadin vaadin-flow vaadin14

【解决方案1】：

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

要在 Flow 中实现表格，有几个选择。一种是使用Element API，一种是为表格创建组件。

对于元素 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);
    }

}

【讨论】：

非常感谢，@Mikael。这对我来说很好。为这样一个标准的 HTML 元素创建自己的组件似乎很尴尬。我希望该框架能够提供开箱即用的东西，但我仍然不明白为什么要删除表格。
我不会真正将旧的 Vaadin Table 称为“简单”，它是一个非常古老且臃肿的组件，具有大量难以维护且完全不可能更新到现代标准的功能。于是改写成Grid。这不是直接匹配，因为一些旧功能依赖于旧设计，这在其他地方造成了很多很多问题，而且许多新功能在旧设计中是不可能实现的。如果您真的喜欢 Table，仍然可以通过 MPR（vaadin.com/multiplatform-runtime，商业）将它与 V14 一起使用，但在这里可能有点矫枉过正。
我同意安娜所说的。但是，我确实看到了一个真正“简单”的数据表组件的位置。具有某种数据提供者 API 的组件，可以轻松地将项目传递给它，然后是一些配置选项如何呈现项目道具。也许排序。但没有延迟加载。没有虚拟行或列渲染。没有过滤。没有列组。没有冻结/粘性列。没有行详细信息。我想你明白了。

【解决方案2】：

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

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

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

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

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

【讨论】：