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
Isabel BowleyUnited KingdomAmy Elsner NEW
Morrow RutaBrazilStephen Shaw PROPOSAL
Aruna FigeroaArgentinaOnyama Limba NEGOTIATION
Rodrigues CampainIndiaStephen Shaw NEGOTIATION
Munro FerenczCanadaElwin Sharvill NEGOTIATION
Tony FollerIndiaOnyama Limba NEW
James ButtIndiaIvan Magalhaes PROPOSAL
Smith GlickArgentinaOnyama Limba RENEWAL
Costa DilliardSpainElwin Sharvill PROPOSAL
Faith GillianArgentinaAnna Fali PROPOSAL
Aruna FigeroaSpainOnyama Limba QUALIFIED
Clifford RimItalyAsiya Javayant RENEWAL
Leon OldroydUnited KingdomIoni Bowcher NEW
Munro FerenczGermanyOnyama Limba NEW
Salvatore StockhamSpainOnyama Limba PROPOSAL
Tony FollerJapanBernardo Dominic QUALIFIED
Deepesh ChuiAustraliaOnyama Limba RENEWAL
Wickens NestleBrazilAsiya Javayant UNQUALIFIED
Kaitlin OstroskyBrazilBernardo Dominic QUALIFIED
Adams MorascaBrazilAmy Elsner PROPOSAL
Jones VocelkaBrazilXuxue Feng NEGOTIATION
Maria MarrierGermanyAmy Elsner NEW
Leja CaldareraGermanyIoni Bowcher RENEWAL
Ricardo GauchoJapanElwin Sharvill NEW
Aruna FigeroaIndiaStephen Shaw NEW
Arvin AlbaresIndiaIvan Magalhaes NEW
Darci PoquetteRussiaBernardo Dominic PROPOSAL
Cody SaylorsAustraliaXuxue Feng NEW
James ButtArgentinaIvan Magalhaes NEW
Leja CaldareraSpainXuxue Feng RENEWAL
Maria MarrierSpainAnna Fali QUALIFIED
Clifford RimUnited KingdomIvan Magalhaes UNQUALIFIED
Johnson SergiCanadaOnyama Limba NEW
Mujtaba NickaCanadaAmy Elsner PROPOSAL
Sinclair WaycottFranceElwin Sharvill UNQUALIFIED
Jeanfrancois VenereUnited KingdomIvan Magalhaes RENEWAL
Aika InouyeRussiaAnna Fali NEGOTIATION
Octavia MaletFranceBernardo Dominic QUALIFIED
Emily WhobreyRussiaElwin Sharvill RENEWAL
Mayumi KolmetzFranceBernardo Dominic PROPOSAL
Leon OldroydCanadaAnna Fali RENEWAL
Morrow RutaCanadaAmy Elsner UNQUALIFIED
Mujtaba NickaRussiaAsiya Javayant QUALIFIED
Nicolas IturbideAustraliaAmy Elsner NEGOTIATION
Salvatore StockhamUnited KingdomBernardo Dominic PROPOSAL
Silvio SlusarskiSpainBernardo Dominic QUALIFIED
Aika InouyeItalyStephen Shaw NEW
Johnson SergiIndiaOnyama Limba RENEWAL
Maisha RulapaughIndiaStephen Shaw PROPOSAL
Costa DilliardCanadaAnna Fali NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoJapanXuxue Feng RENEWAL
Cody SaylorsBrazilBernardo Dominic NEGOTIATION
Jones VocelkaRussiaBernardo Dominic NEW
Costa DilliardGermanyXuxue Feng QUALIFIED
Mayumi KolmetzGermanyIoni Bowcher RENEWAL
Salvatore StockhamBrazilAmy Elsner UNQUALIFIED
Misaki RoysterItalyIvan Magalhaes NEGOTIATION
James ButtBrazilAnna Fali NEW
Aika InouyeUnited KingdomElwin Sharvill RENEWAL
Munro FerenczJapanIoni Bowcher PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiGermany2021-02-13Commercial Press NEGOTIATION64Onyama Limba
1001Morrow RutaArgentina2021-02-25Chemel, James L Cpa QUALIFIED41Bernardo Dominic
1002Costa DilliardRussia2021-02-10Benton, John B Jr NEGOTIATION81Bernardo Dominic
1003David DarakjyGermany2021-02-24Printing Dimensions NEGOTIATION19Asiya Javayant
1004Francesco ShinkoFrance2021-02-08Feiner Bros UNQUALIFIED59Elwin Sharvill
1005Ashley DoeItaly2021-02-16Commercial Press QUALIFIED54Bernardo Dominic
1006Maisha RulapaughJapan2021-03-02Chanay, Jeffrey A Esq RENEWAL89Asiya Javayant
1007Arvin AlbaresArgentina2021-02-04Chanay, Jeffrey A Esq UNQUALIFIED46Ivan Magalhaes
1008Adams MorascaCanada2021-02-16Chapman, Ross E Esq UNQUALIFIED65Bernardo Dominic
1009Emily WhobreyGermany2021-02-12Buckley Miller Wright NEGOTIATION58Bernardo Dominic
1010Ashley DoeRussia2021-02-10Printing Dimensions QUALIFIED23Xuxue Feng
1011Isabel BowleyBrazil2021-02-15Chemel, James L Cpa PROPOSAL7Xuxue Feng
1012Maria MarrierIndia2021-02-10Feiner Bros PROPOSAL59Anna Fali
1013Jones VocelkaUnited Kingdom2021-03-05Feiner Bros NEGOTIATION71Onyama Limba
1014Emily WhobreyGermany2021-02-05Dorl, James J Esq NEGOTIATION23Anna Fali
1015Darci PoquetteAustralia2021-03-05Dorl, James J Esq QUALIFIED85Bernardo Dominic
1016Faith GillianJapan2021-02-27Commercial Press UNQUALIFIED11Xuxue Feng
1017Aruna FigeroaSpain2021-02-22Printing Dimensions PROPOSAL62Anna Fali
1018Darci PoquetteSpain2021-02-22Chemel, James L Cpa UNQUALIFIED74Ivan Magalhaes
1019James ButtBrazil2021-02-18Feiner Bros RENEWAL86Ivan Magalhaes
1020Costa DilliardUnited Kingdom2021-02-08Rangoni Of Florence PROPOSAL20Bernardo Dominic
1021Francesco ShinkoCanada2021-02-13King, Christopher A Esq QUALIFIED98Anna Fali
1022Faith GillianFrance2021-02-27Truhlar And Truhlar Attys QUALIFIED72Onyama Limba
1023Kadeem FlosiAustralia2021-02-15Rousseaux, Michael Esq RENEWAL20Bernardo Dominic
1024Wickens NestleJapan2021-02-13Rangoni Of Florence QUALIFIED5Elwin Sharvill
1025Salvatore StockhamIndia2021-02-07Benton, John B Jr RENEWAL60Anna Fali
1026Smith GlickItaly2021-02-23Chanay, Jeffrey A Esq PROPOSAL55Bernardo Dominic
1027Nicolas IturbideAustralia2021-02-11Buckley Miller Wright QUALIFIED96Bernardo Dominic
1028Emily WhobreyUnited Kingdom2021-02-20Buckley Miller Wright UNQUALIFIED1Ioni Bowcher
1029Murillo MaletArgentina2021-02-08Chemel, James L Cpa PROPOSAL33Elwin Sharvill
1030Silvio SlusarskiAustralia2021-02-04Rangoni Of Florence PROPOSAL96Stephen Shaw
1031Juan WieserUnited Kingdom2021-02-22Chapman, Ross E Esq PROPOSAL36Anna Fali
1032Aruna FigeroaRussia2021-02-09Morlong Associates UNQUALIFIED68Anna Fali
1033Chavez BriddickIndia2021-02-23Rangoni Of Florence RENEWAL68Stephen Shaw
1034Deepesh ChuiCanada2021-02-23Buckley Miller Wright NEGOTIATION93Ioni Bowcher
1035Mujtaba NickaArgentina2021-02-21Rangoni Of Florence UNQUALIFIED47Ivan Magalhaes
1036Mujtaba NickaFrance2021-02-12Feiner Bros NEW10Stephen Shaw
1037Francesco ShinkoJapan2021-03-03Rousseaux, Michael Esq RENEWAL11Xuxue Feng
1038Rodrigues CampainItaly2021-02-21Benton, John B Jr QUALIFIED96Ioni Bowcher
1039Ashley DoeGermany2021-03-05Morlong Associates UNQUALIFIED97Elwin Sharvill
1040Deepesh ChuiCanada2021-02-23Commercial Press NEGOTIATION82Amy Elsner
1041Smith GlickAustralia2021-02-13Truhlar And Truhlar Attys PROPOSAL93Bernardo Dominic
1042Clifford RimItaly2021-02-25Buckley Miller Wright UNQUALIFIED80Xuxue Feng
1043Johnson SergiJapan2021-02-12Rousseaux, Michael Esq RENEWAL36Anna Fali
1044Murillo MaletGermany2021-03-01Truhlar And Truhlar Attys NEW26Anna Fali
1045Kaitlin OstroskyGermany2021-02-20Chemel, James L Cpa NEGOTIATION15Asiya Javayant
1046Silvio SlusarskiSpain2021-02-21Feiner Bros QUALIFIED64Onyama Limba
1047Maisha RulapaughBrazil2021-03-05Chanay, Jeffrey A Esq RENEWAL82Ioni Bowcher
1048Wickens NestleFrance2021-02-27Benton, John B Jr UNQUALIFIED28Onyama Limba
1049Maria MarrierCanada2021-02-20Commercial Press NEW23Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Izzy GarufiIndiaBernardo Dominic QUALIFIED
Maria MarrierFranceAnna Fali NEW
Chavez BriddickIndiaElwin Sharvill PROPOSAL
David DarakjyUnited KingdomElwin Sharvill RENEWAL
Stacey MacleadJapanStephen Shaw NEGOTIATION
Silvio SlusarskiAustraliaAmy Elsner NEGOTIATION
Ivar PaprockiUnited KingdomXuxue Feng QUALIFIED
Stacey MacleadGermanyIvan Magalhaes RENEWAL
Salvatore StockhamFranceBernardo Dominic QUALIFIED
Wickens NestleCanadaAsiya Javayant NEGOTIATION
Murillo MaletArgentinaOnyama Limba NEGOTIATION
Munro FerenczFranceOnyama Limba NEW
Murillo MaletItalyAmy Elsner RENEWAL
Cody SaylorsCanadaElwin Sharvill PROPOSAL
Rodrigues CampainJapanIvan Magalhaes NEW
Murillo MaletArgentinaStephen Shaw RENEWAL
Morrow RutaArgentinaBernardo Dominic RENEWAL
James ButtGermanyBernardo Dominic NEGOTIATION
Murillo MaletCanadaBernardo Dominic PROPOSAL
Tony FollerArgentinaStephen Shaw NEW
Arvin AlbaresGermanyElwin Sharvill PROPOSAL
Darci PoquetteArgentinaAsiya Javayant PROPOSAL
Salvatore StockhamBrazilAnna Fali PROPOSAL
Claire TollnerItalyStephen Shaw PROPOSAL
Misaki RoysterSpainIvan Magalhaes QUALIFIED
Juan WieserFranceXuxue Feng NEW
Maisha RulapaughIndiaStephen Shaw NEW
Alejandro PerinRussiaBernardo Dominic NEGOTIATION
Kadeem FlosiGermanyElwin Sharvill NEW
Nicolas IturbideIndiaAnna Fali NEGOTIATION
Maria MarrierArgentinaXuxue Feng NEW
Salvatore StockhamRussiaAsiya Javayant QUALIFIED
Izzy GarufiJapanElwin Sharvill PROPOSAL
James ButtBrazilOnyama Limba NEW
Francesco ShinkoSpainOnyama Limba RENEWAL
Tony FollerUnited KingdomAmy Elsner RENEWAL
Darci PoquetteItalyXuxue Feng NEGOTIATION
Jefferson SchemmerSpainAsiya Javayant UNQUALIFIED
Ashley DoeAustraliaXuxue Feng QUALIFIED
Jefferson SchemmerAustraliaXuxue Feng QUALIFIED
Mayumi KolmetzRussiaAmy Elsner NEW
Rodrigues CampainSpainBernardo Dominic PROPOSAL
Stacey MacleadIndiaIoni Bowcher NEGOTIATION
Francesco ShinkoUnited KingdomXuxue Feng PROPOSAL
Kadeem FlosiBrazilAnna Fali QUALIFIED
Murillo MaletSpainIvan Magalhaes NEGOTIATION
Aditya KuskoSpainAmy Elsner QUALIFIED
Smith GlickBrazilIoni Bowcher NEW
Costa DilliardFranceIoni Bowcher PROPOSAL
Ashley DoeCanadaAmy Elsner RENEWAL
Frozen Columns
Name
Faith Gillian
Chavez Briddick
David Darakjy
Julie Stenseth
Aditya Kusko
Julie Stenseth
Misaki Royster
Darci Poquette
Faith Gillian
Julie Stenseth
Morrow Ruta
Isabel Bowley
Leja Caldarera
Wickens Nestle
Maria Marrier
James Butt
Maria Marrier
Aika Inouye
Greenwood Bolognia
Octavia Malet
Cody Saylors
Deepesh Chui
Salvatore Stockham
Adams Morasca
Jefferson Schemmer
Aika Inouye
David Darakjy
Jennifer Amigon
Arvin Albares
Leja Caldarera
Ashley Doe
Mayumi Kolmetz
Deepesh Chui
Deepesh Chui
Leon Oldroyd
Francesco Shinko
James Butt
Morrow Ruta
Juan Wieser
Cody Saylors
Aika Inouye
Jones Vocelka
Munro Ferencz
Kadeem Flosi
Sinclair Waycott
Tony Foller
Ricardo Gaucho
Arvin Albares
Jones Vocelka
Costa Dilliard
IdCountryDate
1000United Kingdom2021-02-08
1001Germany2021-02-14
1002Russia2021-03-02
1003Canada2021-02-21
1004Canada2021-02-20
1005France2021-02-21
1006Canada2021-02-15
1007Australia2021-03-04
1008Argentina2021-02-27
1009France2021-02-26
1010India2021-02-17
1011Canada2021-02-11
1012Australia2021-02-13
1013Germany2021-02-10
1014Germany2021-02-17
1015Argentina2021-02-16
1016Canada2021-02-25
1017Brazil2021-03-05
1018France2021-02-08
1019France2021-02-12
1020Japan2021-03-02
1021Japan2021-02-11
1022Canada2021-02-18
1023Argentina2021-02-07
1024France2021-03-01
1025Italy2021-02-26
1026Canada2021-02-19
1027Australia2021-02-27
1028France2021-02-18
1029Italy2021-02-27
1030United Kingdom2021-03-02
1031Japan2021-02-12
1032Japan2021-03-03
1033Spain2021-02-13
1034Spain2021-02-05
1035Argentina2021-03-05
1036Spain2021-03-04
1037Germany2021-02-24
1038Australia2021-02-04
1039France2021-02-14
1040Japan2021-02-26
1041Germany2021-02-15
1042Russia2021-03-04
1043Japan2021-02-27
1044France2021-03-03
1045Germany2021-02-15
1046Italy2021-03-02
1047Russia2021-02-04
1048Australia2021-02-19
1049India2021-02-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Faith GillianSpainAmy Elsner QUALIFIED
James ButtIndiaXuxue Feng QUALIFIED
Maria MarrierUnited KingdomOnyama Limba UNQUALIFIED
Silvio SlusarskiBrazilAmy Elsner NEGOTIATION
James ButtRussiaOnyama Limba NEW
Ricardo GauchoIndiaAsiya Javayant NEW
Deepesh ChuiJapanBernardo Dominic NEW
Antonio CaudyItalyAmy Elsner RENEWAL
Greenwood BologniaIndiaStephen Shaw NEW
Costa DilliardIndiaAmy Elsner UNQUALIFIED
Greenwood BologniaAustraliaIvan Magalhaes NEGOTIATION
Isabel BowleyRussiaIoni Bowcher PROPOSAL
Kaitlin OstroskySpainBernardo Dominic UNQUALIFIED
Maisha RulapaughIndiaAmy Elsner RENEWAL
Aruna FigeroaBrazilAsiya Javayant RENEWAL
Costa DilliardRussiaStephen Shaw NEGOTIATION
James ButtSpainStephen Shaw QUALIFIED
Sinclair WaycottBrazilStephen Shaw NEW
Tony FollerItalyXuxue Feng RENEWAL
Arvin AlbaresBrazilElwin Sharvill QUALIFIED
Darci PoquetteItalyElwin Sharvill UNQUALIFIED
Greenwood BologniaAustraliaAsiya Javayant UNQUALIFIED
Juan WieserItalyBernardo Dominic RENEWAL
Francesco ShinkoCanadaBernardo Dominic RENEWAL
Jennifer AmigonFranceElwin Sharvill RENEWAL
Nicolas IturbideCanadaAnna Fali RENEWAL
Nicolas IturbideGermanyBernardo Dominic NEW
Kaitlin OstroskyCanadaAnna Fali QUALIFIED
Juan WieserRussiaXuxue Feng UNQUALIFIED
Faith GillianRussiaOnyama Limba NEW
Cody SaylorsIndiaOnyama Limba QUALIFIED
Chavez BriddickRussiaAnna Fali NEW
Nicolas IturbideSpainAnna Fali PROPOSAL
Adams MorascaArgentinaElwin Sharvill RENEWAL
Isabel BowleyItalyAmy Elsner UNQUALIFIED
Rodrigues CampainIndiaAnna Fali NEW
Adams MorascaJapanAmy Elsner NEGOTIATION
Francesco ShinkoJapanBernardo Dominic UNQUALIFIED
Jefferson SchemmerArgentinaStephen Shaw NEGOTIATION
Stacey MacleadIndiaAnna Fali NEGOTIATION

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