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
Claire TollnerRussiaAsiya Javayant PROPOSAL
Clifford RimCanadaXuxue Feng NEGOTIATION
Johnson SergiCanadaBernardo Dominic NEW
Johnson SergiBrazilIoni Bowcher PROPOSAL
Smith GlickIndiaOnyama Limba QUALIFIED
Aika InouyeGermanyIvan Magalhaes RENEWAL
Clifford RimGermanyXuxue Feng NEW
Stacey MacleadCanadaIvan Magalhaes NEGOTIATION
Clifford RimUnited KingdomAmy Elsner QUALIFIED
Mujtaba NickaSpainAnna Fali QUALIFIED
Murillo MaletBrazilXuxue Feng PROPOSAL
Kadeem FlosiJapanAmy Elsner UNQUALIFIED
Mayumi KolmetzUnited KingdomAnna Fali QUALIFIED
Nicolas IturbideJapanAnna Fali UNQUALIFIED
Salvatore StockhamSpainIoni Bowcher UNQUALIFIED
Kadeem FlosiRussiaElwin Sharvill QUALIFIED
Costa DilliardAustraliaXuxue Feng NEGOTIATION
Silvio SlusarskiFranceIvan Magalhaes QUALIFIED
Tony FollerIndiaIvan Magalhaes PROPOSAL
Antonio CaudyIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaJapanIoni Bowcher RENEWAL
Smith GlickUnited KingdomXuxue Feng NEGOTIATION
Antonio CaudyAustraliaIvan Magalhaes RENEWAL
Julie StensethJapanXuxue Feng QUALIFIED
Tony FollerGermanyIoni Bowcher QUALIFIED
Nicolas IturbideArgentinaXuxue Feng PROPOSAL
David DarakjyRussiaOnyama Limba PROPOSAL
Emily WhobreyFranceBernardo Dominic UNQUALIFIED
Rodrigues CampainGermanyStephen Shaw NEW
Francesco ShinkoItalyAmy Elsner QUALIFIED
Stacey MacleadBrazilIoni Bowcher QUALIFIED
Silvio SlusarskiJapanIoni Bowcher PROPOSAL
Stacey MacleadJapanBernardo Dominic QUALIFIED
Stacey MacleadUnited KingdomElwin Sharvill UNQUALIFIED
Leja CaldareraAustraliaElwin Sharvill PROPOSAL
James ButtCanadaAsiya Javayant NEW
Kadeem FlosiCanadaXuxue Feng NEGOTIATION
Salvatore StockhamRussiaAnna Fali NEW
Johnson SergiAustraliaXuxue Feng QUALIFIED
Costa DilliardBrazilAsiya Javayant PROPOSAL
Leja CaldareraIndiaAsiya Javayant PROPOSAL
Nicolas IturbideIndiaAmy Elsner NEW
Faith GillianCanadaAsiya Javayant PROPOSAL
Nicolas IturbideUnited KingdomStephen Shaw RENEWAL
Antonio CaudySpainAsiya Javayant RENEWAL
Jeanfrancois VenereJapanOnyama Limba UNQUALIFIED
Leon OldroydFranceElwin Sharvill NEW
Octavia MaletIndiaIvan Magalhaes NEGOTIATION
Wickens NestleJapanElwin Sharvill RENEWAL
Arvin AlbaresBrazilAmy Elsner RENEWAL
Horizontal
NameCountryRepresentativeStatus
Clifford RimIndiaAsiya Javayant QUALIFIED
Aditya KuskoItalyElwin Sharvill PROPOSAL
Ashley DoeArgentinaAmy Elsner NEW
Murillo MaletAustraliaBernardo Dominic PROPOSAL
Darci PoquetteItalyStephen Shaw QUALIFIED
Antonio CaudyCanadaAsiya Javayant RENEWAL
Maisha RulapaughArgentinaAsiya Javayant RENEWAL
Julie StensethUnited KingdomOnyama Limba RENEWAL
Alejandro PerinArgentinaIvan Magalhaes RENEWAL
Sinclair WaycottItalyOnyama Limba UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoFrance2021-02-14Chanay, Jeffrey A Esq NEGOTIATION30Elwin Sharvill
1001James ButtFrance2021-02-06Chemel, James L Cpa UNQUALIFIED72Bernardo Dominic
1002Munro FerenczCanada2021-02-06Feiner Bros RENEWAL53Ivan Magalhaes
1003Murillo MaletIndia2021-02-20Dorl, James J Esq NEW35Elwin Sharvill
1004Costa DilliardFrance2021-02-13Chanay, Jeffrey A Esq UNQUALIFIED82Ivan Magalhaes
1005Leon OldroydSpain2021-02-28Chapman, Ross E Esq PROPOSAL57Anna Fali
1006Smith GlickGermany2021-03-06Feiner Bros RENEWAL63Stephen Shaw
1007Ivar PaprockiFrance2021-03-02Rousseaux, Michael Esq PROPOSAL10Stephen Shaw
1008Leja CaldareraSpain2021-02-15Truhlar And Truhlar Attys RENEWAL66Asiya Javayant
1009Antonio CaudyArgentina2021-02-23Benton, John B Jr RENEWAL56Bernardo Dominic
1010Wickens NestleJapan2021-02-06Benton, John B Jr RENEWAL94Ivan Magalhaes
1011Antonio CaudyArgentina2021-02-16Dorl, James J Esq PROPOSAL9Xuxue Feng
1012Leja CaldareraBrazil2021-02-25Rangoni Of Florence UNQUALIFIED33Xuxue Feng
1013Cody SaylorsSpain2021-02-17Chapman, Ross E Esq RENEWAL49Xuxue Feng
1014Ashley DoeArgentina2021-03-03Chanay, Jeffrey A Esq RENEWAL99Ioni Bowcher
1015Alejandro PerinAustralia2021-03-02Morlong Associates NEW18Stephen Shaw
1016Chavez BriddickIndia2021-03-05Buckley Miller Wright QUALIFIED70Anna Fali
1017Chavez BriddickGermany2021-02-14Truhlar And Truhlar Attys NEGOTIATION62Stephen Shaw
1018Clifford RimGermany2021-02-28Commercial Press NEGOTIATION84Asiya Javayant
1019Deepesh ChuiCanada2021-02-24Printing Dimensions PROPOSAL66Ivan Magalhaes
1020Stacey MacleadCanada2021-02-27Dorl, James J Esq UNQUALIFIED8Onyama Limba
1021Cody SaylorsSpain2021-02-22Chemel, James L Cpa PROPOSAL4Ioni Bowcher
1022Aika InouyeFrance2021-02-19Morlong Associates PROPOSAL23Asiya Javayant
1023Wickens NestleBrazil2021-02-25Commercial Press RENEWAL98Ioni Bowcher
1024Mujtaba NickaAustralia2021-02-18King, Christopher A Esq RENEWAL47Stephen Shaw
1025Aditya KuskoFrance2021-02-23King, Christopher A Esq PROPOSAL30Ivan Magalhaes
1026Deepesh ChuiArgentina2021-02-17Chemel, James L Cpa NEGOTIATION38Elwin Sharvill
1027Julie StensethIndia2021-02-27Feiner Bros PROPOSAL90Elwin Sharvill
1028Jeanfrancois VenereAustralia2021-02-20King, Christopher A Esq NEGOTIATION95Anna Fali
1029Mayumi KolmetzFrance2021-03-05Printing Dimensions NEGOTIATION57Onyama Limba
1030Stacey MacleadRussia2021-02-16Rangoni Of Florence PROPOSAL53Elwin Sharvill
1031David DarakjyBrazil2021-03-07Printing Dimensions PROPOSAL36Elwin Sharvill
1032Ashley DoeSpain2021-03-07Chapman, Ross E Esq QUALIFIED15Stephen Shaw
1033Ashley DoeArgentina2021-03-06Truhlar And Truhlar Attys UNQUALIFIED78Amy Elsner
1034Nicolas IturbideItaly2021-02-18Benton, John B Jr NEGOTIATION86Anna Fali
1035Kaitlin OstroskyItaly2021-03-06Rangoni Of Florence UNQUALIFIED23Anna Fali
1036Munro FerenczUnited Kingdom2021-02-07Chanay, Jeffrey A Esq UNQUALIFIED82Amy Elsner
1037Jeanfrancois VenereFrance2021-03-03Feltz Printing Service NEGOTIATION45Bernardo Dominic
1038Julie StensethItaly2021-02-27King, Christopher A Esq UNQUALIFIED21Ioni Bowcher
1039Leja CaldareraGermany2021-02-16Chanay, Jeffrey A Esq RENEWAL16Ioni Bowcher
1040James ButtSpain2021-03-03Morlong Associates QUALIFIED29Amy Elsner
1041Misaki RoysterFrance2021-02-12Feltz Printing Service RENEWAL81Elwin Sharvill
1042Francesco ShinkoGermany2021-02-07Printing Dimensions UNQUALIFIED64Amy Elsner
1043Maria MarrierCanada2021-02-13Feltz Printing Service QUALIFIED17Onyama Limba
1044Mujtaba NickaCanada2021-02-28Rangoni Of Florence UNQUALIFIED98Onyama Limba
1045Aika InouyeCanada2021-03-02Buckley Miller Wright UNQUALIFIED50Asiya Javayant
1046Wickens NestleJapan2021-02-06Chapman, Ross E Esq PROPOSAL79Stephen Shaw
1047Jeanfrancois VenereAustralia2021-02-25Rangoni Of Florence PROPOSAL88Amy Elsner
1048Wickens NestleAustralia2021-02-09Buckley Miller Wright NEGOTIATION52Bernardo Dominic
1049Emily WhobreyUnited Kingdom2021-02-19Morlong Associates UNQUALIFIED99Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeGermanyElwin Sharvill NEW
Salvatore StockhamUnited KingdomAsiya Javayant NEGOTIATION
Sinclair WaycottArgentinaXuxue Feng QUALIFIED
Darci PoquetteAustraliaAsiya Javayant PROPOSAL
Morrow RutaBrazilElwin Sharvill PROPOSAL
Smith GlickIndiaStephen Shaw QUALIFIED
Tony FollerSpainIvan Magalhaes QUALIFIED
Smith GlickCanadaAsiya Javayant NEW
Chavez BriddickItalyIvan Magalhaes RENEWAL
Aruna FigeroaFranceBernardo Dominic PROPOSAL
Maria MarrierFranceAmy Elsner UNQUALIFIED
Jefferson SchemmerFranceXuxue Feng RENEWAL
Johnson SergiGermanyBernardo Dominic RENEWAL
Leja CaldareraJapanIvan Magalhaes PROPOSAL
Johnson SergiArgentinaAnna Fali UNQUALIFIED
Jones VocelkaBrazilAmy Elsner PROPOSAL
Adams MorascaGermanyAnna Fali QUALIFIED
Juan WieserFranceIoni Bowcher UNQUALIFIED
Arvin AlbaresJapanElwin Sharvill QUALIFIED
Darci PoquetteSpainIoni Bowcher PROPOSAL
Kadeem FlosiRussiaAmy Elsner NEW
Tony FollerItalyIoni Bowcher RENEWAL
Aika InouyeItalyElwin Sharvill RENEWAL
Ivar PaprockiUnited KingdomAsiya Javayant PROPOSAL
Cody SaylorsSpainIoni Bowcher NEGOTIATION
Octavia MaletIndiaBernardo Dominic QUALIFIED
Ivar PaprockiJapanXuxue Feng NEGOTIATION
Aditya KuskoIndiaAsiya Javayant NEGOTIATION
Alejandro PerinAustraliaAnna Fali UNQUALIFIED
Leon OldroydRussiaIoni Bowcher PROPOSAL
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Morrow RutaGermanyAnna Fali RENEWAL
Adams MorascaItalyAnna Fali PROPOSAL
Jones VocelkaUnited KingdomStephen Shaw RENEWAL
Arvin AlbaresUnited KingdomOnyama Limba PROPOSAL
Julie StensethGermanyStephen Shaw RENEWAL
Leja CaldareraUnited KingdomIoni Bowcher RENEWAL
Ricardo GauchoFranceIoni Bowcher PROPOSAL
Misaki RoysterGermanyAmy Elsner QUALIFIED
Aditya KuskoBrazilAnna Fali NEGOTIATION
Tony FollerJapanStephen Shaw NEW
Leon OldroydArgentinaBernardo Dominic RENEWAL
Maria MarrierItalyAmy Elsner QUALIFIED
Octavia MaletArgentinaAnna Fali UNQUALIFIED
Misaki RoysterFranceAmy Elsner NEW
Maisha RulapaughArgentinaIvan Magalhaes PROPOSAL
Mayumi KolmetzCanadaElwin Sharvill NEGOTIATION
Octavia MaletArgentinaOnyama Limba RENEWAL
Aruna FigeroaJapanBernardo Dominic QUALIFIED
Mujtaba NickaItalyAmy Elsner QUALIFIED
Frozen Columns
Name
Maisha Rulapaugh
Nicolas Iturbide
Nicolas Iturbide
Aika Inouye
Leja Caldarera
Kaitlin Ostrosky
Greenwood Bolognia
Darci Poquette
Wickens Nestle
Cody Saylors
Aika Inouye
Faith Gillian
Costa Dilliard
Silvio Slusarski
Jeanfrancois Venere
Clifford Rim
Leon Oldroyd
Chavez Briddick
Greenwood Bolognia
Salvatore Stockham
Leon Oldroyd
Mayumi Kolmetz
Juan Wieser
Jones Vocelka
Jefferson Schemmer
Jones Vocelka
Mayumi Kolmetz
Salvatore Stockham
Maisha Rulapaugh
Murillo Malet
Smith Glick
Alejandro Perin
Darci Poquette
Kadeem Flosi
Leja Caldarera
Jones Vocelka
Francesco Shinko
Aditya Kusko
Aika Inouye
Aika Inouye
Silvio Slusarski
Clifford Rim
Smith Glick
Aika Inouye
Claire Tollner
Kaitlin Ostrosky
Leon Oldroyd
Tony Foller
Jeanfrancois Venere
Francesco Shinko
IdCountryDate
1000Brazil2021-02-10
1001Germany2021-02-22
1002Spain2021-02-08
1003Russia2021-02-16
1004Canada2021-03-03
1005Spain2021-02-18
1006Canada2021-02-23
1007Canada2021-02-10
1008Canada2021-03-02
1009Japan2021-02-07
1010Canada2021-02-25
1011Australia2021-02-17
1012France2021-02-22
1013Italy2021-02-11
1014Argentina2021-02-22
1015Brazil2021-02-08
1016Russia2021-02-08
1017France2021-02-18
1018Germany2021-02-16
1019Canada2021-02-22
1020Spain2021-02-23
1021Germany2021-02-26
1022France2021-03-01
1023Japan2021-02-14
1024Brazil2021-03-04
1025Australia2021-02-22
1026India2021-02-13
1027Argentina2021-02-08
1028Brazil2021-02-15
1029Japan2021-02-16
1030Argentina2021-02-10
1031Germany2021-02-07
1032India2021-02-17
1033Canada2021-02-16
1034India2021-02-20
1035Brazil2021-02-23
1036Italy2021-02-21
1037Japan2021-02-07
1038Brazil2021-03-07
1039India2021-02-20
1040Germany2021-03-04
1041Italy2021-02-07
1042Spain2021-03-03
1043France2021-02-07
1044Japan2021-02-14
1045Italy2021-02-13
1046Japan2021-02-20
1047Japan2021-03-06
1048Russia2021-03-07
1049Germany2021-02-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Octavia MaletIndiaIoni Bowcher RENEWAL
Izzy GarufiFranceIvan Magalhaes NEW
Antonio CaudyJapanElwin Sharvill RENEWAL
Salvatore StockhamFranceIoni Bowcher UNQUALIFIED
Izzy GarufiSpainAsiya Javayant UNQUALIFIED
Silvio SlusarskiArgentinaIvan Magalhaes QUALIFIED
Tony FollerJapanAnna Fali QUALIFIED
Kaitlin OstroskyJapanBernardo Dominic NEGOTIATION
Sinclair WaycottArgentinaAmy Elsner RENEWAL
Morrow RutaItalyAmy Elsner PROPOSAL
Stacey MacleadUnited KingdomXuxue Feng PROPOSAL
Alejandro PerinGermanyStephen Shaw QUALIFIED
Faith GillianRussiaXuxue Feng NEW
Deepesh ChuiBrazilOnyama Limba RENEWAL
Adams MorascaRussiaAsiya Javayant PROPOSAL
Isabel BowleyBrazilStephen Shaw NEW
Jennifer AmigonUnited KingdomAsiya Javayant QUALIFIED
Aruna FigeroaArgentinaAnna Fali RENEWAL
Darci PoquetteRussiaOnyama Limba QUALIFIED
Cody SaylorsUnited KingdomOnyama Limba NEW
Greenwood BologniaItalyIvan Magalhaes NEW
Stacey MacleadJapanIvan Magalhaes QUALIFIED
Deepesh ChuiAustraliaIoni Bowcher RENEWAL
Jefferson SchemmerFranceBernardo Dominic NEW
Murillo MaletRussiaOnyama Limba RENEWAL
Morrow RutaCanadaStephen Shaw UNQUALIFIED
Adams MorascaAustraliaAmy Elsner PROPOSAL
Sinclair WaycottCanadaIoni Bowcher NEW
Leja CaldareraUnited KingdomAsiya Javayant RENEWAL
Murillo MaletUnited KingdomOnyama Limba UNQUALIFIED
Ricardo GauchoCanadaAnna Fali NEGOTIATION
Adams MorascaIndiaIoni Bowcher NEGOTIATION
Adams MorascaRussiaBernardo Dominic PROPOSAL
Ashley DoeIndiaOnyama Limba QUALIFIED
Rodrigues CampainBrazilBernardo Dominic NEGOTIATION
Tony FollerJapanAnna Fali QUALIFIED
Jennifer AmigonItalyElwin Sharvill NEGOTIATION
Ashley DoeUnited KingdomAsiya Javayant RENEWAL
Juan WieserRussiaIoni Bowcher PROPOSAL
Maria MarrierSpainAnna Fali RENEWAL

<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>