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

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%; }