Locale

Input Style

Free Themes

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

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

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 Scrollable

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical
NameCountryRepresentativeStatus
Aruna FigeroaArgentinaIvan Magalhaes QUALIFIED
Jennifer AmigonUnited KingdomOnyama Limba PROPOSAL
Leja CaldareraBrazilOnyama Limba PROPOSAL
Kaitlin OstroskyIndiaAnna Fali QUALIFIED
Munro FerenczItalyIoni Bowcher NEGOTIATION
Tony FollerFranceStephen Shaw QUALIFIED
Adams MorascaCanadaElwin Sharvill NEGOTIATION
Adams MorascaArgentinaStephen Shaw RENEWAL
Octavia MaletSpainAsiya Javayant NEGOTIATION
Jeanfrancois VenereAustraliaIvan Magalhaes NEGOTIATION
Aruna FigeroaAustraliaAmy Elsner PROPOSAL
Isabel BowleyJapanAmy Elsner NEW
Emily WhobreyArgentinaIvan Magalhaes QUALIFIED
David DarakjyBrazilAnna Fali NEGOTIATION
Silvio SlusarskiSpainAsiya Javayant UNQUALIFIED
Murillo MaletGermanyAsiya Javayant UNQUALIFIED
Stacey MacleadIndiaAnna Fali NEGOTIATION
Faith GillianFranceAmy Elsner NEGOTIATION
Ashley DoeCanadaAmy Elsner NEGOTIATION
Mujtaba NickaArgentinaOnyama Limba PROPOSAL
Isabel BowleySpainStephen Shaw NEW
Alejandro PerinCanadaOnyama Limba RENEWAL
Johnson SergiUnited KingdomAmy Elsner NEGOTIATION
Mayumi KolmetzJapanAsiya Javayant QUALIFIED
Jeanfrancois VenereUnited KingdomIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomOnyama Limba RENEWAL
Antonio CaudySpainElwin Sharvill UNQUALIFIED
Antonio CaudyIndiaOnyama Limba UNQUALIFIED
Sinclair WaycottGermanyStephen Shaw NEGOTIATION
James ButtIndiaIoni Bowcher PROPOSAL
Adams MorascaFranceStephen Shaw RENEWAL
Alejandro PerinAustraliaElwin Sharvill UNQUALIFIED
Adams MorascaUnited KingdomAsiya Javayant PROPOSAL
Smith GlickAustraliaAmy Elsner PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba QUALIFIED
Munro FerenczArgentinaOnyama Limba NEGOTIATION
Kaitlin OstroskyItalyBernardo Dominic UNQUALIFIED
Ivar PaprockiUnited KingdomOnyama Limba RENEWAL
Adams MorascaSpainOnyama Limba NEGOTIATION
Maisha RulapaughSpainAmy Elsner NEGOTIATION
Nicolas IturbideAustraliaBernardo Dominic NEW
Alejandro PerinAustraliaAsiya Javayant NEGOTIATION
Costa DilliardGermanyAmy Elsner NEGOTIATION
Misaki RoysterBrazilAmy Elsner UNQUALIFIED
Stacey MacleadSpainAmy Elsner QUALIFIED
James ButtRussiaXuxue Feng PROPOSAL
Adams MorascaCanadaStephen Shaw UNQUALIFIED
Leja CaldareraJapanOnyama Limba PROPOSAL
Alejandro PerinCanadaStephen Shaw RENEWAL
Jennifer AmigonIndiaIvan Magalhaes NEW
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyAustraliaStephen Shaw QUALIFIED
Salvatore StockhamRussiaAmy Elsner UNQUALIFIED
Stacey MacleadCanadaBernardo Dominic QUALIFIED
Johnson SergiGermanyIvan Magalhaes PROPOSAL
Mayumi KolmetzFranceAsiya Javayant RENEWAL
Leja CaldareraGermanyBernardo Dominic NEGOTIATION
Darci PoquetteAustraliaBernardo Dominic UNQUALIFIED
Greenwood BologniaIndiaAmy Elsner PROPOSAL
Faith GillianFranceAmy Elsner NEW
Silvio SlusarskiUnited KingdomXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickAustralia2021-02-11Truhlar And Truhlar Attys NEW3Ioni Bowcher
1001Chavez BriddickSpain2021-02-24Chemel, James L Cpa NEGOTIATION77Bernardo Dominic
1002Greenwood BologniaCanada2021-02-21King, Christopher A Esq RENEWAL44Ivan Magalhaes
1003Ricardo GauchoRussia2021-03-02Benton, John B Jr NEW47Bernardo Dominic
1004Smith GlickRussia2021-02-28Chanay, Jeffrey A Esq PROPOSAL67Stephen Shaw
1005Johnson SergiAustralia2021-02-23Chemel, James L Cpa QUALIFIED72Xuxue Feng
1006Aditya KuskoSpain2021-02-11Truhlar And Truhlar Attys PROPOSAL68Xuxue Feng
1007Costa DilliardAustralia2021-02-22Rousseaux, Michael Esq NEGOTIATION79Ivan Magalhaes
1008Nicolas IturbideUnited Kingdom2021-02-15Printing Dimensions NEGOTIATION88Elwin Sharvill
1009Aditya KuskoSpain2021-02-05Truhlar And Truhlar Attys UNQUALIFIED89Ioni Bowcher
1010Cody SaylorsSpain2021-02-25Chemel, James L Cpa NEW77Anna Fali
1011David DarakjyRussia2021-02-03Commercial Press QUALIFIED14Bernardo Dominic
1012Julie StensethFrance2021-02-17Benton, John B Jr NEW19Xuxue Feng
1013Aruna FigeroaRussia2021-02-18Commercial Press UNQUALIFIED45Anna Fali
1014Izzy GarufiFrance2021-02-16Printing Dimensions QUALIFIED70Bernardo Dominic
1015Jeanfrancois VenereSpain2021-02-20Chanay, Jeffrey A Esq NEW78Anna Fali
1016Clifford RimUnited Kingdom2021-02-10Feltz Printing Service RENEWAL50Stephen Shaw
1017Salvatore StockhamGermany2021-02-23Printing Dimensions NEGOTIATION87Onyama Limba
1018Claire TollnerIndia2021-02-22Chapman, Ross E Esq NEW91Ivan Magalhaes
1019David DarakjyIndia2021-02-11King, Christopher A Esq NEW4Onyama Limba
1020Jefferson SchemmerSpain2021-02-12Truhlar And Truhlar Attys PROPOSAL65Xuxue Feng
1021Smith GlickAustralia2021-02-27Morlong Associates RENEWAL79Xuxue Feng
1022Greenwood BologniaGermany2021-02-20Chemel, James L Cpa PROPOSAL61Onyama Limba
1023Silvio SlusarskiUnited Kingdom2021-02-27Morlong Associates RENEWAL31Onyama Limba
1024David DarakjyArgentina2021-02-03King, Christopher A Esq UNQUALIFIED23Asiya Javayant
1025Antonio CaudyFrance2021-03-01Feltz Printing Service PROPOSAL7Ivan Magalhaes
1026Adams MorascaCanada2021-02-14Rangoni Of Florence NEW79Onyama Limba
1027Murillo MaletGermany2021-02-20Chanay, Jeffrey A Esq QUALIFIED56Asiya Javayant
1028Ashley DoeFrance2021-02-26Chemel, James L Cpa UNQUALIFIED49Amy Elsner
1029David DarakjyUnited Kingdom2021-02-06Rousseaux, Michael Esq PROPOSAL43Ivan Magalhaes
1030Jones VocelkaItaly2021-03-01Benton, John B Jr UNQUALIFIED6Ioni Bowcher
1031Chavez BriddickIndia2021-02-03Rousseaux, Michael Esq RENEWAL26Elwin Sharvill
1032Jefferson SchemmerCanada2021-02-16Morlong Associates RENEWAL47Anna Fali
1033Cody SaylorsIndia2021-03-01Chapman, Ross E Esq NEGOTIATION30Stephen Shaw
1034Stacey MacleadRussia2021-02-26Rousseaux, Michael Esq RENEWAL25Elwin Sharvill
1035Aruna FigeroaUnited Kingdom2021-02-08Chemel, James L Cpa UNQUALIFIED64Bernardo Dominic
1036Leon OldroydItaly2021-02-14King, Christopher A Esq NEW64Ioni Bowcher
1037Rodrigues CampainCanada2021-02-25Printing Dimensions UNQUALIFIED45Stephen Shaw
1038Darci PoquetteSpain2021-03-01Rousseaux, Michael Esq NEW47Bernardo Dominic
1039Chavez BriddickSpain2021-02-22Printing Dimensions QUALIFIED2Onyama Limba
1040Smith GlickIndia2021-03-04Truhlar And Truhlar Attys PROPOSAL82Amy Elsner
1041Cody SaylorsItaly2021-03-01Chanay, Jeffrey A Esq NEW4Xuxue Feng
1042Faith GillianItaly2021-02-22Chemel, James L Cpa RENEWAL47Amy Elsner
1043Sinclair WaycottFrance2021-03-04Printing Dimensions RENEWAL39Stephen Shaw
1044Isabel BowleyBrazil2021-02-28Commercial Press QUALIFIED14Xuxue Feng
1045Kaitlin OstroskyFrance2021-03-01Truhlar And Truhlar Attys QUALIFIED80Onyama Limba
1046Nicolas IturbideSpain2021-03-01Feiner Bros PROPOSAL81Stephen Shaw
1047Costa DilliardJapan2021-02-13Chanay, Jeffrey A Esq NEW97Amy Elsner
1048Faith GillianUnited Kingdom2021-02-28Morlong Associates NEGOTIATION46Anna Fali
1049Sinclair WaycottIndia2021-02-10Printing Dimensions PROPOSAL22Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaIndiaElwin Sharvill QUALIFIED
Cody SaylorsBrazilBernardo Dominic RENEWAL
Aruna FigeroaArgentinaIoni Bowcher QUALIFIED
Stacey MacleadSpainStephen Shaw NEGOTIATION
Leja CaldareraCanadaElwin Sharvill RENEWAL
Wickens NestleBrazilAmy Elsner RENEWAL
Jones VocelkaIndiaXuxue Feng PROPOSAL
Izzy GarufiGermanyAsiya Javayant QUALIFIED
Emily WhobreyGermanyIoni Bowcher UNQUALIFIED
Leja CaldareraSpainAnna Fali RENEWAL
Maria MarrierGermanyIoni Bowcher UNQUALIFIED
Jefferson SchemmerJapanAnna Fali UNQUALIFIED
Darci PoquetteArgentinaIoni Bowcher UNQUALIFIED
Jefferson SchemmerCanadaOnyama Limba RENEWAL
Clifford RimIndiaStephen Shaw QUALIFIED
Izzy GarufiAustraliaXuxue Feng RENEWAL
Clifford RimRussiaIoni Bowcher RENEWAL
Munro FerenczBrazilOnyama Limba PROPOSAL
Morrow RutaGermanyAnna Fali PROPOSAL
Octavia MaletJapanStephen Shaw NEW
Sinclair WaycottUnited KingdomOnyama Limba RENEWAL
David DarakjyJapanAsiya Javayant NEGOTIATION
Jones VocelkaCanadaStephen Shaw RENEWAL
Ivar PaprockiCanadaElwin Sharvill QUALIFIED
David DarakjyUnited KingdomBernardo Dominic NEGOTIATION
Deepesh ChuiFranceElwin Sharvill PROPOSAL
Rodrigues CampainFranceElwin Sharvill QUALIFIED
Maisha RulapaughFranceAnna Fali QUALIFIED
Antonio CaudyUnited KingdomElwin Sharvill PROPOSAL
Ivar PaprockiArgentinaStephen Shaw RENEWAL
Maisha RulapaughSpainBernardo Dominic NEGOTIATION
David DarakjyGermanyIoni Bowcher RENEWAL
Silvio SlusarskiSpainXuxue Feng NEGOTIATION
Francesco ShinkoArgentinaBernardo Dominic NEGOTIATION
Sinclair WaycottBrazilXuxue Feng PROPOSAL
Morrow RutaIndiaIoni Bowcher RENEWAL
Arvin AlbaresCanadaAmy Elsner QUALIFIED
Nicolas IturbideArgentinaBernardo Dominic QUALIFIED
Rodrigues CampainItalyAmy Elsner NEW
Rodrigues CampainArgentinaAnna Fali QUALIFIED
Antonio CaudyFranceOnyama Limba QUALIFIED
Ivar PaprockiSpainIvan Magalhaes UNQUALIFIED
Mujtaba NickaBrazilOnyama Limba PROPOSAL
Leon OldroydSpainAmy Elsner NEGOTIATION
Ricardo GauchoIndiaAnna Fali NEW
Alejandro PerinUnited KingdomIvan Magalhaes NEGOTIATION
Jennifer AmigonCanadaBernardo Dominic PROPOSAL
Tony FollerArgentinaOnyama Limba PROPOSAL
Leon OldroydCanadaAsiya Javayant QUALIFIED
James ButtRussiaIoni Bowcher PROPOSAL
Frozen Columns
Name
Adams Morasca
Silvio Slusarski
Faith Gillian
Ivar Paprocki
Antonio Caudy
Octavia Malet
Julie Stenseth
James Butt
Izzy Garufi
Julie Stenseth
Maisha Rulapaugh
Kadeem Flosi
Jennifer Amigon
Salvatore Stockham
Alejandro Perin
James Butt
Kadeem Flosi
Ivar Paprocki
Costa Dilliard
Julie Stenseth
Aika Inouye
Chavez Briddick
Aruna Figeroa
Misaki Royster
Juan Wieser
Kadeem Flosi
Darci Poquette
Darci Poquette
Tony Foller
Johnson Sergi
Mujtaba Nicka
Mayumi Kolmetz
Aika Inouye
Leja Caldarera
Jeanfrancois Venere
Darci Poquette
Ashley Doe
Johnson Sergi
Misaki Royster
Maisha Rulapaugh
Jeanfrancois Venere
David Darakjy
Aditya Kusko
Stacey Maclead
Clifford Rim
Ricardo Gaucho
Mayumi Kolmetz
Nicolas Iturbide
Tony Foller
Arvin Albares
IdCountryDate
1000Australia2021-02-12
1001Australia2021-02-23
1002India2021-02-19
1003Brazil2021-03-04
1004Russia2021-02-26
1005India2021-02-14
1006Australia2021-02-20
1007Germany2021-02-20
1008Australia2021-02-20
1009Argentina2021-02-11
1010Brazil2021-02-12
1011Russia2021-02-05
1012Brazil2021-02-26
1013Brazil2021-03-03
1014India2021-02-04
1015Brazil2021-02-14
1016Brazil2021-02-21
1017United Kingdom2021-02-25
1018Argentina2021-02-06
1019Russia2021-02-24
1020Canada2021-02-25
1021Brazil2021-02-18
1022Canada2021-03-03
1023Argentina2021-02-27
1024Brazil2021-02-06
1025Japan2021-02-26
1026Argentina2021-02-12
1027Canada2021-02-24
1028Argentina2021-02-18
1029Argentina2021-02-20
1030Brazil2021-02-19
1031Australia2021-03-02
1032Argentina2021-02-18
1033Argentina2021-02-27
1034Germany2021-02-16
1035Argentina2021-02-10
1036United Kingdom2021-02-16
1037Japan2021-02-24
1038Germany2021-02-14
1039United Kingdom2021-02-08
1040France2021-03-04
1041France2021-02-11
1042United Kingdom2021-02-10
1043France2021-02-21
1044Canada2021-02-04
1045Germany2021-02-13
1046Australia2021-02-27
1047Russia2021-03-04
1048Australia2021-02-11
1049Canada2021-02-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Tony FollerBrazilIvan Magalhaes PROPOSAL
Ricardo GauchoSpainAsiya Javayant PROPOSAL
Deepesh ChuiIndiaAsiya Javayant QUALIFIED
Maria MarrierGermanyElwin Sharvill NEGOTIATION
Costa DilliardUnited KingdomIvan Magalhaes QUALIFIED
James ButtRussiaIoni Bowcher NEW
Octavia MaletFranceOnyama Limba RENEWAL
Kadeem FlosiBrazilOnyama Limba NEGOTIATION
Leja CaldareraGermanyAmy Elsner NEGOTIATION
Darci PoquetteJapanElwin Sharvill UNQUALIFIED
Jennifer AmigonUnited KingdomIvan Magalhaes PROPOSAL
Morrow RutaBrazilOnyama Limba UNQUALIFIED
James ButtSpainOnyama Limba QUALIFIED
Johnson SergiItalyOnyama Limba NEGOTIATION
Costa DilliardGermanyIvan Magalhaes RENEWAL
James ButtBrazilAmy Elsner QUALIFIED
Morrow RutaArgentinaStephen Shaw NEGOTIATION
James ButtGermanyAnna Fali NEW
Ashley DoeGermanyBernardo Dominic QUALIFIED
Kaitlin OstroskyCanadaIoni Bowcher QUALIFIED
Tony FollerIndiaStephen Shaw NEGOTIATION
Munro FerenczSpainIoni Bowcher RENEWAL
Ashley DoeFranceAsiya Javayant RENEWAL
Stacey MacleadRussiaBernardo Dominic QUALIFIED
Aruna FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Misaki RoysterSpainIvan Magalhaes PROPOSAL
Mayumi KolmetzJapanIvan Magalhaes NEGOTIATION
Nicolas IturbideRussiaStephen Shaw QUALIFIED
Arvin AlbaresArgentinaElwin Sharvill NEW
Jeanfrancois VenereFranceIvan Magalhaes NEW
Deepesh ChuiFranceIoni Bowcher NEGOTIATION
Deepesh ChuiAustraliaXuxue Feng UNQUALIFIED
Leon OldroydFranceElwin Sharvill QUALIFIED
Munro FerenczAustraliaElwin Sharvill RENEWAL
Rodrigues CampainArgentinaIoni Bowcher NEW
Sinclair WaycottRussiaXuxue Feng NEGOTIATION
Chavez BriddickAustraliaAmy Elsner NEW
Kadeem FlosiIndiaElwin Sharvill QUALIFIED
Antonio CaudyBrazilBernardo Dominic UNQUALIFIED
Arvin AlbaresIndiaBernardo Dominic PROPOSAL

