Reputation: 177
I'm quite new with JSF primefaces 3.1. I try to build a "complex" table and I cannot find a good solution using dataTable (I need a sorting component).
I would like to build a table equivalent to the following HTML representation, using a basic POJO like that:
String field1
String field2
List<String> fields3 // 3 items
String field4
<table border="1">
<tr>
<td rowspan="3">col1</td>
<td rowspan="3">col2</td>
<td>col3.1</td>
<td rowspan="3">col4</td>
</tr>
<tr>
<td>col3.2</td>
</tr>
<tr>
<td>col3.3</td>
</tr>
</table>
I give maybe too little information, so if you need it, please tell me :) I hope that my question is clear.
Thank you
Upvotes: 14
Views: 17150
Reputation: 1982
I would have a look at the RichFaces dataTable. I found it to be more flexible than the PrimeFaces table for complex layouts.
You can use
<rich:collapsibleSubTable
value="#{bean.getData()}"
var="line"
id="subTable"
rowKeyVar="rowKey"
width="100%">
<rich:column width="40" rendered="#{rowKey eq 0}" rowspan="#{line.firstColRowSpan}">
#{line.country}
</rich:column>
<rich:column rendered="#{line.index eq 0}" rowspan="#{line.secondColRowSpan}">
#{line.state}
</rich:column>
<rich:column>
#{line.city}
</rich:column>
</rich:subtable>
so if your line data looks like this:
US CA San Francisco 0 (index) 6 (firstColRowSpan) 3 (secondColRowSpan)
US CA LA 1 6 3
US CA Jose 2 6 3
US TX Huston 0 6 2
US TX Dallas 1 6 2
US AZ Phoenix 0 6 1
UK Surrey Guildford 0 1 1
The the table would show
US CA San Francisco
LA
Jose
TX Huston
Dallas
AZ Phoenix
UK Surrey Guildford
It is important that if you have buttons/links etc in one of the rowspan columns that you add a rendered="#{rowKey eq 0}" there as well!
Upvotes: 0
Reputation: 1602
A rock-solid and all flexible solution for custom grids is to use <c:forEach> together with Primefaces <p:panelGrid>:
<html ... xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:p="http://primefaces.org/ui">
<p:panelGrid>
<p:row>
<p:column styleClass="ui-state-default" colspan="2"><!-- header -->
<h:outputText value="Some Header"/>
</p:column>
...
</p:row>
<p:row><!-- other header row -->
...
</p:row>
<c:forEach items="#{list}" var="element">
<p:row>
<p:column styleClass="ui-state-default" rowspan="#{list.sublist.someSizeExpression}"><!-- left rowspan -->
<h:outputText value="#{element.name}"/>
</p:column>
<c:forEach items="#{element.sublist}" var="subelement">
<p:column>
<h:selectBooleanCheckbox/>
</p:column>
</c:forEach>
</p:row>
</c:forEach>
</p:panelGrid>
</html>
It looks nice, Command-Buttons and AJAX works in both Head and Cells.
Upvotes: 3
Reputation: 11
I had the same problem : primefaces (or richfaces) offers rowspan only for header and footer.
Then I tried to use the icefaces ace:datatable
component and it run by adding only one attribute in the colum(s) you want to be "rowspanable" : ace:column
: groupBy="#{bean.field}"
.
You give as usual a list of rows and this component generates all rowspan automatically (I think by autodetecting neigbourhood of equals values) in the generated html table.
It runs altogether with primefaces components : at this moment I have primefaces outputlabel in the icefaces datatable cells ant this icefaces datatable is inside a primefaces panel.
Upvotes: 1
Reputation: 10720
since you mentioned primefaces
in your tags.
I recommend you to use p:panelGrid
<p:panelGrid>
<p:row>
<p:column rowspan="3"/>
<p:column rowspan="3"/>
<p:column rowspan="1"/>
<p:column rowspan="3"/>
</p:row>
<p:row>
<p:column/>
</p:row>
<p:row>
<p:column/>
</p:row>
</p:panelGrid>
Upvotes: 1