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 (Basic)

Content
Content
Content
Content
Content
Content
Content
Content
Content

Responsive (ColumnClasses)

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

Responsive (PrimeFlex, Basic)

Content
Content
Content
Content
Content
Content
Content
Content
Content

Responsive (PrimeFlex, ColumnClasses)

Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content
Content

Responsive (PrimeFlex, p-align-baseline)

Checkbox

Responsive (PrimeFlex, align-items: center)

Checkbox

Responsive (PrimeFlex, Default alignment)

Checkbox

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
<style type="text/css">
    .ui-panelgrid.showcase-text-align-center .ui-grid-responsive .ui-panelgrid-cell {
        text-align: center;
    }

    .customPanelGrid .ui-panelgrid-content {
        align-items: center;
    }
</style>


<h3 style="margin-top:0">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 (Basic)</h3>
<p:panelGrid columns="3" layout="grid" styleClass="showcase-text-align-center">
    <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>Responsive (ColumnClasses)</h3>
<p:panelGrid columns="4" layout="grid" styleClass="showcase-text-align-center" columnClasses="ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3, ui-g-12 ui-md-6 ui-lg-3">
    <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" />
    <h:outputText value="Content" />
    <h:outputText value="Content" />
    <h:outputText value="Content" />
</p:panelGrid>

<h3>Responsive (PrimeFlex, Basic)</h3>
<p:panelGrid columns="3" layout="flex" styleClass="showcase-text-align-center">
    <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>Responsive (PrimeFlex, ColumnClasses)</h3>
<p:panelGrid columns="4" layout="flex" styleClass="showcase-text-align-center" columnClasses="p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3, p-col-12 p-md-6 p-lg-3">
    <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" />
    <h:outputText value="Content" />
    <h:outputText value="Content" />
    <h:outputText value="Content" />
</p:panelGrid>

<h3>Responsive (PrimeFlex, p-align-baseline)</h3>
<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="p-align-baseline ui-fluid">
    <p:outputLabel for="text1" value="Text 1" />
    <p:inputText id="text1" />

    <p:outputLabel for="text2" value="Text 2" />
    <p:inputText id="text2" />

    <p:outputLabel for="date" value="Date" />
    <p:datePicker id="date" showIcon="true" style="width:auto" />

    <p:outputLabel for="checkbox" value="Checkbox" />
    <p:selectBooleanCheckbox id="checkbox" itemLabel="Checkbox" />

    <p:outputLabel for="text3" value="Text 3" />
    <p:inputText id="text3" />

    <p:outputLabel for="selectOne" value="SelectOne (misaligned)" />
    <p:selectOneMenu id="selectOne">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectOneMenu>
</p:panelGrid>

<h3>Responsive (PrimeFlex, align-items: center)</h3>
<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" styleClass="customPanelGrid" contentStyleClass="ui-fluid">
    <p:outputLabel for="textA1" value="Text 1" />
    <p:inputText id="textA1" />

    <p:outputLabel for="textA2" value="Text 2" />
    <p:inputText id="textA2" />

    <p:outputLabel for="dateA" value="Date" />
    <p:datePicker id="dateA" showIcon="true" style="width:auto" />

    <p:outputLabel for="checkboxA" value="Checkbox" />
    <p:selectBooleanCheckbox id="checkboxA" itemLabel="Checkbox" />

    <p:outputLabel for="text3A" value="Text 3" />
    <p:inputText id="text3A" />

    <p:outputLabel for="selectOneA" value="SelectOne" />
    <p:selectOneMenu id="selectOneA">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectOneMenu>
</p:panelGrid>

<h3>Responsive (PrimeFlex, Default alignment)</h3>
<p:panelGrid columns="4" layout="flex" columnClasses="p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4, p-col-12 p-md-3 p-xl-2, p-col-12 p-md-9 p-xl-4" contentStyleClass="ui-fluid">
    <p:outputLabel for="textB1" value="Text 1" />
    <p:inputText id="textB1" />

    <p:outputLabel for="textB2" value="Text 2" />
    <p:inputText id="textB2" />

    <p:outputLabel for="dateB" value="Date" />
    <p:datePicker id="dateB" showIcon="true" style="width:auto" />

    <p:outputLabel for="checkboxB" value="Checkbox" />
    <p:selectBooleanCheckbox id="checkboxB" itemLabel="Checkbox" />

    <p:outputLabel for="text3B" value="Text 3" />
    <p:inputText id="text3B" />

    <p:outputLabel for="selectOneB" value="SelectOne" />
    <p:selectOneMenu id="selectOneB">
        <f:selectItem itemLabel="Select One" itemValue="" />
        <f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
        <f:selectItem itemLabel="PS4" itemValue="PS4" />
        <f:selectItem itemLabel="Wii U" itemValue="Wii U" />
    </p:selectOneMenu>
</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>