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 l
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>
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!
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.
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.