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 ElsnerJulie Stenseth IndiaRangoni Of Florence NEGOTIATION02/07/2021
Amy ElsnerRodrigues Campain ItalyBuckley Miller Wright PROPOSAL02/02/2021
Amy ElsnerFaith Gillian RussiaKing, Christopher A Esq NEW01/30/2021
Amy ElsnerJames Butt ItalyKing, Christopher A Esq PROPOSAL02/07/2021
Total Customers:4
Anna Fali
Anna FaliAruna Figeroa ItalyPrinting Dimensions PROPOSAL02/14/2021
Anna FaliMayumi Kolmetz JapanRangoni Of Florence NEW02/07/2021
Anna FaliDarci Poquette ItalyFeiner Bros NEW02/20/2021
Anna FaliLeja Caldarera United KingdomBuckley Miller Wright NEW02/05/2021
Anna FaliGreenwood Bolognia JapanTruhlar And Truhlar Attys NEGOTIATION02/21/2021
Total Customers:5
Asiya Javayant
Asiya JavayantSinclair Waycott JapanTruhlar And Truhlar Attys NEW02/25/2021
Asiya JavayantDeepesh Chui United KingdomBuckley Miller Wright RENEWAL01/29/2021
Asiya JavayantTony Foller FranceFeiner Bros UNQUALIFIED02/15/2021
Asiya JavayantAdams Morasca FranceCommercial Press UNQUALIFIED02/17/2021
Asiya JavayantJones Vocelka ItalyRousseaux, Michael Esq RENEWAL02/04/2021
Asiya JavayantJennifer Amigon RussiaChanay, Jeffrey A Esq RENEWAL01/31/2021
Asiya JavayantMorrow Ruta ItalyDorl, James J Esq NEGOTIATION02/23/2021
Asiya JavayantMayumi Kolmetz GermanyFeiner Bros NEGOTIATION02/07/2021
Total Customers:8
Bernardo Dominic
Bernardo DominicKaitlin Ostrosky IndiaFeltz Printing Service RENEWAL02/16/2021
Bernardo DominicFaith Gillian ArgentinaRousseaux, Michael Esq NEGOTIATION02/22/2021
Bernardo DominicStacey Maclead AustraliaChanay, Jeffrey A Esq RENEWAL02/05/2021
Bernardo DominicEmily Whobrey JapanChapman, Ross E Esq RENEWAL02/17/2021
Total Customers:4
Elwin Sharvill
Elwin SharvillTony Foller ArgentinaTruhlar And Truhlar Attys RENEWAL02/20/2021
Elwin SharvillClifford Rim FranceFeiner Bros RENEWAL02/05/2021
Elwin SharvillSilvio Slusarski ItalyChemel, James L Cpa RENEWAL02/14/2021
Elwin SharvillLeon Oldroyd AustraliaChapman, Ross E Esq RENEWAL02/21/2021
Elwin SharvillGreenwood Bolognia ItalyPrinting Dimensions PROPOSAL02/13/2021
Total Customers:5
Ioni Bowcher
Ioni BowcherAika Inouye JapanBenton, John B Jr RENEWAL02/09/2021
Ioni BowcherAika Inouye GermanyPrinting Dimensions RENEWAL02/16/2021
Ioni BowcherJones Vocelka ArgentinaDorl, James J Esq NEGOTIATION01/30/2021
Ioni BowcherSinclair Waycott CanadaChemel, James L Cpa UNQUALIFIED02/20/2021
Ioni BowcherSilvio Slusarski AustraliaKing, Christopher A Esq NEGOTIATION02/13/2021
Total Customers:5
Ivan Magalhaes
Ivan MagalhaesSmith Glick BrazilBenton, John B Jr PROPOSAL02/22/2021
Ivan MagalhaesChavez Briddick BrazilBenton, John B Jr NEGOTIATION01/29/2021
Ivan MagalhaesJames Butt CanadaKing, Christopher A Esq NEW01/29/2021
Ivan MagalhaesAntonio Caudy JapanRangoni Of Florence NEW02/25/2021
Total Customers:4
Onyama Limba
Onyama LimbaJuan Wieser JapanRousseaux, Michael Esq QUALIFIED02/05/2021
Onyama LimbaMorrow Ruta RussiaDorl, James J Esq QUALIFIED02/17/2021
Onyama LimbaJohnson Sergi AustraliaRousseaux, Michael Esq QUALIFIED02/09/2021
Onyama LimbaJulie Stenseth IndiaMorlong Associates NEGOTIATION02/05/2021
Onyama LimbaChavez Briddick FranceTruhlar And Truhlar Attys PROPOSAL02/16/2021
Total Customers:5
Stephen Shaw
Xuxue Feng
Xuxue FengOctavia Malet CanadaBuckley Miller Wright PROPOSAL02/25/2021
Xuxue FengAdams Morasca ArgentinaTruhlar And Truhlar Attys QUALIFIED02/14/2021
Total Customers:2
Rowspan
RepresentativeNameCountryCompanyStatusDate
Amy ElsnerJulie Stenseth IndiaRangoni Of Florence NEGOTIATION02/07/2021
Amy ElsnerRodrigues Campain ItalyBuckley Miller Wright PROPOSAL02/02/2021
Amy ElsnerFaith Gillian RussiaKing, Christopher A Esq NEW01/30/2021
Amy ElsnerJames Butt ItalyKing, Christopher A Esq PROPOSAL02/07/2021
Anna FaliAruna Figeroa ItalyPrinting Dimensions PROPOSAL02/14/2021
Anna FaliMayumi Kolmetz JapanRangoni Of Florence NEW02/07/2021
Anna FaliDarci Poquette ItalyFeiner Bros NEW02/20/2021
Anna FaliLeja Caldarera United KingdomBuckley Miller Wright NEW02/05/2021
Anna FaliGreenwood Bolognia JapanTruhlar And Truhlar Attys NEGOTIATION02/21/2021
Asiya JavayantSinclair Waycott JapanTruhlar And Truhlar Attys NEW02/25/2021
Asiya JavayantDeepesh Chui United KingdomBuckley Miller Wright RENEWAL01/29/2021
Asiya JavayantTony Foller FranceFeiner Bros UNQUALIFIED02/15/2021
Asiya JavayantAdams Morasca FranceCommercial Press UNQUALIFIED02/17/2021
Asiya JavayantJones Vocelka ItalyRousseaux, Michael Esq RENEWAL02/04/2021
Asiya JavayantJennifer Amigon RussiaChanay, Jeffrey A Esq RENEWAL01/31/2021
Asiya JavayantMorrow Ruta ItalyDorl, James J Esq NEGOTIATION02/23/2021
Asiya JavayantMayumi Kolmetz GermanyFeiner Bros NEGOTIATION02/07/2021
Bernardo DominicKaitlin Ostrosky IndiaFeltz Printing Service RENEWAL02/16/2021
Bernardo DominicFaith Gillian ArgentinaRousseaux, Michael Esq NEGOTIATION02/22/2021
Bernardo DominicStacey Maclead AustraliaChanay, Jeffrey A Esq RENEWAL02/05/2021
Bernardo DominicEmily Whobrey JapanChapman, Ross E Esq RENEWAL02/17/2021
Elwin SharvillTony Foller ArgentinaTruhlar And Truhlar Attys RENEWAL02/20/2021
Elwin SharvillClifford Rim FranceFeiner Bros RENEWAL02/05/2021
Elwin SharvillSilvio Slusarski ItalyChemel, James L Cpa RENEWAL02/14/2021
Elwin SharvillLeon Oldroyd AustraliaChapman, Ross E Esq RENEWAL02/21/2021
Elwin SharvillGreenwood Bolognia ItalyPrinting Dimensions PROPOSAL02/13/2021
Ioni BowcherAika Inouye JapanBenton, John B Jr RENEWAL02/09/2021
Ioni BowcherAika Inouye GermanyPrinting Dimensions RENEWAL02/16/2021
Ioni BowcherJones Vocelka ArgentinaDorl, James J Esq NEGOTIATION01/30/2021
Ioni BowcherSinclair Waycott CanadaChemel, James L Cpa UNQUALIFIED02/20/2021
Ioni BowcherSilvio Slusarski AustraliaKing, Christopher A Esq NEGOTIATION02/13/2021
Ivan MagalhaesSmith Glick BrazilBenton, John B Jr PROPOSAL02/22/2021
Ivan MagalhaesChavez Briddick BrazilBenton, John B Jr NEGOTIATION01/29/2021
Ivan MagalhaesJames Butt CanadaKing, Christopher A Esq NEW01/29/2021
Ivan MagalhaesAntonio Caudy JapanRangoni Of Florence NEW02/25/2021
Onyama LimbaJuan Wieser JapanRousseaux, Michael Esq QUALIFIED02/05/2021
Onyama LimbaMorrow Ruta RussiaDorl, James J Esq QUALIFIED02/17/2021
Onyama LimbaJohnson Sergi AustraliaRousseaux, Michael Esq QUALIFIED02/09/2021
Onyama LimbaJulie Stenseth IndiaMorlong Associates NEGOTIATION02/05/2021
Onyama LimbaChavez Briddick FranceTruhlar And Truhlar Attys PROPOSAL02/16/2021
Stephen ShawClifford Rim JapanFeltz Printing Service QUALIFIED02/15/2021
Stephen ShawCosta Dilliard SpainChapman, Ross E Esq RENEWAL02/02/2021
Stephen ShawLeja Caldarera IndiaCommercial Press NEGOTIATION02/09/2021
Stephen ShawIvar Paprocki United KingdomDorl, James J Esq NEW02/09/2021
Stephen ShawMujtaba Nicka AustraliaChemel, James L Cpa QUALIFIED02/18/2021
Stephen ShawAdams Morasca AustraliaFeltz Printing Service NEGOTIATION02/13/2021
Stephen ShawCosta Dilliard JapanKing, Christopher A Esq NEGOTIATION02/11/2021
Stephen ShawIzzy Garufi CanadaChanay, Jeffrey A Esq PROPOSAL02/05/2021
Xuxue FengOctavia Malet CanadaBuckley Miller Wright PROPOSAL02/25/2021
Xuxue FengAdams Morasca ArgentinaTruhlar And Truhlar Attys QUALIFIED02/14/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>