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
Tony FollerIndiaElwin Sharvill RENEWAL
Sinclair WaycottSpainAnna Fali RENEWAL
Ashley DoeGermanyElwin Sharvill QUALIFIED
Salvatore StockhamRussiaBernardo Dominic UNQUALIFIED
Francesco ShinkoArgentinaBernardo Dominic NEGOTIATION
Rodrigues CampainAustraliaBernardo Dominic PROPOSAL
Aika InouyeCanadaElwin Sharvill PROPOSAL
Kaitlin OstroskySpainXuxue Feng QUALIFIED
Jennifer AmigonUnited KingdomIoni Bowcher NEGOTIATION
Clifford RimIndiaStephen Shaw QUALIFIED
Misaki RoysterBrazilBernardo Dominic UNQUALIFIED
Aika InouyeBrazilIvan Magalhaes PROPOSAL
Darci PoquetteJapanAmy Elsner NEW
Salvatore StockhamCanadaBernardo Dominic NEW
Ricardo GauchoArgentinaXuxue Feng PROPOSAL
Francesco ShinkoGermanyAsiya Javayant NEW
Cody SaylorsBrazilAsiya Javayant RENEWAL
Maria MarrierAustraliaAsiya Javayant RENEWAL
Faith GillianRussiaBernardo Dominic UNQUALIFIED
Mujtaba NickaAustraliaOnyama Limba QUALIFIED
Deepesh ChuiJapanAnna Fali PROPOSAL
Ashley DoeSpainAnna Fali NEW
Antonio CaudyCanadaAsiya Javayant QUALIFIED
Clifford RimGermanyBernardo Dominic UNQUALIFIED
Cody SaylorsJapanOnyama Limba QUALIFIED
Arvin AlbaresArgentinaBernardo Dominic QUALIFIED
Alejandro PerinItalyBernardo Dominic RENEWAL
Wickens NestleIndiaIvan Magalhaes PROPOSAL
Jefferson SchemmerCanadaIoni Bowcher UNQUALIFIED
Isabel BowleyItalyXuxue Feng RENEWAL
James ButtRussiaAnna Fali RENEWAL
Salvatore StockhamFranceXuxue Feng RENEWAL
Rodrigues CampainBrazilOnyama Limba QUALIFIED
Munro FerenczIndiaElwin Sharvill NEGOTIATION
Maisha RulapaughBrazilIvan Magalhaes RENEWAL
Octavia MaletIndiaIvan Magalhaes RENEWAL
Maria MarrierFranceElwin Sharvill NEGOTIATION
Ricardo GauchoRussiaAmy Elsner NEW
Jeanfrancois VenereUnited KingdomIoni Bowcher PROPOSAL
Salvatore StockhamJapanAnna Fali UNQUALIFIED
Faith GillianJapanElwin Sharvill QUALIFIED
Costa DilliardUnited KingdomElwin Sharvill RENEWAL
Wickens NestleRussiaOnyama Limba NEGOTIATION
Johnson SergiGermanyElwin Sharvill PROPOSAL
Julie StensethUnited KingdomBernardo Dominic PROPOSAL
Smith GlickAustraliaXuxue Feng QUALIFIED
Alejandro PerinFranceAnna Fali QUALIFIED
Tony FollerRussiaAnna Fali UNQUALIFIED
Claire TollnerBrazilAmy Elsner UNQUALIFIED
Jennifer AmigonRussiaAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresCanadaStephen Shaw NEW
Stacey MacleadItalyAmy Elsner PROPOSAL
Jeanfrancois VenereCanadaIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyUnited KingdomBernardo Dominic NEGOTIATION
Deepesh ChuiFranceAmy Elsner UNQUALIFIED
Darci PoquetteIndiaStephen Shaw NEW
Sinclair WaycottRussiaAsiya Javayant NEGOTIATION
Antonio CaudyGermanyXuxue Feng QUALIFIED
Juan WieserAustraliaAsiya Javayant QUALIFIED
Mayumi KolmetzBrazilAmy Elsner NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maisha RulapaughGermany2021-02-20Dorl, James J Esq QUALIFIED96Xuxue Feng
1001Sinclair WaycottUnited Kingdom2021-02-27Printing Dimensions NEW37Onyama Limba
1002Mujtaba NickaJapan2021-02-18Morlong Associates NEGOTIATION42Stephen Shaw
1003Mayumi KolmetzIndia2021-02-28Chanay, Jeffrey A Esq QUALIFIED31Anna Fali
1004Juan WieserGermany2021-02-27Feiner Bros NEW27Elwin Sharvill
1005Alejandro PerinFrance2021-03-02Buckley Miller Wright PROPOSAL51Anna Fali
1006Aika InouyeSpain2021-03-04Chanay, Jeffrey A Esq QUALIFIED76Bernardo Dominic
1007Cody SaylorsBrazil2021-02-12Rousseaux, Michael Esq NEW54Xuxue Feng
1008Jeanfrancois VenereGermany2021-02-27Buckley Miller Wright QUALIFIED33Bernardo Dominic
1009Sinclair WaycottUnited Kingdom2021-02-27Feltz Printing Service QUALIFIED4Anna Fali
1010Emily WhobreyBrazil2021-02-17Rangoni Of Florence RENEWAL44Stephen Shaw
1011Tony FollerArgentina2021-02-07Rousseaux, Michael Esq RENEWAL20Stephen Shaw
1012Leon OldroydAustralia2021-03-02Feiner Bros NEGOTIATION14Ioni Bowcher
1013Wickens NestleBrazil2021-02-11Rangoni Of Florence NEGOTIATION17Xuxue Feng
1014Maria MarrierJapan2021-02-14Chapman, Ross E Esq QUALIFIED21Elwin Sharvill
1015Wickens NestleCanada2021-02-06Printing Dimensions NEGOTIATION84Asiya Javayant
1016Nicolas IturbideAustralia2021-02-09Chapman, Ross E Esq NEGOTIATION33Ivan Magalhaes
1017Smith GlickIndia2021-02-27Buckley Miller Wright QUALIFIED22Elwin Sharvill
1018Murillo MaletRussia2021-03-02King, Christopher A Esq RENEWAL87Elwin Sharvill
1019Octavia MaletGermany2021-03-04Feltz Printing Service PROPOSAL12Stephen Shaw
1020Ivar PaprockiIndia2021-02-17Rousseaux, Michael Esq RENEWAL48Ioni Bowcher
1021Izzy GarufiAustralia2021-02-08Benton, John B Jr NEGOTIATION14Elwin Sharvill
1022Jennifer AmigonArgentina2021-02-22Commercial Press QUALIFIED7Xuxue Feng
1023Leon OldroydArgentina2021-02-23Feiner Bros NEGOTIATION84Xuxue Feng
1024Aruna FigeroaGermany2021-03-02Chanay, Jeffrey A Esq UNQUALIFIED90Bernardo Dominic
1025Greenwood BologniaFrance2021-02-16Rangoni Of Florence UNQUALIFIED92Xuxue Feng
1026Kaitlin OstroskyFrance2021-02-09Chemel, James L Cpa RENEWAL60Elwin Sharvill
1027Stacey MacleadIndia2021-02-09Rousseaux, Michael Esq QUALIFIED40Xuxue Feng
1028Rodrigues CampainArgentina2021-03-06Chapman, Ross E Esq PROPOSAL89Ivan Magalhaes
1029Alejandro PerinCanada2021-02-16Buckley Miller Wright NEGOTIATION3Amy Elsner
1030Wickens NestleRussia2021-02-20Commercial Press UNQUALIFIED5Ivan Magalhaes
1031Alejandro PerinRussia2021-02-23Commercial Press RENEWAL68Anna Fali
1032Jennifer AmigonUnited Kingdom2021-03-05Feiner Bros NEW45Onyama Limba
1033Claire TollnerSpain2021-02-28Dorl, James J Esq PROPOSAL19Bernardo Dominic
1034Chavez BriddickJapan2021-02-25Dorl, James J Esq PROPOSAL34Bernardo Dominic
1035David DarakjyArgentina2021-02-11Feltz Printing Service QUALIFIED92Bernardo Dominic
1036Morrow RutaArgentina2021-02-06Feiner Bros RENEWAL8Ivan Magalhaes
1037Costa DilliardAustralia2021-02-15Chemel, James L Cpa UNQUALIFIED66Xuxue Feng
1038Aika InouyeArgentina2021-02-14Dorl, James J Esq UNQUALIFIED56Anna Fali
1039Aika InouyeBrazil2021-02-22Buckley Miller Wright PROPOSAL95Anna Fali
1040Izzy GarufiIndia2021-02-15King, Christopher A Esq PROPOSAL67Anna Fali
1041Chavez BriddickJapan2021-02-11Feiner Bros NEW89Bernardo Dominic
1042Ricardo GauchoArgentina2021-02-20Rousseaux, Michael Esq QUALIFIED73Ioni Bowcher
1043Aditya KuskoCanada2021-02-16Feltz Printing Service UNQUALIFIED14Bernardo Dominic
1044Jefferson SchemmerAustralia2021-02-23Feiner Bros QUALIFIED84Asiya Javayant
1045Johnson SergiAustralia2021-02-28Feiner Bros PROPOSAL10Amy Elsner
1046Juan WieserUnited Kingdom2021-02-28Printing Dimensions NEGOTIATION70Xuxue Feng
1047Clifford RimSpain2021-03-05Commercial Press UNQUALIFIED97Anna Fali
1048Misaki RoysterCanada2021-02-16Printing Dimensions QUALIFIED12Bernardo Dominic
1049Nicolas IturbideJapan2021-02-22Rousseaux, Michael Esq UNQUALIFIED80Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Octavia MaletJapanAnna Fali RENEWAL
Munro FerenczUnited KingdomAnna Fali QUALIFIED
Juan WieserJapanBernardo Dominic NEW
Clifford RimItalyAnna Fali PROPOSAL
Jeanfrancois VenereBrazilOnyama Limba PROPOSAL
Emily WhobreyGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaRussiaXuxue Feng PROPOSAL
Ivar PaprockiCanadaBernardo Dominic UNQUALIFIED
Octavia MaletUnited KingdomBernardo Dominic UNQUALIFIED
Wickens NestleAustraliaXuxue Feng UNQUALIFIED
James ButtArgentinaIoni Bowcher UNQUALIFIED
Maisha RulapaughUnited KingdomXuxue Feng NEGOTIATION
Costa DilliardCanadaIvan Magalhaes NEGOTIATION
Francesco ShinkoArgentinaOnyama Limba PROPOSAL
Misaki RoysterFranceAmy Elsner NEGOTIATION
Alejandro PerinSpainStephen Shaw NEGOTIATION
Isabel BowleyAustraliaXuxue Feng NEGOTIATION
Misaki RoysterItalyXuxue Feng QUALIFIED
Leon OldroydItalyElwin Sharvill UNQUALIFIED
Jennifer AmigonFranceStephen Shaw NEW
Ricardo GauchoUnited KingdomAmy Elsner RENEWAL
Nicolas IturbideBrazilOnyama Limba NEW
Mayumi KolmetzIndiaBernardo Dominic QUALIFIED
Costa DilliardJapanXuxue Feng RENEWAL
Silvio SlusarskiGermanyIoni Bowcher QUALIFIED
Juan WieserIndiaXuxue Feng RENEWAL
Johnson SergiGermanyAsiya Javayant PROPOSAL
Greenwood BologniaFranceOnyama Limba RENEWAL
Aika InouyeArgentinaAnna Fali RENEWAL
Isabel BowleyAustraliaIoni Bowcher PROPOSAL
Darci PoquetteIndiaAmy Elsner UNQUALIFIED
Leja CaldareraIndiaElwin Sharvill RENEWAL
Faith GillianCanadaStephen Shaw QUALIFIED
Leja CaldareraAustraliaIoni Bowcher NEW
Deepesh ChuiItalyIvan Magalhaes PROPOSAL
Ashley DoeItalyIoni Bowcher NEGOTIATION
Izzy GarufiItalyXuxue Feng RENEWAL
Alejandro PerinIndiaXuxue Feng NEW
Mayumi KolmetzBrazilBernardo Dominic NEGOTIATION
Salvatore StockhamJapanOnyama Limba RENEWAL
David DarakjyRussiaElwin Sharvill QUALIFIED
Adams MorascaCanadaElwin Sharvill QUALIFIED
Ashley DoeArgentinaOnyama Limba QUALIFIED
Misaki RoysterUnited KingdomIvan Magalhaes PROPOSAL
Nicolas IturbideIndiaStephen Shaw RENEWAL
Faith GillianGermanyOnyama Limba PROPOSAL
Greenwood BologniaAustraliaIvan Magalhaes QUALIFIED
Cody SaylorsItalyBernardo Dominic NEGOTIATION
Jeanfrancois VenereBrazilAmy Elsner RENEWAL
Chavez BriddickItalyAnna Fali NEGOTIATION
Frozen Columns
Name
Octavia Malet
Misaki Royster
Jennifer Amigon
Jones Vocelka
David Darakjy
Ivar Paprocki
Deepesh Chui
Juan Wieser
Julie Stenseth
Adams Morasca
Rodrigues Campain
Costa Dilliard
Smith Glick
Misaki Royster
Misaki Royster
Ricardo Gaucho
Misaki Royster
Silvio Slusarski
Juan Wieser
Costa Dilliard
Faith Gillian
Silvio Slusarski
David Darakjy
Ashley Doe
Emily Whobrey
Aruna Figeroa
Kadeem Flosi
Smith Glick
Mayumi Kolmetz
Ashley Doe
Murillo Malet
Murillo Malet
Mayumi Kolmetz
Aditya Kusko
Chavez Briddick
Adams Morasca
Leon Oldroyd
Chavez Briddick
Tony Foller
Faith Gillian
Sinclair Waycott
Claire Tollner
Smith Glick
Mujtaba Nicka
Francesco Shinko
Tony Foller
David Darakjy
David Darakjy
Ashley Doe
Darci Poquette
IdCountryDate
1000Russia2021-03-05
1001India2021-03-05
1002United Kingdom2021-03-01
1003France2021-03-05
1004Australia2021-02-09
1005Argentina2021-03-04
1006Australia2021-02-08
1007India2021-02-05
1008Japan2021-02-21
1009India2021-02-16
1010Russia2021-02-17
1011Canada2021-02-21
1012France2021-02-19
1013Russia2021-02-18
1014United Kingdom2021-02-12
1015Canada2021-02-09
1016Spain2021-02-25
1017Australia2021-02-28
1018United Kingdom2021-02-05
1019United Kingdom2021-03-02
1020France2021-02-27
1021Canada2021-02-06
1022India2021-02-23
1023Italy2021-03-06
1024Japan2021-02-22
1025France2021-02-16
1026Russia2021-02-26
1027France2021-02-07
1028Japan2021-03-02
1029India2021-02-14
1030Russia2021-02-24
1031India2021-02-20
1032Brazil2021-02-07
1033Japan2021-02-05
1034France2021-03-04
1035Spain2021-03-05
1036Canada2021-02-15
1037Germany2021-02-06
1038Germany2021-03-06
1039Canada2021-02-14
1040United Kingdom2021-03-06
1041Argentina2021-02-18
1042Spain2021-02-08
1043Germany2021-02-11
1044Japan2021-03-05
1045Argentina2021-02-27
1046Germany2021-02-25
1047Brazil2021-02-18
1048Australia2021-02-26
1049France2021-03-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyUnited KingdomAnna Fali NEW
Nicolas IturbideSpainBernardo Dominic UNQUALIFIED
Adams MorascaCanadaXuxue Feng PROPOSAL
Ricardo GauchoGermanyOnyama Limba NEGOTIATION
Clifford RimCanadaIoni Bowcher NEGOTIATION
Arvin AlbaresJapanElwin Sharvill NEGOTIATION
Faith GillianUnited KingdomAmy Elsner QUALIFIED
Aika InouyeSpainElwin Sharvill RENEWAL
Kaitlin OstroskyCanadaAnna Fali RENEWAL
Aruna FigeroaBrazilOnyama Limba RENEWAL
Aditya KuskoAustraliaBernardo Dominic RENEWAL
Aditya KuskoJapanAsiya Javayant NEGOTIATION
Francesco ShinkoBrazilXuxue Feng NEW
Ricardo GauchoUnited KingdomAnna Fali NEW
Ivar PaprockiUnited KingdomXuxue Feng NEW
Antonio CaudyArgentinaAnna Fali PROPOSAL
Francesco ShinkoAustraliaBernardo Dominic UNQUALIFIED
Leja CaldareraJapanIoni Bowcher RENEWAL
Johnson SergiUnited KingdomIoni Bowcher NEGOTIATION
Johnson SergiRussiaAnna Fali NEW
Mujtaba NickaCanadaAsiya Javayant NEGOTIATION
Ashley DoeRussiaElwin Sharvill RENEWAL
Antonio CaudyJapanElwin Sharvill UNQUALIFIED
Kadeem FlosiIndiaOnyama Limba NEW
Claire TollnerJapanOnyama Limba NEGOTIATION
Greenwood BologniaArgentinaAmy Elsner UNQUALIFIED
Alejandro PerinBrazilStephen Shaw RENEWAL
Maisha RulapaughGermanyBernardo Dominic QUALIFIED
Tony FollerUnited KingdomXuxue Feng UNQUALIFIED
Jones VocelkaSpainAmy Elsner QUALIFIED
James ButtAustraliaIvan Magalhaes NEGOTIATION
Isabel BowleyUnited KingdomXuxue Feng UNQUALIFIED
Jefferson SchemmerArgentinaBernardo Dominic PROPOSAL
Alejandro PerinUnited KingdomIvan Magalhaes NEW
Antonio CaudyUnited KingdomElwin Sharvill NEW
Aditya KuskoIndiaIvan Magalhaes PROPOSAL
Francesco ShinkoUnited KingdomAmy Elsner NEW
Adams MorascaItalyStephen Shaw NEW
Emily WhobreyFranceBernardo Dominic PROPOSAL
Mujtaba NickaCanadaAsiya Javayant 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>