title: JSF - Grouping data and column span
body: <p>I have a table of transactions with data like this : 
  The DATETIME format is dd/MM/yyyy.</p>
  
  <pre>
  +------+-------------------+----------------+--------+
  |  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    |
  +------+-------------------+----------------+--------+
  </pre>
  
  <p>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 :</p>
  
  <pre>
  +------+---------------+------------+----------+-------+
  |  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  |
  +------+---------------+------------+----------+-------+
  </pre>
  
  <p>How can I do this with a datatable in JSF 2.0 ?
  Do you I have to create a custom component ? </p>
  
  <p>The service layer gives the transactions like this : <code>java.util.List&lt;Transaction&gt;</code> </p>
  
  
  
  <pre><code>class Transaction {
    private int id;
    private Date start;
    private Date end;
    private User user;
  
    // getters and setters ...
  }
  </code></pre>
  
  <hr>
  
  <p><strong>EDIT:</strong><br>
  Based on chkal's answer, here is the solution I came up with </p>
  
  
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;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"&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
  &lt;title&gt;Group by day&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table border="1"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th colspan="4"&gt;The last 10 transactions&lt;/th&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;ID&lt;/th&gt;
                  &lt;th&gt;START DATE&lt;/th&gt;
                  &lt;th&gt;END DATE&lt;/th&gt;
                  &lt;th&gt;USER&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;!-- Firstly iterate other dates --&gt;
          &lt;ui:repeat value="#{transactionBean.distinctTransactionsDates}" var="entry"&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;th colspan="4" align="left"&gt;&lt;h:outputText value="#{entry}" /&gt;&lt;/th&gt;
              &lt;/tr&gt;
  
              &lt;!-- Secondly iterate other transactions --&gt;
              &lt;ui:repeat var="t" value="#{transactionBean.getTransactionList(entry)}"&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;h:outputText value="#{t.id}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;h:outputText value="#{t.startDate}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;h:outputText value="#{t.endDate}" /&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;h:outputText value="#{t.user}" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;/ui:repeat&gt;
          &lt;/tbody&gt;
          &lt;/ui:repeat&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>OUTPUT</strong></p>
  
  
  
  <pre><code>&lt;table border="1"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th colspan="4"&gt;The last 10 transactions&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;START DATE&lt;/th&gt;
              &lt;th&gt;END DATE&lt;/th&gt;
              &lt;th&gt;USER&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr&gt;
              &lt;th colspan="4" align="left"&gt;Sun Jan 01 00:00:00 CET 2012&lt;/th&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;1&lt;/td&gt;
              &lt;td&gt;Sun Jan 01 00:00:00 CET 2012&lt;/td&gt;
              &lt;td&gt;Sun Jan 01 01:00:00 CET 2012&lt;/td&gt;
              &lt;td&gt;bob&lt;/td&gt;
          &lt;/tr&gt;
          &lt;!-- Other rows appear here --&gt;
      &lt;/tbody&gt;
      &lt;!-- Other tbodies appear here --&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><em>Note</em> <code>ui:repeat</code> is new in JSF 2.0. It is an alternative to <code>h:dataTable</code>
  Checkout this <a href="http://www.mkyong.com/jsf2/jsf-2-repeat-tag-example/" rel="nofollow">tutorial</a> for more <a href="http://www.mkyong.com/jsf2/jsf-2-repeat-tag-example/" rel="nofollow">details</a>.</p>