CODEWITHSUNDEEP
jsfprimefacesjsf-2
Juan Camacho
Juan Camacho

Reputation: 746

How can I create a table with a variable amount of rows in each column using primefaces?

I am working with JSF 2.2 and Primefaces 6.0; I would like create a complex table and I need to know how to create a table, for example, with each row of the first column, many rows in the second column.

It is a Excel representation:

enter image description here

Upvotes: 1

Views: 628

Answers (2)

irieill
irieill

Reputation: 1252

Have a look at Grouping section

<h3>Grouping</h3>
<p:panelGrid style="margin-top:20px">
    <f:facet name="header">
        <p:row>
            <p:column colspan="7">1995-96 NBA Playoffs</p:column>
        </p:row>
        <p:row>
            <p:column colspan="2">Conf. Semifinals</p:column>
            <p:column colspan="2">Conf. Finals</p:column>
            <p:column colspan="2">NBA Finals</p:column>
            <p:column>Champion</p:column>
        </p:row>

    </f:facet>

    <p:row>
        <p:column style="font-weight: bold;">Seattle</p:column>
        <p:column style="font-weight: bold;">4</p:column>

        <p:column rowspan="2" style="font-weight: bold;">Seattle</p:column>
        <p:column rowspan="2" style="font-weight: bold;">4</p:column>

        <p:column rowspan="5">Seattle</p:column>
        <p:column rowspan="5">2</p:column>

        <p:column rowspan="11" style="font-weight: bold;">Chicago</p:column>
    </p:row>

    <p:row>
        <p:column>Houston</p:column>
        <p:column >0</p:column>
    </p:row>

    <p:row>
        <p:column colspan="4" styleClass="ui-widget-header">
            <p:spacer height="0"/>
        </p:column>
    </p:row>

    <p:row>
        <p:column style="font-weight: bold;">Utah</p:column>
        <p:column style="font-weight: bold;">4</p:column>

        <p:column rowspan="2">Utah</p:column>
        <p:column rowspan="2">3</p:column>
    </p:row>

    <p:row>
        <p:column>San Antonio</p:column>
        <p:column >2</p:column>
    </p:row>

    <p:row>
        <p:column colspan="6" styleClass="ui-widget-header">
            <p:spacer height="0"/>
        </p:column>
    </p:row>

    <p:row>
        <p:column style="font-weight: bold;">Chicago</p:column>
        <p:column style="font-weight: bold;">4</p:column>

        <p:column rowspan="2" style="font-weight: bold;">Chicago</p:column>
        <p:column rowspan="2" style="font-weight: bold;">4</p:column>

        <p:column rowspan="5" style="font-weight: bold;">Chicago</p:column>
        <p:column rowspan="5" style="font-weight: bold;">4</p:column>
    </p:row>

    <p:row>
        <p:column>New York</p:column>
        <p:column >1</p:column>
    </p:row>

    <p:row>
        <p:column colspan="4" styleClass="ui-widget-header">
            <p:spacer height="0"/>
        </p:column>
    </p:row>

    <p:row>
        <p:column>Atlanta</p:column>
        <p:column >1</p:column>

        <p:column rowspan="2">Orlando</p:column>
        <p:column rowspan="2">0</p:column>
    </p:row>

    <p:row>
        <p:column style="font-weight: bold;">Orlando</p:column>
        <p:column style="font-weight: bold;">4</p:column>
    </p:row>


    <f:facet name="footer">
        <p:row>
            <p:column  colspan="4" style="text-align: right">
                Finals MVP
            </p:column>
            <p:column  colspan="3" rowspan="3">
                Michael Jordan (Chicago)
            </p:column>
        </p:row>

        <p:row>
            <p:column  colspan="4" style="text-align: right">
                Season MVP
            </p:column>
        </p:row>
        <p:row>
            <p:column  colspan="4" style="text-align: right">
                Top Scorer
            </p:column>
        </p:row>
    </f:facet>
</p:panelGrid>

Upvotes: 1

GF. Service
GF. Service

Reputation: 118

I haven't test it, but I found a example:

http://www.primefaces.org/showcase/ui/data/datatable/group.xhtml

<p:dataTable var="sale" value="#{dtGroupView.sales}">
    <f:facet name="header">
        Sales/Profits of Manufacturers
    </f:facet>

    <p:columnGroup type="header">
        <p:row>
            <p:column colspan="1" headerText="items" />
            <p:column colspan="1" headerText="another" />
        </p:row>
        <p:row>
            <p:column rowspan="4" headerText="Manufacturer" />
        </p:row>
    </p:columnGroup>

    <p:column>
        <h:outputText value="#{sale.item1}" />
    </p:column>
    <p:column>
        <h:outputText value="#{sale.rowsOf4}%" />
    </p:column>

</p:dataTable>

Many be it helps you?

Upvotes: 1

Related Questions