Primefaces dataTable with rowspan

Question

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

Is the rowspan really necessary? Can't you just render `fields3` in a nested table/list? — BalusC, Oct 30 '12 at 13:34
Yes, it could be a nested table/list. I tried subtable, but I can't use it in the cell :s — Jean-François Houzard, Oct 30 '12 at 14:30

score 3 · Accepted Answer · answered Dec 25 '12 at 15:25

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.

Kerem Baydoğan · Answer 2 · 2012-10-30T13:07:43.190

1

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>

edited Oct 30 '12 at 13:07

answered Oct 30 '12 at 13:00

Kerem Baydoğan

10,475
1
43
50

1

Yes, but I need to sort some columns, so dataTable seems a good choice. – Jean-François Houzard Oct 30 '12 at 13:02

score 1 · Answer 3 · answered Nov 22 '12 at 16:25

1

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.

answered Nov 22 '12 at 16:25

jcgarnier

11
1

2

I finally implemented my own table :s – Jean-François Houzard Nov 22 '12 at 16:33
@Jean-FrançoisHouzard For those like me who which to have this functionnality, can you post your solution as an anwser please ? – Stephan Nov 30 '12 at 16:32
RichFaces does support rowspan! We use it in a few places with subtables. Just make sure you use rendered="#{rowKey eq 0}" rowspan="#{bean.listSize}". You can even have e.g. the first column with a rowspan of 10 and the second column with rowspans of 4 and 6 (just and example). You will need another index for the second column though for your rendered. – Ben Jun 04 '15 at 15:04

score 0 · Answer 4 · answered Jun 04 '15 at 15:41

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!

Primefaces dataTable with rowspan

4 Answers4

Linked