DataGrid - Basic

DataGrid displays data in a grid layout. Responsive mode is provided to optimize the display for different screen sizes.

Documentation
Cars for Sale
d110213c
1984
ba75cb54
1971
e6fafea4
1984
4a0a619e
1990
868d614a
1962
cae18102
1976
22df612b
1997
c896f0dd
1962
12aae513
1993
29d1399c
1961
b6771a40
1985
30d13c1a
1983
Car Info
<style type="text/css">
    .value {
        font-weight: bold;
    }
</style>


<h:form id="form">
    <p:dataGrid var="car" value="#{dataGridView.cars}" columns="3" layout="grid"
        rows="12" paginator="true" id="cars"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="6,12,16">
        
        <f:facet name="header">
            Cars for Sale
        </f:facet>

        <p:panel header="#{car.id}" style="text-align:center">
            <h:panelGrid columns="1" style="width:100%">
                <p:graphicImage name="demo/images/car/#{car.brand}.gif"/> 

                <h:outputText value="#{car.year}" />

                <p:commandLink update=":form:carDetail" oncomplete="PF('carDialog').show()" title="View Detail">
                    <h:outputText styleClass="pi pi-search" style="margin:0 auto;"/>
                    <f:setPropertyActionListener value="#{car}" target="#{dataGridView.selectedCar}" />
                </p:commandLink>
            </h:panelGrid>
        </p:panel>

    </p:dataGrid>

    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
        <p:outputPanel id="carDetail" style="text-align:center;">
            <p:panelGrid  columns="2" rendered="#{not empty dataGridView.selectedCar}" columnClasses="label,value">
                <f:facet name="header">
                    <p:graphicImage name="demo/images/car/#{dataGridView.selectedCar.brand}-big.gif"/> 
                </f:facet>
                
                <h:outputText value="Id:" />
                <h:outputText value="#{dataGridView.selectedCar.id}" />

                <h:outputText value="Year" />
                <h:outputText value="#{dataGridView.selectedCar.year}" />

                <h:outputText value="Color:" />
                <h:outputText value="#{dataGridView.selectedCar.color}" style="color:#{dataGridView.selectedCar.color}"/>
            
                <h:outputText value="Price" />
                <h:outputText value="$#{dataGridView.selectedCar.price}" />
            </p:panelGrid>
        </p:outputPanel>
    </p:dialog>
</h:form>

FREE THEMES

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

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.