Element HTML

Flow
1

Hi, good morning!
I would like to know if in Vaadin I can directly or indirectly
insert any HTML element/tag such as <table> and <select>?
If yes, how do I do it?
Thanks.

2

You can use the Html component if you have a static snippet you want to use.

You can use the Element class for direct control over individual elements.

You can use LitTemplate for something in between.

3

Hello @Leif,

Perfect, I searched for Element in the Docs section of the Vaadin website and
managed to understand how it works.
I even managed to set up a Table example with Vaadin,
below is the Table component class wrapped in a DIV:

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.dom.Element;

@Tag("div")
public class TableHTML extends Component {
    Element tableElement = new Element("table");

    public TableHTML() {
			tableElement.appendChild(new Element("th").setText("Coluna A"));
			tableElement.appendChild(new Element("th").setText("Coluna B"));
			tableElement.appendChild(new Element("th").setText("Coluna C"));
			
			tableElement.appendChild(new Element("tr").appendChild(
				new Element("td").setText("A1"),
				new Element("td").setText("B1"),
				new Element("td").setText("C1")
		  ));
			
			tableElement.appendChild(new Element("tr").appendChild(
				new Element("td").setText("A2"),
				new Element("td").setText("B2"),
				new Element("td").setText("C2")
		  ));

			tableElement.appendChild(new Element("tr").appendChild(
				new Element("td").setText("A3"),
				new Element("td").setText("B3"),
				new Element("td").setText("C3")
		  ));
			
			getElement().appendChild(tableElement);
    }
		
}

Thanks!

1 Like
4

You can also do:

@Tag("table")
public class Table extends HtmlContainer implements HasOrderedComponents { ... }

@Tag("tr")
public class Tr extends HtmlContainer implements HasOrderedComponents { ... }

@Tag("td")
public class Td extends HtmlContainer implements HasOrderedComponents { ... }

The classes doesn’t need any particular body, but you might want to add convenience methods and constructors, like a setColSpan to Td

One nice thing about this is that you can now add Vaadin components to your Td

5

Since Vaadin 24.4 there’s also NativeTable (and related classes) to build HTML tables.

2 Likes
6

Maybe our docs are missing mention of the new component as it was not discovered :thinking:

BTW. If you are not yet on 24 series, there is a great add-on by @Stefan.27. It might be superior choice also for those on 24 series, if you are a heavi user of table element. Discussed in this ticket:

1 Like
7

Regarding select element, isn’t there really a component (addon) for that :thinking: I have at least missed one in some cases (the native experience can be quite relevant in some case) and thought I had seen one somewhere, but couldnt find it at least via Directory quickly.

8

There is native select component example here

Just replace the CSS with your own.

9

Stefan’s version is great when you want to use Table as a layout.

If you need HTML data table this one is better

https://v-herd.eu/tatulund-addons/beantable

It really depends on your use case, i.e. to which purpose you want to finetune your HTML table.

1 Like
10

:+1: Maybe that’s where I have seen the select element based component.

Stefan’s component is a great piece also for data :sunglasses: I see that more like a building block for bigger compositions. I have used it for a long time in some Viritin components as well (a shadowed version because the add-on itself is not in Maven central).

11

Thank you all (@Guttorm, @marcoc_753) for the tips and for taking the time to answer me!

12

Thank you all (@Tatu2, @Matti ) for the tips and for taking the time to answer me!

13

Guys, just letting you know that even with Element I can create the
HTML component as well, I did it this way:

package br.com.marcio.vivinanceiro.vaadinCustomComponents;

import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.dom.Element;

@Tag("div")
public class Select extends Component {
	
  Element label = new Element("label");
  Element select = new Element("select");

  public Select() {
	label.setAttribute("for", "selection").setText("Select an option: ");

	select.setAttribute("id", "selection");
	select.appendChild(new Element("option").setAttribute("value", "1").setText("Option1"));
	select.appendChild(new Element("option").setAttribute("value", "2").setText("Option2"));
	select.appendChild(new Element("option").setAttribute("value", "3").setText("Option3"));
			
	getElement().appendChild(label).appendChild(select);
  }
}

Thanks guys.
Cheers!

15

Deleted my previous comment because it was wrong. I was mentioning a test class. Sorry.

16

No problems!
Cheers!