New Table-Like Component

Hi,

I’m trying to build an own component because of issues I had recently with the Grid Component.
The Component is only for viewing purpose so I’m not bound to the Grid.

The Component will be build with a headline representing a dynamic amount of columns and a dynamic number of rows with the same amount of columns. A stupid table would be completely fine, but since flow there is no table component anymore.

At the moment my code looks like this:

@Tag("div")
@SuppressWarnings("serial")
public class InnerGrid extends Component {
	
  public InnerGrid(Map<String,String> outputMapping, List<ReferenceElement> dataList) {
    VerticalLayout table = new VerticalLayout();
      table.add(header(outputMapping));
      setElement(table, getElement());
    }

  private HorizontalLayout header(Map<String,String> outputMapping) {
    HorizontalLayout head = new HorizontalLayout();
    for(String key : outputMapping.keySet()) {
      head.add(new Label(key));
    }
    return head;
  }
}

But when I try to get a new instance I get an error:

2019-04-25 11:29:03 ERROR DefaultErrorHandler:34 -
java.lang.IllegalStateException: Element has already been set
at com.vaadin.flow.component.Component.setElement(Component.java:210)
at com.vaadin.flow.component.Component.setElement(Component.java:238)
at main.vaadin.search.InnerGrid.(InnerGrid.java:22)

Can anybody help.

Best Regards
Daniel

I think you try extending Composite and override initContent method.

Hi,

thanks for your help. You were right, I was mixing up some things at this part. Now it’s working.

Now I have the problem that I want to make an Composite and I want it to haven an Label like all other Components in small, light grey letters.
Vaadin does it with an css class (like vaadin-text-area) and adds an part-tag with the value label.
I can append the class, but I’m not able to append the part. Or I can’t find the option

Regards D.

Hi Daniel,

I am also looking for the Table like component. do you have success with your component? any chance you can share the code …
Thanks in advance.

Hi,

sorry for not answering for so long. Hope I can help you nevertheless.

Here is my component:

public class InnerGrid extends Component {
	
	Element tableElement = new Element("table");
	
	public InnerGrid(Map<String,String> outputMapping, SearchResultElement searchResultElement) {
		tableElement.appendChild(header(outputMapping));
		Element tbody = new Element("tbody");
		for(ReferenceSystem refSys : ReferenceSystem.values()) {
  		if(searchResultElement.hasKey(refSys)) {
  			tbody.appendChild(data(outputMapping, searchResultElement, refSys));
  		}
  	}
		tableElement.appendChild(tbody);
		tableElement.getClassList().add("inlineGrid");
		getElement().appendChild(tableElement);
	}
	
	private Element header(Map<String,String> outputMapping) {
		Element thead = new Element("thead");
		Element row = new Element("tr");
		Element system = new Element("th");
		system.setText("System");
		row.appendChild(system);
		for(String key : outputMapping.keySet()) {
  		if(key.equalsIgnoreCase("STATUS")) continue;
			Element field = new Element("th"); 
			field.setText(key);
			row.appendChild(field);
		}
		Element status = new Element("th");
		status.setText("Status");
		row.appendChild(status);
		thead.appendChild(row);
		return thead;
	}
	
	private Element data(Map<String,String> outputMapping, SearchResultElement searchResultElement, ReferenceSystem referenceSystem) {
		ReferenceElement r = searchResultElement.getSingleElement(referenceSystem);
		
		Element row = new Element("tr");
		Element system = new Element("th");
		system.setText(referenceSystem.displayName());
		
		row.appendChild(system);
		for(String key : outputMapping.keySet()) {
  		if(key.equalsIgnoreCase("STATUS")) continue;
			String valField = outputMapping.get(key);
			Element field = new Element("td"); 
			field.setText(r.getValue(valField));
			row.appendChild(field);
		}
		return row;
	}

}

There are some special things only valuable for me, but I think you can see how it works.

Hope it helps.

regars D.