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

PREMIUM TEMPLATES

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

DataTable Row Grouping

Rows can be grouped in two ways, using rowGroup component or with groupRow attribute on a column.

Header Row
RepresentativeNameCountryCompanyStatusDate
Amy Elsner
Amy ElsnerCody Saylors JapanRangoni Of Florence NEW02/14/2021
Amy ElsnerJones Vocelka AustraliaChanay, Jeffrey A Esq QUALIFIED02/16/2021
Amy ElsnerDarci Poquette IndiaRangoni Of Florence QUALIFIED02/07/2021
Amy ElsnerAika Inouye CanadaRangoni Of Florence RENEWAL01/31/2021
Amy ElsnerOctavia Malet SpainFeiner Bros PROPOSAL02/06/2021
Amy ElsnerAdams Morasca United KingdomDorl, James J Esq NEW02/15/2021
Amy ElsnerSmith Glick SpainDorl, James J Esq RENEWAL02/03/2021
Total Customers:7
Anna Fali
Anna FaliIvar Paprocki AustraliaFeiner Bros NEGOTIATION02/18/2021
Anna FaliJames Butt ArgentinaBenton, John B Jr NEW02/24/2021
Anna FaliMurillo Malet FranceDorl, James J Esq NEW02/25/2021
Anna FaliIvar Paprocki FranceBenton, John B Jr QUALIFIED02/15/2021
Total Customers:4
Asiya Javayant
Asiya JavayantMaria Marrier AustraliaChanay, Jeffrey A Esq UNQUALIFIED02/11/2021
Asiya JavayantJones Vocelka ItalyTruhlar And Truhlar Attys UNQUALIFIED02/09/2021
Asiya JavayantJefferson Schemmer RussiaPrinting Dimensions NEGOTIATION02/18/2021
Asiya JavayantJennifer Amigon ArgentinaRousseaux, Michael Esq RENEWAL02/14/2021
Total Customers:4
Bernardo Dominic
Bernardo DominicJennifer Amigon IndiaRousseaux, Michael Esq QUALIFIED02/04/2021
Bernardo DominicCody Saylors ItalyBenton, John B Jr UNQUALIFIED02/01/2021
Bernardo DominicAshley Doe BrazilFeiner Bros NEW01/28/2021
Bernardo DominicJennifer Amigon ArgentinaFeltz Printing Service NEW01/29/2021
Bernardo DominicMujtaba Nicka SpainBenton, John B Jr NEW02/19/2021
Total Customers:5
Elwin Sharvill
Elwin SharvillGreenwood Bolognia BrazilChemel, James L Cpa QUALIFIED02/26/2021
Total Customers:1
Ioni Bowcher
Ioni BowcherArvin Albares CanadaFeltz Printing Service RENEWAL02/14/2021
Ioni BowcherArvin Albares IndiaChemel, James L Cpa UNQUALIFIED02/23/2021
Ioni BowcherIsabel Bowley ItalyChapman, Ross E Esq QUALIFIED02/01/2021
Ioni BowcherNicolas Iturbide IndiaFeiner Bros PROPOSAL02/16/2021
Ioni BowcherJulie Stenseth JapanChanay, Jeffrey A Esq PROPOSAL02/19/2021
Total Customers:5
Ivan Magalhaes
Ivan MagalhaesAdams Morasca AustraliaFeiner Bros QUALIFIED02/11/2021
Ivan MagalhaesEmily Whobrey GermanyRangoni Of Florence NEW02/19/2021
Ivan MagalhaesDavid Darakjy JapanBenton, John B Jr RENEWAL02/03/2021
Ivan MagalhaesArvin Albares SpainMorlong Associates PROPOSAL02/22/2021
Ivan MagalhaesStacey Maclead BrazilChanay, Jeffrey A Esq RENEWAL01/28/2021
Ivan MagalhaesMujtaba Nicka JapanChanay, Jeffrey A Esq PROPOSAL02/08/2021
Total Customers:6
Onyama Limba
Onyama LimbaGreenwood Bolognia IndiaBenton, John B Jr NEW02/13/2021
Onyama LimbaJeanfrancois Venere SpainBenton, John B Jr RENEWAL02/11/2021
Onyama LimbaChavez Briddick JapanBuckley Miller Wright UNQUALIFIED02/08/2021
Onyama LimbaIvar Paprocki SpainFeltz Printing Service PROPOSAL02/15/2021
Onyama LimbaIvar Paprocki JapanCommercial Press QUALIFIED02/12/2021
Onyama LimbaArvin Albares ItalyFeiner Bros QUALIFIED02/25/2021
Onyama LimbaDarci Poquette FranceMorlong Associates NEW02/08/2021
Total Customers:7
Stephen Shaw
Xuxue Feng
Xuxue FengMaisha Rulapaugh IndiaDorl, James J Esq NEW02/11/2021
Xuxue FengNicolas Iturbide FranceBenton, John B Jr PROPOSAL01/29/2021
Xuxue FengNicolas Iturbide United KingdomFeltz Printing Service QUALIFIED02/12/2021
Xuxue FengIsabel Bowley GermanyFeiner Bros UNQUALIFIED02/18/2021
Total Customers:4
Rowspan
RepresentativeNameCountryCompanyStatusDate
Amy ElsnerCody Saylors JapanRangoni Of Florence NEW02/14/2021
Amy ElsnerJones Vocelka AustraliaChanay, Jeffrey A Esq QUALIFIED02/16/2021
Amy ElsnerDarci Poquette IndiaRangoni Of Florence QUALIFIED02/07/2021
Amy ElsnerAika Inouye CanadaRangoni Of Florence RENEWAL01/31/2021
Amy ElsnerOctavia Malet SpainFeiner Bros PROPOSAL02/06/2021
Amy ElsnerAdams Morasca United KingdomDorl, James J Esq NEW02/15/2021
Amy ElsnerSmith Glick SpainDorl, James J Esq RENEWAL02/03/2021
Anna FaliIvar Paprocki AustraliaFeiner Bros NEGOTIATION02/18/2021
Anna FaliJames Butt ArgentinaBenton, John B Jr NEW02/24/2021
Anna FaliMurillo Malet FranceDorl, James J Esq NEW02/25/2021
Anna FaliIvar Paprocki FranceBenton, John B Jr QUALIFIED02/15/2021
Asiya JavayantMaria Marrier AustraliaChanay, Jeffrey A Esq UNQUALIFIED02/11/2021
Asiya JavayantJones Vocelka ItalyTruhlar And Truhlar Attys UNQUALIFIED02/09/2021
Asiya JavayantJefferson Schemmer RussiaPrinting Dimensions NEGOTIATION02/18/2021
Asiya JavayantJennifer Amigon ArgentinaRousseaux, Michael Esq RENEWAL02/14/2021
Bernardo DominicJennifer Amigon IndiaRousseaux, Michael Esq QUALIFIED02/04/2021
Bernardo DominicCody Saylors ItalyBenton, John B Jr UNQUALIFIED02/01/2021
Bernardo DominicAshley Doe BrazilFeiner Bros NEW01/28/2021
Bernardo DominicJennifer Amigon ArgentinaFeltz Printing Service NEW01/29/2021
Bernardo DominicMujtaba Nicka SpainBenton, John B Jr NEW02/19/2021
Elwin SharvillGreenwood Bolognia BrazilChemel, James L Cpa QUALIFIED02/26/2021
Ioni BowcherArvin Albares CanadaFeltz Printing Service RENEWAL02/14/2021
Ioni BowcherArvin Albares IndiaChemel, James L Cpa UNQUALIFIED02/23/2021
Ioni BowcherIsabel Bowley ItalyChapman, Ross E Esq QUALIFIED02/01/2021
Ioni BowcherNicolas Iturbide IndiaFeiner Bros PROPOSAL02/16/2021
Ioni BowcherJulie Stenseth JapanChanay, Jeffrey A Esq PROPOSAL02/19/2021
Ivan MagalhaesAdams Morasca AustraliaFeiner Bros QUALIFIED02/11/2021
Ivan MagalhaesEmily Whobrey GermanyRangoni Of Florence NEW02/19/2021
Ivan MagalhaesDavid Darakjy JapanBenton, John B Jr RENEWAL02/03/2021
Ivan MagalhaesArvin Albares SpainMorlong Associates PROPOSAL02/22/2021
Ivan MagalhaesStacey Maclead BrazilChanay, Jeffrey A Esq RENEWAL01/28/2021
Ivan MagalhaesMujtaba Nicka JapanChanay, Jeffrey A Esq PROPOSAL02/08/2021
Onyama LimbaGreenwood Bolognia IndiaBenton, John B Jr NEW02/13/2021
Onyama LimbaJeanfrancois Venere SpainBenton, John B Jr RENEWAL02/11/2021
Onyama LimbaChavez Briddick JapanBuckley Miller Wright UNQUALIFIED02/08/2021
Onyama LimbaIvar Paprocki SpainFeltz Printing Service PROPOSAL02/15/2021
Onyama LimbaIvar Paprocki JapanCommercial Press QUALIFIED02/12/2021
Onyama LimbaArvin Albares ItalyFeiner Bros QUALIFIED02/25/2021
Onyama LimbaDarci Poquette FranceMorlong Associates NEW02/08/2021
Stephen ShawSmith Glick United KingdomChanay, Jeffrey A Esq NEGOTIATION02/06/2021
Stephen ShawAika Inouye United KingdomTruhlar And Truhlar Attys UNQUALIFIED02/25/2021
Stephen ShawAditya Kusko United KingdomRangoni Of Florence UNQUALIFIED01/30/2021
Stephen ShawIvar Paprocki ItalyKing, Christopher A Esq NEW02/08/2021
Stephen ShawJennifer Amigon CanadaChapman, Ross E Esq QUALIFIED02/13/2021
Stephen ShawArvin Albares ArgentinaChanay, Jeffrey A Esq NEW02/12/2021
Stephen ShawDavid Darakjy IndiaBuckley Miller Wright NEGOTIATION02/22/2021
Xuxue FengMaisha Rulapaugh IndiaDorl, James J Esq NEW02/11/2021
Xuxue FengNicolas Iturbide FranceBenton, John B Jr PROPOSAL01/29/2021
Xuxue FengNicolas Iturbide United KingdomFeltz Printing Service QUALIFIED02/12/2021
Xuxue FengIsabel Bowley GermanyFeiner Bros UNQUALIFIED02/18/2021

