# Primefaces Datatable



## freez (7. Nov 2012)

Hallo,

hat jemand schon mal die [c]p:dataTable[/c] zweizeilig benötigt? Also dass ein Datensatz mit zwei [c]<tr>[/c] gerendert wird? Durch die Menge der Spalten, dich ich habe, möchte ich die Hälfte der Spalten unten drunter in einer weiteren Zeile anzeigen.

Ich weiß zwar, dass ich in einem [c]<p:column>[/c] auch mehrere Werte auch untereinander darstellen kann, vielleicht sogar in zwei divs, die untereinander stehen. Aber ich möchte natürlich einen Trenner (border-bottom im div) verwenden, sodass man erkennt, dass dies eine andere Zeile ist. Und sobald ein Zeilenumbruch in einer Zelle passiert, sitzt der Trenner tiefer als bei Zellen ohne Zeilenumbruch.

Schön wäre es eigentlich, wenn die datatable von sich aus ein weiteres [c]<tr>[/c] erstellt. Ich habe auch schon versucht mit [c]<p:row>[/c] zu experimentieren, aber leider ohne Erfolg, die Tabelle wurde dann gleich gar nicht gerendert (Pseudocode):
[XML]
<p:dataTable var="item" value="#{bean.items}">
	<p:row>
		<p:column>
			<hutputText value="#{item.bla}" />
		</p:column>
		<p:column>
			<hutputText value="#{item.blu}" />
		</p:column>
	</p:row>
	<p:row>
		<p:column>
			<hutputText value="#{item.bli}" />
		</p:column>
		<p:column>
			<hutputText value="#{item.blo}" />
		</p:column>
	</p:row>
</p:dataTable>
[/XML]


----------



## sence (7. Nov 2012)

im notfall, sofern keine weiteren Anforderungen an die Primefaces Funktionalitäten bei der Datatable bestehen,
würde ich diese mir selbst bauen mittels <hanelGoup binding="#{}"/>


grüße


----------



## freez (8. Nov 2012)

sence hat gesagt.:


> würde ich diese mir selbst bauen mittels <hanelGoup binding="#{}"/>



Ja, für Workarounds bin ich auch dankbar. Aber wie würde denn deine Lösung im Detail aussehen. Ich verstehe grad nicht, wie mir ein Panelgroup mit Binding helfen soll?


----------



## sence (8. Nov 2012)

```
private HtmlPanelGroup myDatatable = new HtmlPanelGroup();

	// Getter and Setter

	private void buildMyDatatable() {
	myDatatable = new HtmlPanelGroup();
	myDatatable.getChildren().add(getTxt("<div class=\"ui-state-default ui-filter-column \">"));
	myDatatable.getChildren().add(getTxt("<table>"));
	
	for(Object o : listOfElements) 
        {
		myDatatable.getChildren().add(getTxt("<tr>"));
			myDatatable.getChildren().add(getTxt("<td>"));
				myDatatable.getChildren().add(getTxt(o.getPropertyA()));
			myDatatable.getChildren().add(getTxt("</td>"));
			myDatatable.getChildren().add(getTxt("<td>"));
				myDatatable.getChildren().add(getTxt(o.getPropertyB()));
			myDatatable.getChildren().add(getTxt("</td>"));			
		myDatatable.getChildren().add(getTxt("</tr>"));
		
		myDatatable.getChildren().add(getTxt("<tr>"));
		myDatatable.getChildren().add(getTxt("<td>"));
			myDatatable.getChildren().add(getTxt(o.getPropertyC()));
		myDatatable.getChildren().add(getTxt("</td>"));
		myDatatable.getChildren().add(getTxt("<td>"));
			myDatatable.getChildren().add(getTxt(o.getPropertyD()));
		myDatatable.getChildren().add(getTxt("</td>"));			
	myDatatable.getChildren().add(getTxt("</tr>"));
	}
	
	myDatatable.getChildren().add(getTxt("</table>"));
	myDatatable.getChildren().add(getTxt("</div>"));
	}

	private HtmlOutputText getTxt(String txt) {
			 HtmlOutputText outText = new HtmlOutputText(); 
			 outText.setValue(txt);
			 outText.setEscape(false);
			 return outText;
	}
```

entsprechend noch die Primefaces css ausgeben und fehlenden CSS Klassen in der Build Funktion den Tabellen Tags ergänzen.


das ganze verbindest du dann wie folgt:

```
<h:panelGroup binding="#{myBean.myDatatable}"/>
```

Grüße


----------



## freez (13. Nov 2012)

Ich habe erst mal die Variante mit den 2 DIVs gewählt, da die Tabelle recht schmal ist und ein Zeilenumbruch wohl fast nicht zu erwarten ist.

Aber danke für die Unterstützung, ich werde es mir im Kopf behalten, falls ich doch noch umschwenken muss.


----------



## sence (13. Nov 2012)

noch eine Lösung wäre:

```
<table>
<ui:repeat var="obj" value="#{myBean.myList}">
<tr>
   <td>#{obj.a}</td>
   <td>#{obj.b}</td>
</tr>
<tr>
   <td>#{obj.c}</td>
   <td>#{obj.d}</td>
</tr>
</ui:repeat>
</table>
```

grüße


----------



## freez (13. Nov 2012)

An sowas habe ich natürlich gar nicht gedacht. Gute Idee. Ist halt etwas aufwändiger, da es ja trotzdem wie die datatable aussehen soll. Aber ne gute Lösung. Danke


----------

