CODEWITHSUNDEEP
jsf-2primefaces
Ville Myrskyneva
Ville Myrskyneva

Reputation: 1640

Primefaces datatable, item on multiple rows

I can not find a primefaces datatable example on how to make one item to be shown on two (or more) rows. I need to show an item in a datatable about like this:

<table>
  <tr>
    <td>Text 1 from entry</td>
    <td>Text 2 from entry</td>
  </tr>
  <tr>
    <td colspan="2">Text 3 from entry</td>
  </tr>
</table>

Can it be done or should I use some other tag to render like this?

I tried:

...xmlns:p="http://primefaces.org/ui"...

<p:dataTable var="item" value="#{bean.items}">
  <p:column>
    <p:row>
      <p:column>
        <h:outputText value="#{item.title}" />
      </p:column>
      <p:column>
        <h:outputText value="#{item.shortText}" />
      </p:column>
    </p:row>
    <p:row>
      <p:column colspan="2">
        <h:outputText value="#{item.longText}" />
      </p:column>
    </p:row>
  </p:column>
</p:dataTable>

But obviously this is wrong and/or I have misunderstood the concept of using 'p:row'. I can not find any explanation on how to do this properly, so any advice would be appreciated.

Upvotes: 6

Views: 22674

Answers (1)

skuntsel
skuntsel

Reputation: 11742

Why don't you want to use the <p:panelGrid> component that can achieve this functionality easily?

Basic example:

<p:panelGrid>
    <p:row>
        <p:column>Text 1 from entry</p:column>
        <p:column>Text 2 from entry</p:column>
    </p:row>
    <p:row>
        <p:column colspan="2">Text 3 from entry</p:column>
    </p:row>
</p:panelGrid>

That embedded, we have:

<p:dataTable var="item" value="#{bean.items}">
    <p:column>
        <p:panelGrid>
            <p:row>
                <p:column><h:outputText value="#{item.title}" /></p:column>
                <p:column><h:outputText value="#{item.shortText}" /></p:column>
            </p:row>
            <p:row>
                <p:column colspan="2"><h:outputText value="#{item.longText}" /></p:column>
            </p:row>
        </p:panelGrid>
    </p:column>
</p:dataTable>

Upvotes: 8

Related Questions