How to create a simple HTML table in Vaadin Flow 14 - html-table

Question

I would like to create a simple HTML table in Vaadin flow, but the component is not present anymore (used to be available as com.vaadin.ui.Table). The table is meant to show the detailed properties (key-value pairs) of an item selected in a Grid.
What Vaadin Flow component can I use to implement this? And why was the table removed in Vaadin Flow in the first place?

Answer 1

Table was actually removed already in Vaadin8. https://vaadin.com/blog/-/blogs/mission-rip-table-migrate-to-grid-intro
For implementing a table in Flow there are a couple choices.
One is to use the Element API and one is to create Components for table.
For the element API version it could be something like:
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);
}
}
For the Component approach the basic case would then perhaps be to implement the 3 elements as something like:
#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

There can be multiple use cases for Table component. There are couple of alternative's in Vaadin's Directory of community components.
Table showing list of data (similar to Grid, but more light weight approach)
https://vaadin.com/directory/component/beantable
Table as layout component, which supports row-span, col-span etc. and you populate each cell individually.
https://vaadin.com/directory/component/html-table
As these usecases are quite different , they are better catered by different Java API, although the HTML DOM structure they produce is very similar. Neither of these add-ons attempt to reproduce API of the Vaadin 7 Table component.
There is also a recipe in Cookbook, how to generate Table in TemplateRenderer of the Grid details row.
https://cookbook.vaadin.com/grid-details-table