<style type="text/css">
    .ui-datatable-frozenlayout-left {
        width: 20%;
    }

    .ui-datatable-frozenlayout-right {
        width: 80%;
    }
</style>


<h:form>
    <div class="card">
        <h5 style="margin-top:0">Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers1}" scrollable="true" scrollHeight="250">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers2}" scrollable="true" scrollWidth="600">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Horizontal and Vertical</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers3}" scrollable="true" scrollWidth="50%" scrollHeight="250">
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
            <p:column headerText="Company" footerText="Company">
                <h:outputText value="#{customer.company}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
            <p:column headerText="Activity" footerText="Activity">
                <h:outputText value="#{customer.activity}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers4}" scrollable="true" scrollHeight="250"
                     frozenRows="2">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Frozen Columns</h5>
        <p:dataTable var="customer" value="#{dtScrollView.customers5}" scrollable="true" scrollHeight="250"
                     scrollWidth="300" frozenColumns="1">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Id" footerText="Id">
                <h:outputText value="#{customer.id}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Date" footerText="Date">
                <h:outputText value="#{customer.date}"/>
            </p:column>
        </p:dataTable>
    </div>

    <div class="card">
        <h5>Virtual Scrolling - 20000 Rows</h5>
        <p:dataTable var="customer" value="#{dtScrollView.lazyModel}" scrollRows="20" scrollable="true"
                     virtualScroll="true" scrollHeight="200" rows="40" style="margin-bottom:0">
            <p:column headerText="Name" footerText="Name">
                <h:outputText value="#{customer.name}"/>
            </p:column>
            <p:column headerText="Country" footerText="Country">
                <h:outputText value="#{customer.country}"/>
            </p:column>
            <p:column headerText="Representative" footerText="Representative">
                <h:outputText value="#{customer.representative.name}"/>
            </p:column>
            <p:column headerText="Status" footerText="Status">
                <span class="customer-badge status-#{customer.status.name().toLowerCase()}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>