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
Leja CaldareraIndiaIvan Magalhaes NEGOTIATION
Aditya KuskoBrazilIvan Magalhaes NEGOTIATION
Julie StensethItalyAnna Fali QUALIFIED
Salvatore StockhamJapanStephen Shaw NEGOTIATION
Munro FerenczIndiaElwin Sharvill PROPOSAL
Aruna FigeroaArgentinaAsiya Javayant PROPOSAL
Faith GillianFranceIoni Bowcher QUALIFIED
Deepesh ChuiArgentinaElwin Sharvill PROPOSAL
Kadeem FlosiCanadaElwin Sharvill UNQUALIFIED
Octavia MaletBrazilBernardo Dominic PROPOSAL
Mujtaba NickaRussiaStephen Shaw QUALIFIED
Munro FerenczGermanyXuxue Feng UNQUALIFIED
Adams MorascaCanadaElwin Sharvill RENEWAL
Costa DilliardCanadaAnna Fali PROPOSAL
Leon OldroydJapanIvan Magalhaes RENEWAL
Alejandro PerinAustraliaIoni Bowcher NEGOTIATION
David DarakjyGermanyAnna Fali UNQUALIFIED
Jeanfrancois VenereFranceIvan Magalhaes UNQUALIFIED
Adams MorascaGermanyIoni Bowcher QUALIFIED
Silvio SlusarskiCanadaIvan Magalhaes QUALIFIED
Chavez BriddickRussiaElwin Sharvill RENEWAL
Octavia MaletFranceIoni Bowcher UNQUALIFIED
Sinclair WaycottCanadaBernardo Dominic QUALIFIED
Leon OldroydJapanAmy Elsner NEW
David DarakjySpainAsiya Javayant RENEWAL
Ashley DoeBrazilBernardo Dominic RENEWAL
Isabel BowleySpainAmy Elsner UNQUALIFIED
Juan WieserGermanyAsiya Javayant NEW
Ricardo GauchoSpainBernardo Dominic QUALIFIED
Sinclair WaycottArgentinaXuxue Feng QUALIFIED
Ivar PaprockiAustraliaOnyama Limba PROPOSAL
Julie StensethItalyAsiya Javayant PROPOSAL
Darci PoquetteJapanAmy Elsner RENEWAL
Tony FollerSpainStephen Shaw NEW
Darci PoquetteArgentinaElwin Sharvill UNQUALIFIED
Mujtaba NickaItalyIvan Magalhaes UNQUALIFIED
Mayumi KolmetzSpainElwin Sharvill PROPOSAL
Izzy GarufiUnited KingdomOnyama Limba PROPOSAL
Darci PoquetteBrazilStephen Shaw NEGOTIATION
Johnson SergiIndiaAmy Elsner NEW
Kaitlin OstroskyUnited KingdomIoni Bowcher QUALIFIED
David DarakjyBrazilIoni Bowcher NEW
Faith GillianUnited KingdomOnyama Limba NEGOTIATION
Rodrigues CampainUnited KingdomStephen Shaw UNQUALIFIED
Julie StensethAustraliaXuxue Feng PROPOSAL
Tony FollerAustraliaIvan Magalhaes RENEWAL
Chavez BriddickUnited KingdomAnna Fali UNQUALIFIED
Sinclair WaycottGermanyStephen Shaw QUALIFIED
Cody SaylorsJapanXuxue Feng NEGOTIATION
Claire TollnerAustraliaAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Munro FerenczArgentinaAsiya Javayant QUALIFIED
Morrow RutaGermanyAnna Fali NEW
Alejandro PerinIndiaOnyama Limba UNQUALIFIED
Leon OldroydSpainElwin Sharvill RENEWAL
Arvin AlbaresGermanyAnna Fali PROPOSAL
Cody SaylorsItalyBernardo Dominic NEW
Faith GillianAustraliaStephen Shaw RENEWAL
Claire TollnerGermanyIoni Bowcher QUALIFIED
Chavez BriddickRussiaAmy Elsner RENEWAL
Chavez BriddickFranceIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinRussia2021-02-22Printing Dimensions NEW88Bernardo Dominic
1001Silvio SlusarskiJapan2021-02-14King, Christopher A Esq NEGOTIATION55Stephen Shaw
1002Clifford RimAustralia2021-02-12Benton, John B Jr PROPOSAL96Onyama Limba
1003Mujtaba NickaRussia2021-02-26Dorl, James J Esq NEGOTIATION1Ioni Bowcher
1004Kadeem FlosiAustralia2021-02-08Buckley Miller Wright PROPOSAL76Stephen Shaw
1005Jones VocelkaBrazil2021-02-23Commercial Press UNQUALIFIED38Amy Elsner
1006Nicolas IturbideBrazil2021-02-18Buckley Miller Wright QUALIFIED4Elwin Sharvill
1007Francesco ShinkoItaly2021-02-27Benton, John B Jr UNQUALIFIED29Asiya Javayant
1008Arvin AlbaresSpain2021-02-05Rangoni Of Florence QUALIFIED9Stephen Shaw
1009Adams MorascaArgentina2021-02-13Buckley Miller Wright NEGOTIATION6Asiya Javayant
1010Ivar PaprockiCanada2021-02-16Benton, John B Jr NEW90Stephen Shaw
1011Costa DilliardRussia2021-02-26Printing Dimensions PROPOSAL64Amy Elsner
1012Mayumi KolmetzCanada2021-02-07Truhlar And Truhlar Attys NEW79Stephen Shaw
1013Faith GillianAustralia2021-02-13Buckley Miller Wright UNQUALIFIED86Asiya Javayant
1014Adams MorascaArgentina2021-02-06Rousseaux, Michael Esq NEGOTIATION75Xuxue Feng
1015Deepesh ChuiCanada2021-02-14Chapman, Ross E Esq PROPOSAL96Anna Fali
1016Tony FollerAustralia2021-02-12Chapman, Ross E Esq NEGOTIATION35Elwin Sharvill
1017Salvatore StockhamJapan2021-02-16Feltz Printing Service NEW67Bernardo Dominic
1018Darci PoquetteItaly2021-03-06Chapman, Ross E Esq NEGOTIATION69Ivan Magalhaes
1019Silvio SlusarskiArgentina2021-02-08Dorl, James J Esq PROPOSAL34Stephen Shaw
1020Salvatore StockhamItaly2021-02-26Morlong Associates QUALIFIED13Ivan Magalhaes
1021Wickens NestleSpain2021-03-01Truhlar And Truhlar Attys NEGOTIATION34Elwin Sharvill
1022Antonio CaudyUnited Kingdom2021-02-14Rousseaux, Michael Esq PROPOSAL4Ioni Bowcher
1023David DarakjyFrance2021-02-06Chemel, James L Cpa QUALIFIED9Onyama Limba
1024Tony FollerCanada2021-02-08Chanay, Jeffrey A Esq RENEWAL35Ivan Magalhaes
1025Mujtaba NickaJapan2021-02-25Chanay, Jeffrey A Esq QUALIFIED31Ivan Magalhaes
1026Darci PoquetteSpain2021-02-28Rangoni Of Florence PROPOSAL90Anna Fali
1027Arvin AlbaresFrance2021-02-05King, Christopher A Esq PROPOSAL91Stephen Shaw
1028Izzy GarufiSpain2021-02-05Commercial Press QUALIFIED61Ioni Bowcher
1029Wickens NestleGermany2021-02-19King, Christopher A Esq RENEWAL35Stephen Shaw
1030Kadeem FlosiItaly2021-02-09Commercial Press RENEWAL98Anna Fali
1031Salvatore StockhamIndia2021-02-09Truhlar And Truhlar Attys NEW92Ioni Bowcher
1032Sinclair WaycottUnited Kingdom2021-02-18Chanay, Jeffrey A Esq NEW42Amy Elsner
1033Leon OldroydItaly2021-02-27Printing Dimensions UNQUALIFIED47Amy Elsner
1034Alejandro PerinJapan2021-02-25Chanay, Jeffrey A Esq PROPOSAL51Anna Fali
1035Maria MarrierJapan2021-03-03Printing Dimensions PROPOSAL89Stephen Shaw
1036Johnson SergiBrazil2021-02-21Chapman, Ross E Esq UNQUALIFIED41Stephen Shaw
1037Aditya KuskoSpain2021-02-20Truhlar And Truhlar Attys PROPOSAL93Stephen Shaw
1038Claire TollnerItaly2021-03-04Rangoni Of Florence PROPOSAL86Stephen Shaw
1039Adams MorascaUnited Kingdom2021-02-16Rousseaux, Michael Esq PROPOSAL19Bernardo Dominic
1040Kaitlin OstroskyUnited Kingdom2021-02-12Buckley Miller Wright PROPOSAL51Onyama Limba
1041Emily WhobreyRussia2021-03-03Morlong Associates PROPOSAL89Ivan Magalhaes
1042Jeanfrancois VenereSpain2021-02-28Chemel, James L Cpa NEW44Ivan Magalhaes
1043Aditya KuskoBrazil2021-02-23Buckley Miller Wright RENEWAL60Amy Elsner
1044James ButtSpain2021-02-26Benton, John B Jr NEW96Onyama Limba
1045Sinclair WaycottJapan2021-03-03Truhlar And Truhlar Attys QUALIFIED62Ivan Magalhaes
1046Jefferson SchemmerFrance2021-02-11Commercial Press RENEWAL21Ivan Magalhaes
1047Izzy GarufiFrance2021-02-24Feltz Printing Service RENEWAL43Asiya Javayant
1048Morrow RutaFrance2021-02-25Buckley Miller Wright PROPOSAL38Anna Fali
1049Mayumi KolmetzItaly2021-02-23Chapman, Ross E Esq PROPOSAL49Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottFranceAmy Elsner UNQUALIFIED
Julie StensethJapanXuxue Feng NEGOTIATION
Salvatore StockhamItalyBernardo Dominic UNQUALIFIED
Tony FollerSpainXuxue Feng PROPOSAL
Maria MarrierItalyOnyama Limba NEW
Deepesh ChuiAustraliaAmy Elsner NEW
Arvin AlbaresUnited KingdomAmy Elsner QUALIFIED
Munro FerenczCanadaAnna Fali RENEWAL
Ivar PaprockiSpainIoni Bowcher NEW
Kaitlin OstroskyFranceElwin Sharvill RENEWAL
Clifford RimUnited KingdomIoni Bowcher RENEWAL
Jefferson SchemmerRussiaAnna Fali QUALIFIED
Leon OldroydItalyXuxue Feng NEW
Jones VocelkaAustraliaIvan Magalhaes RENEWAL
Murillo MaletJapanAnna Fali RENEWAL
Alejandro PerinGermanyXuxue Feng UNQUALIFIED
Izzy GarufiJapanIoni Bowcher NEW
Kadeem FlosiBrazilAnna Fali UNQUALIFIED
Maria MarrierAustraliaBernardo Dominic NEW
Maria MarrierUnited KingdomOnyama Limba UNQUALIFIED
Leja CaldareraGermanyAmy Elsner RENEWAL
Claire TollnerSpainStephen Shaw RENEWAL
Mayumi KolmetzItalyIoni Bowcher UNQUALIFIED
Alejandro PerinGermanyBernardo Dominic NEW
Nicolas IturbideCanadaElwin Sharvill NEGOTIATION
Aruna FigeroaCanadaXuxue Feng NEW
Juan WieserItalyAnna Fali QUALIFIED
Silvio SlusarskiAustraliaAmy Elsner QUALIFIED
Ricardo GauchoGermanyAsiya Javayant QUALIFIED
Aika InouyeAustraliaXuxue Feng UNQUALIFIED
Francesco ShinkoIndiaIoni Bowcher NEGOTIATION
Tony FollerSpainAmy Elsner NEGOTIATION
Kadeem FlosiItalyAnna Fali QUALIFIED
Silvio SlusarskiSpainIvan Magalhaes PROPOSAL
Claire TollnerSpainStephen Shaw RENEWAL
Smith GlickJapanBernardo Dominic UNQUALIFIED
Antonio CaudyUnited KingdomAmy Elsner NEGOTIATION
Leja CaldareraRussiaAsiya Javayant NEGOTIATION
Clifford RimGermanyElwin Sharvill QUALIFIED
Chavez BriddickJapanAsiya Javayant UNQUALIFIED
Smith GlickArgentinaAmy Elsner NEW
Alejandro PerinAustraliaStephen Shaw UNQUALIFIED
Wickens NestleUnited KingdomAmy Elsner NEGOTIATION
Claire TollnerJapanAsiya Javayant NEGOTIATION
Greenwood BologniaAustraliaXuxue Feng QUALIFIED
Francesco ShinkoSpainElwin Sharvill NEGOTIATION
Clifford RimGermanyAsiya Javayant NEGOTIATION
Julie StensethIndiaAsiya Javayant UNQUALIFIED
Isabel BowleySpainBernardo Dominic QUALIFIED
Arvin AlbaresUnited KingdomAsiya Javayant PROPOSAL
Frozen Columns
Name
Rodrigues Campain
Stacey Maclead
Kadeem Flosi
Leon Oldroyd
Greenwood Bolognia
Adams Morasca
Aika Inouye
Smith Glick
Cody Saylors
Stacey Maclead
Smith Glick
David Darakjy
Kadeem Flosi
Greenwood Bolognia
Jennifer Amigon
Jefferson Schemmer
Rodrigues Campain
Munro Ferencz
Munro Ferencz
Stacey Maclead
Francesco Shinko
Clifford Rim
Greenwood Bolognia
Misaki Royster
Johnson Sergi
Silvio Slusarski
Cody Saylors
Nicolas Iturbide
Cody Saylors
Ricardo Gaucho
Leja Caldarera
David Darakjy
Murillo Malet
Munro Ferencz
Leja Caldarera
Darci Poquette
Jeanfrancois Venere
Octavia Malet
Misaki Royster
Smith Glick
Francesco Shinko
Leja Caldarera
Aditya Kusko
Mujtaba Nicka
Sinclair Waycott
Chavez Briddick
Kaitlin Ostrosky
Adams Morasca
Aruna Figeroa
Johnson Sergi
IdCountryDate
1000Australia2021-02-21
1001France2021-02-24
1002Australia2021-02-14
1003Germany2021-02-06
1004Spain2021-03-06
1005Italy2021-02-19
1006Russia2021-02-06
1007Russia2021-02-20
1008Germany2021-02-09
1009Germany2021-02-20
1010Japan2021-02-15
1011France2021-02-28
1012Australia2021-02-16
1013Australia2021-02-05
1014Russia2021-02-28
1015United Kingdom2021-02-28
1016Brazil2021-02-19
1017Canada2021-02-21
1018France2021-02-15
1019Russia2021-02-25
1020Russia2021-02-10
1021Germany2021-02-18
1022Japan2021-02-09
1023United Kingdom2021-02-17
1024United Kingdom2021-02-16
1025Russia2021-02-26
1026Spain2021-02-07
1027Argentina2021-02-16
1028Brazil2021-02-19
1029France2021-03-05
1030Japan2021-02-05
1031India2021-02-20
1032United Kingdom2021-02-12
1033Canada2021-02-27
1034Spain2021-02-19
1035Russia2021-02-06
1036Spain2021-02-25
1037Argentina2021-03-04
1038India2021-03-05
1039Spain2021-02-19
1040India2021-02-24
1041Japan2021-02-06
1042India2021-02-27
1043Argentina2021-02-19
1044Canada2021-03-06
1045Canada2021-02-27
1046United Kingdom2021-02-06
1047Germany2021-02-13
1048Brazil2021-02-11
1049India2021-02-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydSpainAmy Elsner QUALIFIED
Ricardo GauchoCanadaXuxue Feng RENEWAL
Emily WhobreyAustraliaAmy Elsner RENEWAL
Antonio CaudyArgentinaOnyama Limba PROPOSAL
Aika InouyeJapanIvan Magalhaes NEGOTIATION
Isabel BowleySpainBernardo Dominic NEGOTIATION
James ButtUnited KingdomXuxue Feng PROPOSAL
Cody SaylorsFranceXuxue Feng QUALIFIED
Rodrigues CampainAustraliaElwin Sharvill PROPOSAL
Adams MorascaArgentinaBernardo Dominic RENEWAL
Deepesh ChuiArgentinaAsiya Javayant UNQUALIFIED
Francesco ShinkoRussiaAnna Fali PROPOSAL
Emily WhobreyUnited KingdomIvan Magalhaes RENEWAL
Octavia MaletRussiaElwin Sharvill NEGOTIATION
Isabel BowleyAustraliaOnyama Limba RENEWAL
Silvio SlusarskiUnited KingdomAmy Elsner QUALIFIED
Jones VocelkaGermanyXuxue Feng PROPOSAL
Darci PoquetteBrazilIoni Bowcher NEW
Jennifer AmigonGermanyBernardo Dominic NEGOTIATION
Greenwood BologniaItalyIoni Bowcher UNQUALIFIED
Kadeem FlosiArgentinaIvan Magalhaes NEW
Maria MarrierIndiaXuxue Feng QUALIFIED
Aditya KuskoCanadaIvan Magalhaes NEGOTIATION
Salvatore StockhamArgentinaIoni Bowcher PROPOSAL
Kaitlin OstroskyItalyElwin Sharvill UNQUALIFIED
Jennifer AmigonJapanBernardo Dominic NEW
Izzy GarufiItalyIoni Bowcher NEW
Izzy GarufiUnited KingdomIvan Magalhaes PROPOSAL
Alejandro PerinRussiaIoni Bowcher RENEWAL
Leon OldroydArgentinaStephen Shaw QUALIFIED
James ButtJapanOnyama Limba QUALIFIED
Sinclair WaycottFranceIoni Bowcher NEW
Tony FollerUnited KingdomXuxue Feng UNQUALIFIED
Nicolas IturbideIndiaAnna Fali NEW
Mujtaba NickaFranceAsiya Javayant UNQUALIFIED
Claire TollnerIndiaIvan Magalhaes NEGOTIATION
Ashley DoeGermanyAnna Fali NEW
Leja CaldareraCanadaAnna Fali RENEWAL
Silvio SlusarskiIndiaAsiya Javayant NEGOTIATION
Ivar PaprockiRussiaElwin Sharvill 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>