PanelGrid PanelGrid is an extension to the standard panelGrid with theme integration, grouping and responsive features.

Basic

Name:Kobe Bryant
Team:Los Angeles Lakers
Position:Shooting Guard
Number:24

Responsive

Content
Content
Content
Content
Content
Content
Content
Content
Content

Grouping

1995-96 NBA Playoffs
Conf. SemifinalsConf. FinalsNBA FinalsChampion
Finals MVP Michael Jordan (Chicago)
Season MVP
Top Scorer
Seattle4Seattle4Seattle2Chicago
Houston0
Utah4Utah3
San Antonio2
Chicago4Chicago4Chicago4
New York1
Atlanta1Orlando0
Orlando4
<h3>Basic</h3>
<p:panelGrid columns="2">
    <f:facet name="header">
        <p:graphicImage name="demo/images/misc/kobe.png" />
    </f:facet>

    <h:outputText value="Name:" />
    <h:outputText value="Kobe Bryant" />

    <h:outputText value="Team:" />
    <h:outputText value="Los Angeles Lakers" />

    <h:outputText value="Position:" />
    <h:outputText value="Shooting Guard" />

    <h:outputText value="Number:" />
    <h:outputText value="24" />
</p:panelGrid>

<h3>Responsive</h3>
<p:panelGrid columns="3" layout="grid">            
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 

    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
    <h:outputText value="Content" /> 
</p:panelGrid>

<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>
                
PrimeTek, Copyright © 2017
All rights reserved.
Running PrimeFaces-6.2-SNAPSHOT on Mojarra-2.3.2.