<div class="card">
    <h5 class="first">Header Row</h5>
    <h:form>
        <p:dataTable var="customer" value="#{dtRowGroupView.customers}" sortBy="#{customer.representative.name}">
            <p:headerRow field="representative.name"
                         expandable="true" 
                         expanded="#{customer.representative.name != 'Stephen Shaw'}">
                
                <p:column colspan="6">
                    <div class="p-d-inline-flex p-ai-center" style="vertical-align: middle">
                        <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo" width="32" style="vertical-align: middle"/>
                        <h:outputText styleClass="p-ml-2" value="#{customer.representative.name}"/>
                    </div>
                </p:column>
            </p:headerRow>

            <p:column headerText="Representative">
                <h:outputText value="#{customer.representative.name}" />
            </p:column>

            <p:column headerText="Name">
                <h:outputText value="#{customer.name}" />
            </p:column>

            <p:column headerText="Country">
                <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px"/>
                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country}"/>
            </p:column>

            <p:column headerText="Company">
                <h:outputText value="#{customer.company}" />
            </p:column>

            <p:column headerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>

            <p:column headerText="Date">
                <h:outputText value="#{customer.date}">
                    <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
                </h:outputText>
            </p:column>

            <p:summaryRow>
                <p:column colspan="5" style="text-align:right">
                    <h:outputText value="Total Customers:"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{dtRowGroupView.getTotalCount(customer.representative.name)}"/>
                </p:column>
            </p:summaryRow>
        </p:dataTable>
    </h:form>
</div>

<div class="card">
    <h5>Rowspan</h5>
    <h:form>
        <p:dataTable var="customer" value="#{dtRowGroupView.customers}">
            <p:column  headerText="Representative" groupRow="true">
                <p:graphicImage name="images/avatar/#{customer.representative.image}" library="demo"
                                width="32" style="vertical-align: middle"/>
                <h:outputText style="vertical-align: middle; margin-left: .5rem"
                              value="#{customer.representative.name}"/>
            </p:column>

            <p:column headerText="Name">
                <h:outputText value="#{customer.name}" />
            </p:column>

            <p:column headerText="Country">
                <span class="flag flag-#{customer.country.code}" style="width: 30px; height: 20px"/>
                <h:outputText style="vertical-align: middle; margin-left: .5rem" value="#{customer.country}"/>
            </p:column>

            <p:column headerText="Company">
                <h:outputText value="#{customer.company}" />
            </p:column>

            <p:column headerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>

            <p:column headerText="Date">
                <h:outputText value="#{customer.date}">
                    <f:convertDateTime pattern="MM/dd/yyyy" type="localDate"/>
                </h:outputText>
            </p:column>
        </p:dataTable>
    </h:form>
</div>