Locale

Language
English
English
English
French
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Czech
Greek
Persian
Finnish
Danish
Hindi
Indonesian
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Swedish
Thai
Turkish
Ukrainian
Vietnamese
Chinese
Chinese

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

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, align-items-baseline)
Checkbox
Responsive (PrimeFlex, align-items: center)
Checkbox
Responsive (PrimeFlex, Default alignment)
Checkbox
Grouping (deprecated)
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
Responsive Grid
Biographic
Vehicle

It should be noted that the use of @next is not possible for the Registration Number outputLabel and the for attribute should utilize an ID as shown in the example. The other outputLabel and inputText fields do not require this as they are the natural next element whereas Registration Number is encapsulated in a column.


<style>
    .ui-panelgrid.showcase-text-align-center .ui-grid-responsive .ui-panelgrid-cell {
        text-align: center;
    }

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


<div class="card">
    <h5 style="margin-top:0">Basic</h5>
    <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>
</div>

<div class="card">
    <h5>Responsive (Basic)</h5>
    <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>
</div>

<div class="card">
    <h5>Responsive (ColumnClasses)</h5>
    <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>
</div>

<div class="card">
    <h5>Responsive (PrimeFlex, Basic)</h5>
    <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>
</div>

<div class="card">
    <h5>Responsive (PrimeFlex, ColumnClasses)</h5>
    <p:panelGrid columns="4" layout="flex" styleClass="showcase-text-align-center"
                 columnClasses="col-12 md:col-6 lg:col-3, col-12 md:col-6 lg:col-3, col-12 md:col-6 lg:col-3, col-12 md:col-6 lg:col-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>
</div>

<div class="card">
    <h5>Responsive (PrimeFlex, align-items-baseline)</h5>
    <p:panelGrid columns="4" layout="flex"
                 columnClasses="col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-4, col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-4"
                 contentStyleClass="align-items-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>
</div>

<div class="card">
    <h5>Responsive (PrimeFlex, align-items: center)</h5>
    <p:panelGrid columns="4" layout="flex"
                 columnClasses="col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-4, col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-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>
</div>

<div class="card">
    <h5>Responsive (PrimeFlex, Default alignment)</h5>
    <p:panelGrid columns="4" layout="flex"
                 columnClasses="col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-4, col-12 md:col-3 xl:col-2, col-12 md:col-9 xl:col-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>
</div>

<div class="card">
    <h5>Grouping (deprecated)</h5>
    <p:panelGrid style="margin-top:20px" layout="tabular" columns="0">
        <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>
</div>

<div class="card">
    <h5>Responsive Grid</h5>
    <style>
        /* reset on the showcase style*/
        body .ui-panelgrid .ui-panelgrid-cell {
            background-color: transparent;
        }

        /* example use of styles for your form */
        .my-heading-row {
            background-color: var(--surface-c);
            font-weight: bold;
        }
    </style>

    <!--
    Note: Rows and columns can have style, styleClass, and id.
    Note: A column with a defined styleClass will ignore the styleClass specified in the columnClasses list.
    Note: Note the use of ui-fluid to ensure that components are sized correctly and the use of ui-panelgrid-blank to remove borders.
    -->
    <p:panelGrid columns="4"
                 columnClasses="ui-grid-col-2,ui-grid-col-4,ui-grid-col-2,ui-grid-col-4"
                 layout="grid"
                 styleClass="ui-panelgrid-blank ui-fluid"
                 style="border:0px none; background-color:transparent;">

        <p:row styleClass="my-heading-row">
            Biographic
        </p:row>

        <p:outputLabel for="@next" value="First Name"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Last Name"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Phone"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Email"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Address"/>
        <p:inputTextarea rows="3"/>

        <p:row id="my-row-id" styleClass="my-heading-row" style="font-weight: bold">
            Vehicle
        </p:row>

        <p:outputLabel for="@next" value="Manufacturer"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Series"/>
        <p:inputText/>

        <p:outputLabel for="@next" value="Color"/>
        <p:inputText/>

        <p:outputLabel for="idReg" value="Registration Number"/>
        <p:column style="background-color: lightcoral">
            <p:inputText id="idReg"/>
        </p:column>

        <p:row>
            <p:column styleClass="ui-grid-col-12">
                <p>It should be noted that the use of @next is not possible for the
                    <u>Registration Number</u> outputLabel and the <u>for</u> attribute
                    should utilize an ID as shown in the example. The other outputLabel and inputText fields do not require this
                    as they are the natural next element whereas
                    <u>Registration Number</u> is encapsulated in a column.</p>
            </p:column>
        </p:row>

        <p:row>
            <p:column styleClass="ui-grid-col-12">
                <p:commandButton value="Accept" styleClass="mr-2" style="width: auto"/>
                <p:commandButton value="Reject" styleClass="mr-2" style="width: auto"/>
                <p:commandButton value="Refer" style="width: auto" />
            </p:column>
        </p:row>
    </p:panelGrid>
</div>