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
Wickens NestleJapanAsiya Javayant PROPOSAL
Faith GillianBrazilAsiya Javayant UNQUALIFIED
Leon OldroydUnited KingdomBernardo Dominic NEW
Ashley DoeSpainElwin Sharvill UNQUALIFIED
Isabel BowleyIndiaOnyama Limba RENEWAL
Wickens NestleItalyAmy Elsner NEW
Julie StensethFranceBernardo Dominic PROPOSAL
Jennifer AmigonFranceBernardo Dominic NEGOTIATION
Darci PoquetteSpainIvan Magalhaes RENEWAL
Ivar PaprockiCanadaIvan Magalhaes RENEWAL
Emily WhobreyAustraliaElwin Sharvill NEGOTIATION
Mayumi KolmetzArgentinaBernardo Dominic NEW
Ivar PaprockiSpainAmy Elsner UNQUALIFIED
Nicolas IturbideBrazilIoni Bowcher PROPOSAL
Isabel BowleyGermanyIoni Bowcher QUALIFIED
Maisha RulapaughRussiaXuxue Feng QUALIFIED
Ricardo GauchoRussiaStephen Shaw RENEWAL
Costa DilliardUnited KingdomIoni Bowcher RENEWAL
Tony FollerGermanyIoni Bowcher UNQUALIFIED
Cody SaylorsJapanIoni Bowcher NEGOTIATION
Aditya KuskoAustraliaOnyama Limba RENEWAL
Isabel BowleyRussiaStephen Shaw NEW
Stacey MacleadAustraliaIoni Bowcher RENEWAL
Aika InouyeAustraliaIoni Bowcher RENEWAL
Costa DilliardIndiaAnna Fali PROPOSAL
Ashley DoeRussiaAnna Fali RENEWAL
Cody SaylorsBrazilStephen Shaw NEW
Jones VocelkaIndiaStephen Shaw NEW
Ivar PaprockiArgentinaElwin Sharvill NEW
Nicolas IturbideRussiaStephen Shaw QUALIFIED
Jefferson SchemmerFranceIoni Bowcher PROPOSAL
Jones VocelkaSpainAnna Fali RENEWAL
Arvin AlbaresSpainXuxue Feng NEW
Tony FollerAustraliaIoni Bowcher NEW
Aruna FigeroaIndiaAsiya Javayant RENEWAL
Morrow RutaCanadaBernardo Dominic NEW
Smith GlickJapanOnyama Limba PROPOSAL
Adams MorascaRussiaAsiya Javayant NEGOTIATION
Maria MarrierGermanyXuxue Feng NEGOTIATION
Mujtaba NickaItalyBernardo Dominic NEGOTIATION
Kadeem FlosiUnited KingdomXuxue Feng NEGOTIATION
Juan WieserUnited KingdomIoni Bowcher PROPOSAL
Aruna FigeroaBrazilAmy Elsner RENEWAL
James ButtSpainElwin Sharvill NEGOTIATION
Wickens NestleGermanyElwin Sharvill QUALIFIED
Aruna FigeroaJapanIoni Bowcher QUALIFIED
Isabel BowleyIndiaBernardo Dominic PROPOSAL
Leja CaldareraIndiaAsiya Javayant UNQUALIFIED
Mujtaba NickaItalyOnyama Limba RENEWAL
Adams MorascaFranceAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Smith GlickUnited KingdomIoni Bowcher PROPOSAL
Jefferson SchemmerUnited KingdomStephen Shaw QUALIFIED
Juan WieserRussiaAsiya Javayant NEW
Costa DilliardAustraliaIoni Bowcher UNQUALIFIED
Adams MorascaBrazilOnyama Limba PROPOSAL
Tony FollerAustraliaIvan Magalhaes RENEWAL
Munro FerenczIndiaAnna Fali RENEWAL
Sinclair WaycottIndiaAnna Fali RENEWAL
Juan WieserUnited KingdomIoni Bowcher PROPOSAL
Octavia MaletAustraliaAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaJapan2021-02-21Chanay, Jeffrey A Esq RENEWAL98Elwin Sharvill
1001Adams MorascaItaly2021-03-05Dorl, James J Esq RENEWAL65Ivan Magalhaes
1002Mayumi KolmetzFrance2021-02-04Commercial Press QUALIFIED47Ivan Magalhaes
1003Jones VocelkaRussia2021-02-08Feiner Bros UNQUALIFIED13Bernardo Dominic
1004Smith GlickArgentina2021-02-26Feiner Bros NEW18Ivan Magalhaes
1005Misaki RoysterGermany2021-02-08Benton, John B Jr NEGOTIATION25Bernardo Dominic
1006Jefferson SchemmerCanada2021-02-08Chapman, Ross E Esq PROPOSAL90Xuxue Feng
1007Murillo MaletJapan2021-02-20Dorl, James J Esq NEW72Ioni Bowcher
1008Kadeem FlosiArgentina2021-02-19Rangoni Of Florence UNQUALIFIED80Xuxue Feng
1009Julie StensethArgentina2021-02-15Commercial Press PROPOSAL84Asiya Javayant
1010Aika InouyeArgentina2021-02-14Feltz Printing Service NEW83Asiya Javayant
1011Sinclair WaycottUnited Kingdom2021-02-25Truhlar And Truhlar Attys NEGOTIATION67Xuxue Feng
1012Salvatore StockhamSpain2021-02-12Benton, John B Jr UNQUALIFIED76Asiya Javayant
1013Izzy GarufiRussia2021-02-22Morlong Associates QUALIFIED22Anna Fali
1014Greenwood BologniaFrance2021-02-08Feiner Bros RENEWAL27Onyama Limba
1015Aika InouyeRussia2021-02-26Chanay, Jeffrey A Esq RENEWAL2Elwin Sharvill
1016Maria MarrierUnited Kingdom2021-02-13Feiner Bros PROPOSAL94Anna Fali
1017Munro FerenczAustralia2021-02-14Chanay, Jeffrey A Esq NEW44Bernardo Dominic
1018Nicolas IturbideJapan2021-02-22Printing Dimensions PROPOSAL59Ivan Magalhaes
1019Aruna FigeroaRussia2021-03-04Chapman, Ross E Esq RENEWAL34Anna Fali
1020Greenwood BologniaGermany2021-02-06Dorl, James J Esq PROPOSAL83Onyama Limba
1021Claire TollnerFrance2021-02-14Commercial Press NEW38Bernardo Dominic
1022David DarakjyFrance2021-02-23Feiner Bros NEGOTIATION47Bernardo Dominic
1023Jefferson SchemmerIndia2021-02-10Rousseaux, Michael Esq UNQUALIFIED75Asiya Javayant
1024Silvio SlusarskiUnited Kingdom2021-02-10Printing Dimensions NEGOTIATION38Ivan Magalhaes
1025Kadeem FlosiCanada2021-02-11Feiner Bros UNQUALIFIED91Elwin Sharvill
1026James ButtCanada2021-02-11Chapman, Ross E Esq NEW55Anna Fali
1027Nicolas IturbideFrance2021-02-19Commercial Press RENEWAL36Anna Fali
1028Julie StensethIndia2021-02-16Truhlar And Truhlar Attys PROPOSAL23Stephen Shaw
1029Aditya KuskoUnited Kingdom2021-03-03Morlong Associates NEW82Amy Elsner
1030Adams MorascaFrance2021-02-17Rousseaux, Michael Esq PROPOSAL66Anna Fali
1031Aruna FigeroaArgentina2021-02-17Chanay, Jeffrey A Esq PROPOSAL41Ivan Magalhaes
1032Ivar PaprockiUnited Kingdom2021-02-18King, Christopher A Esq QUALIFIED42Xuxue Feng
1033Ashley DoeGermany2021-02-07Buckley Miller Wright NEGOTIATION0Elwin Sharvill
1034Arvin AlbaresCanada2021-02-06Feltz Printing Service NEW1Ioni Bowcher
1035Jeanfrancois VenereRussia2021-02-07Feiner Bros PROPOSAL83Ivan Magalhaes
1036Murillo MaletGermany2021-03-05Chapman, Ross E Esq RENEWAL26Xuxue Feng
1037Morrow RutaBrazil2021-02-13Chanay, Jeffrey A Esq UNQUALIFIED83Bernardo Dominic
1038Sinclair WaycottSpain2021-03-04Chapman, Ross E Esq NEGOTIATION40Xuxue Feng
1039Clifford RimFrance2021-03-04Feiner Bros PROPOSAL29Xuxue Feng
1040Kadeem FlosiBrazil2021-02-18Buckley Miller Wright NEW62Stephen Shaw
1041Faith GillianCanada2021-03-05Buckley Miller Wright NEGOTIATION87Bernardo Dominic
1042Adams MorascaAustralia2021-02-10Chapman, Ross E Esq PROPOSAL19Anna Fali
1043Arvin AlbaresUnited Kingdom2021-02-05Chemel, James L Cpa UNQUALIFIED91Anna Fali
1044Faith GillianSpain2021-02-17Feiner Bros NEGOTIATION91Stephen Shaw
1045Deepesh ChuiIndia2021-03-03Benton, John B Jr RENEWAL69Amy Elsner
1046Ivar PaprockiGermany2021-02-27Dorl, James J Esq NEGOTIATION86Ioni Bowcher
1047Claire TollnerGermany2021-02-27Chapman, Ross E Esq UNQUALIFIED72Ioni Bowcher
1048Johnson SergiJapan2021-02-23Chapman, Ross E Esq QUALIFIED33Stephen Shaw
1049Morrow RutaItaly2021-02-20Chemel, James L Cpa PROPOSAL45Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Tony FollerBrazilXuxue Feng QUALIFIED
Alejandro PerinUnited KingdomIvan Magalhaes RENEWAL
Mujtaba NickaCanadaAnna Fali UNQUALIFIED
Aika InouyeFranceAmy Elsner NEW
Faith GillianArgentinaAsiya Javayant PROPOSAL
Isabel BowleyGermanyAnna Fali NEW
Wickens NestleAustraliaBernardo Dominic UNQUALIFIED
Juan WieserItalyAnna Fali UNQUALIFIED
Maria MarrierUnited KingdomElwin Sharvill UNQUALIFIED
Jefferson SchemmerJapanOnyama Limba QUALIFIED
Jennifer AmigonSpainAmy Elsner RENEWAL
Chavez BriddickAustraliaAnna Fali NEW
Deepesh ChuiGermanyStephen Shaw UNQUALIFIED
Aditya KuskoRussiaAmy Elsner RENEWAL
Aruna FigeroaJapanIoni Bowcher NEGOTIATION
Isabel BowleyRussiaIvan Magalhaes RENEWAL
Ricardo GauchoBrazilIvan Magalhaes QUALIFIED
Maisha RulapaughIndiaIvan Magalhaes RENEWAL
David DarakjyCanadaAnna Fali NEW
Mujtaba NickaAustraliaXuxue Feng QUALIFIED
Chavez BriddickUnited KingdomAmy Elsner NEGOTIATION
Octavia MaletUnited KingdomBernardo Dominic UNQUALIFIED
Ashley DoeRussiaElwin Sharvill PROPOSAL
Juan WieserIndiaIoni Bowcher PROPOSAL
Emily WhobreyArgentinaIvan Magalhaes NEW
Alejandro PerinRussiaElwin Sharvill NEGOTIATION
Sinclair WaycottAustraliaStephen Shaw UNQUALIFIED
Aruna FigeroaRussiaIvan Magalhaes RENEWAL
Julie StensethAustraliaOnyama Limba PROPOSAL
Maisha RulapaughItalyAsiya Javayant PROPOSAL
Ricardo GauchoAustraliaStephen Shaw PROPOSAL
Cody SaylorsBrazilXuxue Feng RENEWAL
Darci PoquetteBrazilIoni Bowcher RENEWAL
James ButtFranceIvan Magalhaes NEGOTIATION
Jeanfrancois VenereCanadaAmy Elsner QUALIFIED
Munro FerenczGermanyXuxue Feng NEGOTIATION
Misaki RoysterRussiaIvan Magalhaes NEGOTIATION
Nicolas IturbideJapanOnyama Limba UNQUALIFIED
Johnson SergiItalyOnyama Limba NEW
Johnson SergiUnited KingdomElwin Sharvill NEW
Jefferson SchemmerFranceAnna Fali RENEWAL
Alejandro PerinAustraliaAnna Fali UNQUALIFIED
Ricardo GauchoSpainIvan Magalhaes NEGOTIATION
Cody SaylorsArgentinaIvan Magalhaes QUALIFIED
Arvin AlbaresAustraliaStephen Shaw PROPOSAL
David DarakjyIndiaAmy Elsner NEGOTIATION
Tony FollerJapanIoni Bowcher QUALIFIED
Ashley DoeUnited KingdomOnyama Limba RENEWAL
Jennifer AmigonUnited KingdomAsiya Javayant PROPOSAL
Deepesh ChuiCanadaXuxue Feng RENEWAL
Frozen Columns
Name
Isabel Bowley
Izzy Garufi
Mayumi Kolmetz
Claire Tollner
Faith Gillian
Juan Wieser
Leja Caldarera
Smith Glick
Ashley Doe
Johnson Sergi
Clifford Rim
Cody Saylors
Deepesh Chui
Ricardo Gaucho
Sinclair Waycott
Clifford Rim
Ashley Doe
Mayumi Kolmetz
Julie Stenseth
Nicolas Iturbide
Antonio Caudy
Maria Marrier
Costa Dilliard
Aika Inouye
Sinclair Waycott
Arvin Albares
Deepesh Chui
Kaitlin Ostrosky
Francesco Shinko
Emily Whobrey
Salvatore Stockham
Darci Poquette
Izzy Garufi
Arvin Albares
Sinclair Waycott
Kaitlin Ostrosky
Ricardo Gaucho
Maisha Rulapaugh
Jones Vocelka
Kadeem Flosi
Jennifer Amigon
Jefferson Schemmer
Adams Morasca
Sinclair Waycott
Clifford Rim
Izzy Garufi
David Darakjy
Jones Vocelka
Arvin Albares
Johnson Sergi
IdCountryDate
1000France2021-02-22
1001United Kingdom2021-02-19
1002Germany2021-02-08
1003Japan2021-03-02
1004Germany2021-02-16
1005Japan2021-03-03
1006Germany2021-02-14
1007Brazil2021-02-13
1008Brazil2021-02-28
1009Australia2021-03-02
1010France2021-02-06
1011United Kingdom2021-02-23
1012Russia2021-02-07
1013Japan2021-02-12
1014France2021-02-19
1015United Kingdom2021-02-08
1016Australia2021-02-23
1017Italy2021-02-26
1018Argentina2021-02-12
1019Argentina2021-02-21
1020India2021-02-22
1021Australia2021-03-03
1022Argentina2021-02-21
1023India2021-02-21
1024Brazil2021-02-04
1025Japan2021-02-21
1026Russia2021-02-06
1027Japan2021-03-04
1028Italy2021-02-16
1029Japan2021-02-21
1030Australia2021-02-20
1031Argentina2021-02-27
1032Australia2021-02-23
1033Russia2021-03-04
1034United Kingdom2021-02-19
1035India2021-02-12
1036France2021-02-11
1037France2021-02-08
1038India2021-02-17
1039Australia2021-02-10
1040Australia2021-02-13
1041India2021-02-13
1042Australia2021-02-27
1043Russia2021-02-08
1044Italy2021-03-02
1045Australia2021-02-07
1046Australia2021-02-26
1047Spain2021-02-14
1048India2021-02-05
1049Australia2021-02-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerAustraliaAsiya Javayant NEW
Deepesh ChuiAustraliaIvan Magalhaes QUALIFIED
Mujtaba NickaRussiaAsiya Javayant NEGOTIATION
Aika InouyeUnited KingdomAnna Fali UNQUALIFIED
Tony FollerIndiaAmy Elsner QUALIFIED
Aika InouyeGermanyElwin Sharvill RENEWAL
Octavia MaletGermanyIvan Magalhaes NEW
Silvio SlusarskiGermanyElwin Sharvill UNQUALIFIED
Arvin AlbaresIndiaAnna Fali NEW
Morrow RutaIndiaElwin Sharvill PROPOSAL
James ButtBrazilStephen Shaw UNQUALIFIED
Salvatore StockhamIndiaIvan Magalhaes PROPOSAL
Rodrigues CampainSpainOnyama Limba PROPOSAL
Izzy GarufiIndiaElwin Sharvill NEW
Wickens NestleAustraliaXuxue Feng PROPOSAL
Misaki RoysterJapanBernardo Dominic NEGOTIATION
Izzy GarufiIndiaXuxue Feng NEGOTIATION
Maria MarrierCanadaAsiya Javayant NEGOTIATION
Maisha RulapaughGermanyXuxue Feng PROPOSAL
Murillo MaletUnited KingdomIoni Bowcher RENEWAL
Costa DilliardSpainBernardo Dominic QUALIFIED
Nicolas IturbideItalyAsiya Javayant QUALIFIED
Alejandro PerinAustraliaElwin Sharvill RENEWAL
Adams MorascaCanadaIvan Magalhaes RENEWAL
Silvio SlusarskiGermanyAsiya Javayant UNQUALIFIED
Aika InouyeIndiaXuxue Feng PROPOSAL
Ricardo GauchoItalyAmy Elsner PROPOSAL
Octavia MaletCanadaIvan Magalhaes QUALIFIED
Smith GlickBrazilIvan Magalhaes RENEWAL
Octavia MaletFranceIvan Magalhaes QUALIFIED
Jefferson SchemmerJapanBernardo Dominic PROPOSAL
Munro FerenczJapanBernardo Dominic PROPOSAL
Jefferson SchemmerFranceIvan Magalhaes PROPOSAL
Leon OldroydGermanyBernardo Dominic UNQUALIFIED
Wickens NestleUnited KingdomAnna Fali PROPOSAL
Rodrigues CampainUnited KingdomAnna Fali NEW
Silvio SlusarskiSpainAmy Elsner QUALIFIED
Stacey MacleadArgentinaBernardo Dominic NEW
Aika InouyeRussiaAmy Elsner RENEWAL
Rodrigues CampainUnited KingdomElwin Sharvill QUALIFIED

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