Records with data on multiple rows on a datatable using faces

Question

In JSF is it possible to have a datatable displays records as follows?

      [Name  ][Last Name][Age]
1.    John     Doe         20
      Extra info on record 1

2.    John     Smith       20
      Extra info on record 2

Thank you

Answer 1

Third libraries, such as RichFaces, allow you to do that with the principle of subTable. You can check this example from RichFaces. It is a little more complicated compared as what you want to do, but it shows the usage of subTable component...

Answer 2

I'm sure there are a number of ways you could do this.

If you don't mind nesting tables, you can use the panelGrid tag and CSS.

View:

<f:view>
 <h:dataTable value="#{peopleBean.people}" var="row">
  <h:column id="column1">
   <f:facet name="header">
    <h:panelGrid columns="3" columnClasses="cell,cell,age">
     <h:outputText value="First Name" />
     <h:outputText value="Last Name" />
     <h:outputText value="Age" />
    </h:panelGrid>
   </f:facet>
   <h:panelGrid columns="3" columnClasses="cell,cell,age">
    <h:outputText value="#{row.firstname}" />
    <h:outputText value="#{row.lastname}" />
    <h:outputText value="#{row.age}" />
   </h:panelGrid>
   <h:outputText styleClass="extra" value="#{row.extraInfo}" />
  </h:column>
 </h:dataTable>
</f:view>

Stylesheet:

TABLE {
    width: 100%;
}

TABLE TR TD {
    text-align: left;
}

.cell {
    width: 40%;
}

.age {
    width: 20%;
}

.extra {
    background-color: silver;
    padding: 4px;
    display: block;
    width: 100%;
}