JSF - Grouping data and column span

Question

I have a table of transactions with data like this : The DATETIME format is dd/MM/yyyy.

+------+-------------------+----------------+--------+
|  ID  |  START_DATETIME   |  END_DATETIME  |  USER  |
+------+-------------------+----------------+--------+
|   1  |  01/01/2012 00:00 |01/01/2012 01:00| bob    |
+------+-------------------+----------------+--------+
|   2  |  02/01/2012 00:00 |02/01/2012 01:00| foo    |
+------+-------------------+----------------+--------+

Within one single day, multiple transactions can occur. For the end user, I would like to group the transactions by days like in the datatable below :

+------+---------------+------------+----------+-------+
|  ID  |  START_TIME   |  END_TIME  | DURATION | USER  |
+------+---------------+------------+----------+-------+
|  Sunday 1st of January 2012                          |
+------+---------------+------------+----------+-------+
|   1  |  00:00        |  01:00     | 01:00    |  bob  |
+------+---------------+------------+----------+-------+
|  Monday 2nd of January 2012                          |
+------+---------------+------------+----------+-------+
|   2  |  00:00        |  01:00     | 01:00    |  foo  |
+------+---------------+------------+----------+-------+

How can I do this with a datatable in JSF 2.0 ? Do you I have to create a custom component ?

The service layer gives the transactions like this : java.util.List<Transaction>

class Transaction {
  private int id;
  private Date start;
  private Date end;
  private User user;

  // getters and setters ...
}

EDIT:
Based on chkal's answer, here is the solution I came up with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Group by day</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th colspan="4">The last 10 transactions</th>
            </tr>
            <tr>
                <th>ID</th>
                <th>START DATE</th>
                <th>END DATE</th>
                <th>USER</th>
            </tr>
        </thead>

        <!-- Firstly iterate other dates -->
        <ui:repeat value="#{transactionBean.distinctTransactionsDates}" var="entry">
        <tbody>
            <tr>
                <th colspan="4" align="left"><h:outputText value="#{entry}" /></th>
            </tr>

            <!-- Secondly iterate other transactions -->
            <ui:repeat var="t" value="#{transactionBean.getTransactionList(entry)}">
            <tr>
                <td><h:outputText value="#{t.id}" /></td>
                <td><h:outputText value="#{t.startDate}" /></td>
                <td><h:outputText value="#{t.endDate}" /></td>
                <td><h:outputText value="#{t.user}" /></td>
            </tr>
            </ui:repeat>
        </tbody>
        </ui:repeat>
    </table>
</body>
</html>

OUTPUT

<table border="1">
    <thead>
        <tr>
            <th colspan="4">The last 10 transactions</th>
        </tr>
        <tr>
            <th>ID</th>
            <th>START DATE</th>
            <th>END DATE</th>
            <th>USER</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th colspan="4" align="left">Sun Jan 01 00:00:00 CET 2012</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Sun Jan 01 00:00:00 CET 2012</td>
            <td>Sun Jan 01 01:00:00 CET 2012</td>
            <td>bob</td>
        </tr>
        <!-- Other rows appear here -->
    </tbody>
    <!-- Other tbodies appear here -->
</table>

Note ui:repeat is new in JSF 2.0. It is an alternative to h:dataTable Checkout this tutorial for more details.

possible duplicate of [how to give colspan and rowspan in JSF panelgrid?](http://stackoverflow.com/questions/3111081/how-to-give-colspan-and-rowspan-in-jsf-panelgrid) — BalusC, Jun 01 '12 at 23:08

score 1 · Accepted Answer · answered Jun 02 '12 at 09:01

I think there is no ready-to-use component that is appropriate here.

You could try to group the transaction entries into two levels. The first level is a list where each entry represents a date in which at least one transaction occurred. Each of these entries has a second list containing the actual transactions.

Then you could render the desired table by using two nested <ui:repeat> components. But you will have to render all the HTML table stuff yourself in this case.

I think this should work. :)

JSF - Grouping data and column span

1 Answers1