Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

Saga Saga
Vela Vela
Arya Arya

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
Juan WieserRussiaAmy Elsner NEW
Munro FerenczRussiaBernardo Dominic PROPOSAL
Leja CaldareraUnited KingdomOnyama Limba NEGOTIATION
Ivar PaprockiGermanyBernardo Dominic RENEWAL
Tony FollerGermanyElwin Sharvill QUALIFIED
Emily WhobreyGermanyXuxue Feng RENEWAL
Claire TollnerRussiaIvan Magalhaes UNQUALIFIED
Nicolas IturbideCanadaBernardo Dominic PROPOSAL
Munro FerenczBrazilOnyama Limba QUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner NEGOTIATION
Jennifer AmigonArgentinaBernardo Dominic NEW
Munro FerenczGermanyAmy Elsner PROPOSAL
Silvio SlusarskiItalyIvan Magalhaes NEGOTIATION
Claire TollnerArgentinaAmy Elsner QUALIFIED
Antonio CaudyCanadaIvan Magalhaes RENEWAL
Munro FerenczUnited KingdomXuxue Feng NEGOTIATION
Leja CaldareraItalyAsiya Javayant QUALIFIED
Mujtaba NickaJapanXuxue Feng NEGOTIATION
James ButtRussiaElwin Sharvill UNQUALIFIED
Kaitlin OstroskyArgentinaAsiya Javayant NEGOTIATION
Rodrigues CampainFranceXuxue Feng UNQUALIFIED
Izzy GarufiFranceXuxue Feng PROPOSAL
Arvin AlbaresRussiaAsiya Javayant NEGOTIATION
Greenwood BologniaJapanXuxue Feng RENEWAL
Sinclair WaycottUnited KingdomElwin Sharvill NEGOTIATION
Clifford RimFranceAnna Fali QUALIFIED
Mayumi KolmetzItalyAmy Elsner PROPOSAL
Jeanfrancois VenereAustraliaAnna Fali QUALIFIED
Izzy GarufiJapanAmy Elsner NEW
Aditya KuskoCanadaAsiya Javayant RENEWAL
Nicolas IturbideBrazilOnyama Limba UNQUALIFIED
Johnson SergiCanadaStephen Shaw UNQUALIFIED
Ashley DoeGermanyAmy Elsner NEGOTIATION
Salvatore StockhamAustraliaOnyama Limba UNQUALIFIED
Aditya KuskoJapanIvan Magalhaes PROPOSAL
Murillo MaletAustraliaStephen Shaw NEW
Leja CaldareraArgentinaIvan Magalhaes NEW
Johnson SergiUnited KingdomAsiya Javayant UNQUALIFIED
Aruna FigeroaIndiaOnyama Limba NEW
Greenwood BologniaJapanStephen Shaw UNQUALIFIED
Murillo MaletBrazilAmy Elsner QUALIFIED
Mujtaba NickaUnited KingdomOnyama Limba NEW
Tony FollerSpainAnna Fali PROPOSAL
Jennifer AmigonIndiaElwin Sharvill NEW
Julie StensethItalyElwin Sharvill UNQUALIFIED
Stacey MacleadBrazilIvan Magalhaes RENEWAL
Jeanfrancois VenereUnited KingdomAnna Fali PROPOSAL
Cody SaylorsBrazilAmy Elsner RENEWAL
Ivar PaprockiRussiaAnna Fali RENEWAL
Rodrigues CampainFranceXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaIndiaAmy Elsner RENEWAL
Mujtaba NickaRussiaIvan Magalhaes PROPOSAL
Octavia MaletBrazilElwin Sharvill PROPOSAL
Emily WhobreyItalyOnyama Limba QUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic QUALIFIED
David DarakjyBrazilXuxue Feng UNQUALIFIED
Ashley DoeBrazilStephen Shaw QUALIFIED
Isabel BowleyCanadaOnyama Limba NEGOTIATION
Kadeem FlosiFranceOnyama Limba QUALIFIED
Costa DilliardIndiaAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzUnited Kingdom2021-02-18King, Christopher A Esq UNQUALIFIED50Bernardo Dominic
1001Ashley DoeAustralia2021-02-16King, Christopher A Esq NEGOTIATION7Asiya Javayant
1002Silvio SlusarskiIndia2021-02-12Rangoni Of Florence PROPOSAL27Xuxue Feng
1003Leon OldroydRussia2021-01-26Chanay, Jeffrey A Esq PROPOSAL90Stephen Shaw
1004Leon OldroydArgentina2021-02-07Benton, John B Jr UNQUALIFIED8Xuxue Feng
1005Jennifer AmigonJapan2021-02-23Truhlar And Truhlar Attys UNQUALIFIED42Onyama Limba
1006Octavia MaletBrazil2021-02-20Chapman, Ross E Esq UNQUALIFIED59Bernardo Dominic
1007Murillo MaletAustralia2021-01-29Chapman, Ross E Esq QUALIFIED29Asiya Javayant
1008Deepesh ChuiRussia2021-02-10Dorl, James J Esq NEW62Anna Fali
1009Octavia MaletArgentina2021-02-10King, Christopher A Esq QUALIFIED15Anna Fali
1010Sinclair WaycottFrance2021-02-16Rangoni Of Florence UNQUALIFIED83Elwin Sharvill
1011Maria MarrierCanada2021-02-18Feltz Printing Service PROPOSAL14Elwin Sharvill
1012Arvin AlbaresSpain2021-02-24Dorl, James J Esq NEGOTIATION51Asiya Javayant
1013Aruna FigeroaGermany2021-02-04Truhlar And Truhlar Attys NEGOTIATION0Xuxue Feng
1014Aruna FigeroaBrazil2021-02-02Chapman, Ross E Esq RENEWAL75Elwin Sharvill
1015Greenwood BologniaArgentina2021-01-27Chanay, Jeffrey A Esq NEW54Amy Elsner
1016Greenwood BologniaGermany2021-02-08Morlong Associates NEW50Amy Elsner
1017Faith GillianItaly2021-02-21Dorl, James J Esq NEW21Bernardo Dominic
1018Munro FerenczFrance2021-01-31Benton, John B Jr PROPOSAL7Ioni Bowcher
1019Claire TollnerJapan2021-02-11Rousseaux, Michael Esq UNQUALIFIED63Ivan Magalhaes
1020Nicolas IturbideGermany2021-02-05Rousseaux, Michael Esq PROPOSAL74Anna Fali
1021Leon OldroydBrazil2021-02-15Chanay, Jeffrey A Esq PROPOSAL72Ivan Magalhaes
1022Jefferson SchemmerItaly2021-02-13Printing Dimensions QUALIFIED74Asiya Javayant
1023Mayumi KolmetzCanada2021-02-14Feiner Bros NEW80Asiya Javayant
1024Deepesh ChuiCanada2021-01-31Commercial Press QUALIFIED21Ivan Magalhaes
1025Cody SaylorsBrazil2021-02-15Dorl, James J Esq PROPOSAL36Amy Elsner
1026David DarakjyJapan2021-02-13King, Christopher A Esq PROPOSAL4Ioni Bowcher
1027Isabel BowleyUnited Kingdom2021-02-07Dorl, James J Esq UNQUALIFIED45Xuxue Feng
1028Stacey MacleadArgentina2021-02-04Feltz Printing Service RENEWAL51Bernardo Dominic
1029Misaki RoysterBrazil2021-02-04Dorl, James J Esq NEW89Stephen Shaw
1030Faith GillianAustralia2021-02-03Feltz Printing Service PROPOSAL48Ioni Bowcher
1031Jennifer AmigonUnited Kingdom2021-01-26Chapman, Ross E Esq NEW2Anna Fali
1032Leon OldroydBrazil2021-02-17Chemel, James L Cpa PROPOSAL79Asiya Javayant
1033Deepesh ChuiJapan2021-02-09King, Christopher A Esq NEGOTIATION49Elwin Sharvill
1034Johnson SergiAustralia2021-02-06Printing Dimensions QUALIFIED34Elwin Sharvill
1035Costa DilliardSpain2021-02-14Chapman, Ross E Esq QUALIFIED44Anna Fali
1036Silvio SlusarskiGermany2021-02-21Commercial Press RENEWAL43Elwin Sharvill
1037Aditya KuskoUnited Kingdom2021-01-29Benton, John B Jr UNQUALIFIED14Onyama Limba
1038Antonio CaudyFrance2021-02-09Commercial Press RENEWAL94Ioni Bowcher
1039Rodrigues CampainUnited Kingdom2021-02-17Morlong Associates NEGOTIATION38Ivan Magalhaes
1040Silvio SlusarskiSpain2021-02-11Morlong Associates RENEWAL97Ivan Magalhaes
1041Johnson SergiSpain2021-02-18Rangoni Of Florence RENEWAL81Stephen Shaw
1042Darci PoquetteAustralia2021-02-22Chemel, James L Cpa NEGOTIATION19Anna Fali
1043Kaitlin OstroskyAustralia2021-02-05Commercial Press NEW75Ivan Magalhaes
1044Arvin AlbaresFrance2021-02-08Rangoni Of Florence NEGOTIATION48Xuxue Feng
1045Costa DilliardItaly2021-01-30Morlong Associates PROPOSAL88Stephen Shaw
1046Ivar PaprockiIndia2021-02-07Printing Dimensions NEW89Elwin Sharvill
1047Silvio SlusarskiSpain2021-02-20Rangoni Of Florence NEW67Elwin Sharvill
1048Juan WieserSpain2021-02-10Feltz Printing Service QUALIFIED78Ivan Magalhaes
1049Kadeem FlosiFrance2021-02-04Feiner Bros NEGOTIATION68Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerSpainStephen Shaw UNQUALIFIED
Aika InouyeItalyBernardo Dominic NEW
Antonio CaudyJapanOnyama Limba NEGOTIATION
Morrow RutaRussiaIvan Magalhaes PROPOSAL
Antonio CaudyBrazilOnyama Limba RENEWAL
Kadeem FlosiRussiaXuxue Feng QUALIFIED
Jennifer AmigonJapanOnyama Limba NEW
Kadeem FlosiGermanyAmy Elsner UNQUALIFIED
Francesco ShinkoAustraliaIvan Magalhaes PROPOSAL
Maria MarrierGermanyOnyama Limba NEGOTIATION
Johnson SergiUnited KingdomAsiya Javayant UNQUALIFIED
Julie StensethRussiaAnna Fali UNQUALIFIED
James ButtCanadaElwin Sharvill QUALIFIED
Costa DilliardBrazilElwin Sharvill RENEWAL
Nicolas IturbideAustraliaXuxue Feng UNQUALIFIED
Leon OldroydGermanyAmy Elsner PROPOSAL
Claire TollnerSpainElwin Sharvill NEGOTIATION
Nicolas IturbideArgentinaXuxue Feng QUALIFIED
Jeanfrancois VenereIndiaIoni Bowcher NEGOTIATION
Munro FerenczGermanyAsiya Javayant QUALIFIED
Alejandro PerinGermanyBernardo Dominic UNQUALIFIED
Jefferson SchemmerGermanyIoni Bowcher UNQUALIFIED
Smith GlickUnited KingdomAmy Elsner UNQUALIFIED
Emily WhobreyRussiaAnna Fali QUALIFIED
Murillo MaletJapanXuxue Feng NEGOTIATION
Misaki RoysterArgentinaAnna Fali RENEWAL
Leon OldroydArgentinaOnyama Limba QUALIFIED
Aika InouyeRussiaAsiya Javayant UNQUALIFIED
Claire TollnerIndiaAsiya Javayant UNQUALIFIED
Tony FollerArgentinaElwin Sharvill UNQUALIFIED
Misaki RoysterRussiaIoni Bowcher NEGOTIATION
Francesco ShinkoCanadaBernardo Dominic QUALIFIED
Darci PoquetteUnited KingdomStephen Shaw NEW
Adams MorascaFranceAsiya Javayant QUALIFIED
Maria MarrierRussiaIvan Magalhaes NEW
Mayumi KolmetzItalyAnna Fali UNQUALIFIED
Costa DilliardAustraliaXuxue Feng PROPOSAL
Cody SaylorsAustraliaElwin Sharvill RENEWAL
Aruna FigeroaGermanyIoni Bowcher QUALIFIED
Julie StensethUnited KingdomOnyama Limba RENEWAL
Chavez BriddickCanadaIvan Magalhaes NEGOTIATION
Leja CaldareraCanadaBernardo Dominic QUALIFIED
Greenwood BologniaSpainXuxue Feng NEGOTIATION
Munro FerenczSpainIoni Bowcher NEGOTIATION
Costa DilliardRussiaIvan Magalhaes RENEWAL
Nicolas IturbideRussiaOnyama Limba QUALIFIED
Nicolas IturbideCanadaAnna Fali UNQUALIFIED
Kadeem FlosiUnited KingdomXuxue Feng PROPOSAL
Clifford RimRussiaBernardo Dominic UNQUALIFIED
Izzy GarufiArgentinaIoni Bowcher PROPOSAL
Frozen Columns
Name
David Darakjy
Salvatore Stockham
Cody Saylors
Misaki Royster
Wickens Nestle
Ricardo Gaucho
Izzy Garufi
Juan Wieser
Kaitlin Ostrosky
Ivar Paprocki
Wickens Nestle
Wickens Nestle
Juan Wieser
Ivar Paprocki
Mujtaba Nicka
Leja Caldarera
Ashley Doe
Claire Tollner
Jennifer Amigon
Adams Morasca
Izzy Garufi
Darci Poquette
Adams Morasca
Ashley Doe
Greenwood Bolognia
Silvio Slusarski
Nicolas Iturbide
Julie Stenseth
Antonio Caudy
Sinclair Waycott
Clifford Rim
Smith Glick
Mujtaba Nicka
Maria Marrier
Jefferson Schemmer
Stacey Maclead
Clifford Rim
Jennifer Amigon
Octavia Malet
Chavez Briddick
Ricardo Gaucho
Murillo Malet
Misaki Royster
Juan Wieser
Antonio Caudy
Leon Oldroyd
Emily Whobrey
Jeanfrancois Venere
Claire Tollner
Jennifer Amigon
IdCountryDate
1000Russia2021-02-10
1001Japan2021-02-12
1002Germany2021-02-13
1003France2021-02-20
1004Argentina2021-01-28
1005Argentina2021-01-30
1006India2021-02-21
1007Italy2021-02-21
1008Germany2021-02-11
1009Russia2021-02-17
1010Italy2021-01-27
1011Spain2021-01-26
1012Russia2021-02-14
1013Canada2021-01-29
1014Italy2021-02-20
1015United Kingdom2021-01-28
1016Canada2021-02-19
1017Spain2021-02-02
1018India2021-02-09
1019United Kingdom2021-02-17
1020Japan2021-01-27
1021India2021-02-03
1022United Kingdom2021-02-12
1023Australia2021-02-14
1024Germany2021-02-15
1025India2021-01-27
1026Russia2021-02-20
1027India2021-01-26
1028Brazil2021-02-18
1029Germany2021-01-30
1030Spain2021-02-02
1031Germany2021-02-19
1032United Kingdom2021-02-12
1033Italy2021-02-18
1034France2021-02-23
1035Spain2021-02-09
1036France2021-02-07
1037Italy2021-02-13
1038Germany2021-02-12
1039Australia2021-02-21
1040Argentina2021-01-26
1041Italy2021-01-29
1042Brazil2021-02-18
1043Canada2021-01-28
1044Spain2021-02-22
1045United Kingdom2021-02-05
1046Russia2021-02-20
1047Russia2021-02-20
1048France2021-02-17
1049Russia2021-02-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiRussiaOnyama Limba PROPOSAL
Deepesh ChuiGermanyXuxue Feng QUALIFIED
Leon OldroydCanadaStephen Shaw UNQUALIFIED
Francesco ShinkoItalyAmy Elsner NEW
Rodrigues CampainSpainOnyama Limba PROPOSAL
Mujtaba NickaAustraliaAnna Fali PROPOSAL
Murillo MaletAustraliaAsiya Javayant RENEWAL
Stacey MacleadCanadaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereSpainIoni Bowcher NEGOTIATION
Murillo MaletRussiaBernardo Dominic PROPOSAL
Silvio SlusarskiUnited KingdomBernardo Dominic RENEWAL
Sinclair WaycottJapanXuxue Feng PROPOSAL
Cody SaylorsFranceIoni Bowcher QUALIFIED
Murillo MaletJapanAnna Fali RENEWAL
Antonio CaudyFranceElwin Sharvill PROPOSAL
Smith GlickJapanBernardo Dominic PROPOSAL
Adams MorascaIndiaIoni Bowcher NEW
Isabel BowleyItalyIoni Bowcher NEW
Kaitlin OstroskyCanadaStephen Shaw UNQUALIFIED
Smith GlickCanadaXuxue Feng PROPOSAL
Aika InouyeJapanStephen Shaw NEGOTIATION
Maisha RulapaughFranceAmy Elsner NEW
Juan WieserGermanyIvan Magalhaes NEGOTIATION
Nicolas IturbideCanadaStephen Shaw RENEWAL
Emily WhobreyJapanIvan Magalhaes NEGOTIATION
Munro FerenczUnited KingdomAmy Elsner NEGOTIATION
Ashley DoeJapanIvan Magalhaes QUALIFIED
Aika InouyeCanadaXuxue Feng QUALIFIED
Darci PoquetteCanadaElwin Sharvill UNQUALIFIED
David DarakjyAustraliaAsiya Javayant NEW
Antonio CaudyFranceAnna Fali QUALIFIED
Claire TollnerRussiaAnna Fali RENEWAL
Kaitlin OstroskyItalyAnna Fali NEW
Rodrigues CampainFranceBernardo Dominic NEGOTIATION
Sinclair WaycottIndiaAsiya Javayant RENEWAL
Francesco ShinkoGermanyIvan Magalhaes NEGOTIATION
Juan WieserFranceBernardo Dominic NEGOTIATION
David DarakjyCanadaIoni Bowcher QUALIFIED
Aruna FigeroaRussiaIvan Magalhaes PROPOSAL
Morrow RutaJapanAmy Elsner 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>