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
Salvatore StockhamRussiaAsiya Javayant NEGOTIATION
Ricardo GauchoItalyBernardo Dominic NEW
Leja CaldareraFranceStephen Shaw NEW
Jefferson SchemmerIndiaAmy Elsner NEW
Johnson SergiAustraliaOnyama Limba NEGOTIATION
Nicolas IturbideSpainBernardo Dominic RENEWAL
Greenwood BologniaUnited KingdomOnyama Limba QUALIFIED
Silvio SlusarskiAustraliaXuxue Feng NEGOTIATION
Francesco ShinkoUnited KingdomStephen Shaw QUALIFIED
Isabel BowleyFranceIvan Magalhaes QUALIFIED
Emily WhobreyJapanOnyama Limba PROPOSAL
Julie StensethCanadaXuxue Feng RENEWAL
Salvatore StockhamBrazilIvan Magalhaes NEW
Jefferson SchemmerItalyStephen Shaw UNQUALIFIED
Octavia MaletBrazilAmy Elsner UNQUALIFIED
Alejandro PerinBrazilOnyama Limba UNQUALIFIED
Jennifer AmigonSpainAsiya Javayant QUALIFIED
Kadeem FlosiGermanyXuxue Feng PROPOSAL
Juan WieserCanadaBernardo Dominic QUALIFIED
Kaitlin OstroskyUnited KingdomAnna Fali QUALIFIED
Kaitlin OstroskyCanadaAsiya Javayant NEGOTIATION
Silvio SlusarskiSpainBernardo Dominic NEGOTIATION
Alejandro PerinSpainAmy Elsner NEGOTIATION
Izzy GarufiBrazilIvan Magalhaes PROPOSAL
Izzy GarufiArgentinaElwin Sharvill QUALIFIED
Silvio SlusarskiArgentinaBernardo Dominic UNQUALIFIED
Jones VocelkaRussiaAmy Elsner RENEWAL
Jeanfrancois VenereCanadaOnyama Limba NEW
Faith GillianIndiaBernardo Dominic QUALIFIED
Smith GlickRussiaXuxue Feng PROPOSAL
Deepesh ChuiGermanyIoni Bowcher NEW
Claire TollnerSpainStephen Shaw UNQUALIFIED
Julie StensethFranceOnyama Limba NEW
Kadeem FlosiJapanAnna Fali PROPOSAL
Clifford RimUnited KingdomXuxue Feng NEW
Stacey MacleadRussiaIvan Magalhaes PROPOSAL
Izzy GarufiUnited KingdomAsiya Javayant UNQUALIFIED
Stacey MacleadItalyIvan Magalhaes PROPOSAL
Maria MarrierItalyStephen Shaw PROPOSAL
Nicolas IturbideBrazilIoni Bowcher NEGOTIATION
Claire TollnerArgentinaOnyama Limba RENEWAL
Kaitlin OstroskyArgentinaXuxue Feng NEGOTIATION
Jennifer AmigonBrazilAmy Elsner QUALIFIED
Aika InouyeAustraliaXuxue Feng UNQUALIFIED
Johnson SergiBrazilIvan Magalhaes UNQUALIFIED
Misaki RoysterIndiaAmy Elsner NEGOTIATION
Kaitlin OstroskyGermanyAsiya Javayant NEW
Kadeem FlosiFranceBernardo Dominic PROPOSAL
Darci PoquetteArgentinaStephen Shaw NEW
Murillo MaletFranceOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaRussiaBernardo Dominic PROPOSAL
Aruna FigeroaCanadaOnyama Limba NEW
Alejandro PerinBrazilBernardo Dominic RENEWAL
Jefferson SchemmerIndiaAmy Elsner QUALIFIED
Clifford RimFranceElwin Sharvill UNQUALIFIED
Stacey MacleadRussiaBernardo Dominic PROPOSAL
Cody SaylorsGermanyIoni Bowcher RENEWAL
Tony FollerCanadaStephen Shaw RENEWAL
Isabel BowleyArgentinaIoni Bowcher NEGOTIATION
Aruna FigeroaJapanStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerRussia2021-02-08Truhlar And Truhlar Attys NEGOTIATION80Ioni Bowcher
1001Francesco ShinkoArgentina2021-02-12Commercial Press QUALIFIED77Asiya Javayant
1002Emily WhobreyArgentina2021-02-11Benton, John B Jr PROPOSAL81Asiya Javayant
1003Ivar PaprockiRussia2021-02-24Printing Dimensions UNQUALIFIED22Ioni Bowcher
1004Murillo MaletAustralia2021-02-03Dorl, James J Esq PROPOSAL14Amy Elsner
1005Jones VocelkaGermany2021-01-30Chanay, Jeffrey A Esq NEW79Elwin Sharvill
1006Clifford RimSpain2021-02-23Feiner Bros RENEWAL79Amy Elsner
1007David DarakjyCanada2021-02-09Dorl, James J Esq NEW49Xuxue Feng
1008Adams MorascaJapan2021-02-14Feltz Printing Service NEW52Bernardo Dominic
1009Rodrigues CampainArgentina2021-02-08Chemel, James L Cpa PROPOSAL88Xuxue Feng
1010Nicolas IturbideFrance2021-02-16Printing Dimensions NEW62Bernardo Dominic
1011Chavez BriddickIndia2021-02-15Rangoni Of Florence PROPOSAL0Ioni Bowcher
1012Tony FollerRussia2021-02-22Feltz Printing Service NEW60Anna Fali
1013Rodrigues CampainSpain2021-02-10Buckley Miller Wright UNQUALIFIED53Onyama Limba
1014James ButtUnited Kingdom2021-02-16King, Christopher A Esq NEW51Stephen Shaw
1015Arvin AlbaresArgentina2021-02-16Chanay, Jeffrey A Esq PROPOSAL73Ioni Bowcher
1016Greenwood BologniaArgentina2021-01-27Dorl, James J Esq NEGOTIATION9Bernardo Dominic
1017Ashley DoeArgentina2021-02-16Printing Dimensions RENEWAL69Xuxue Feng
1018Arvin AlbaresIndia2021-02-16Chemel, James L Cpa QUALIFIED22Bernardo Dominic
1019Ashley DoeFrance2021-02-05Chanay, Jeffrey A Esq RENEWAL48Elwin Sharvill
1020Nicolas IturbideBrazil2021-02-14Truhlar And Truhlar Attys QUALIFIED36Bernardo Dominic
1021Emily WhobreyAustralia2021-02-03Morlong Associates NEW1Elwin Sharvill
1022Smith GlickArgentina2021-02-21Chanay, Jeffrey A Esq NEW60Elwin Sharvill
1023Chavez BriddickUnited Kingdom2021-02-25Feltz Printing Service RENEWAL73Ivan Magalhaes
1024Aika InouyeArgentina2021-01-30King, Christopher A Esq PROPOSAL68Amy Elsner
1025Aditya KuskoSpain2021-02-10Rousseaux, Michael Esq NEW94Anna Fali
1026Arvin AlbaresJapan2021-02-11Buckley Miller Wright UNQUALIFIED98Elwin Sharvill
1027Antonio CaudyItaly2021-01-27Buckley Miller Wright NEW86Bernardo Dominic
1028Faith GillianGermany2021-02-25Rousseaux, Michael Esq PROPOSAL77Ivan Magalhaes
1029Mayumi KolmetzIndia2021-02-04Truhlar And Truhlar Attys NEW5Anna Fali
1030Arvin AlbaresSpain2021-01-29Dorl, James J Esq UNQUALIFIED71Ivan Magalhaes
1031Aruna FigeroaUnited Kingdom2021-02-09Chapman, Ross E Esq UNQUALIFIED43Ivan Magalhaes
1032Morrow RutaGermany2021-02-06Commercial Press PROPOSAL41Onyama Limba
1033Izzy GarufiBrazil2021-02-21Printing Dimensions QUALIFIED72Ivan Magalhaes
1034Aditya KuskoCanada2021-01-30King, Christopher A Esq NEW31Ioni Bowcher
1035Tony FollerGermany2021-02-23Rousseaux, Michael Esq NEW44Bernardo Dominic
1036Tony FollerBrazil2021-02-22King, Christopher A Esq PROPOSAL32Xuxue Feng
1037Maisha RulapaughCanada2021-02-21Rousseaux, Michael Esq NEW44Elwin Sharvill
1038Jeanfrancois VenereGermany2021-01-31Chanay, Jeffrey A Esq RENEWAL61Amy Elsner
1039Tony FollerGermany2021-02-13Chanay, Jeffrey A Esq UNQUALIFIED89Xuxue Feng
1040James ButtUnited Kingdom2021-02-20Rousseaux, Michael Esq PROPOSAL96Ivan Magalhaes
1041Francesco ShinkoIndia2021-02-20Commercial Press QUALIFIED92Ioni Bowcher
1042Ricardo GauchoUnited Kingdom2021-02-15Feiner Bros RENEWAL9Bernardo Dominic
1043Jeanfrancois VenereBrazil2021-02-09Rousseaux, Michael Esq NEW49Bernardo Dominic
1044Maria MarrierArgentina2021-02-25Feltz Printing Service NEGOTIATION36Elwin Sharvill
1045Darci PoquetteSpain2021-02-15Chapman, Ross E Esq RENEWAL37Elwin Sharvill
1046Rodrigues CampainFrance2021-02-08Chapman, Ross E Esq NEGOTIATION81Bernardo Dominic
1047Jeanfrancois VenereArgentina2021-02-17Printing Dimensions RENEWAL61Anna Fali
1048Cody SaylorsIndia2021-01-29Dorl, James J Esq NEGOTIATION63Ivan Magalhaes
1049Ashley DoeArgentina2021-02-10Dorl, James J Esq NEW30Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Izzy GarufiUnited KingdomOnyama Limba QUALIFIED
Arvin AlbaresJapanXuxue Feng RENEWAL
David DarakjyAustraliaAnna Fali QUALIFIED
Juan WieserFranceBernardo Dominic NEW
Salvatore StockhamArgentinaBernardo Dominic NEGOTIATION
Kadeem FlosiFranceAnna Fali NEW
Darci PoquetteUnited KingdomElwin Sharvill QUALIFIED
David DarakjyRussiaElwin Sharvill NEGOTIATION
Leja CaldareraFranceAsiya Javayant NEW
Chavez BriddickJapanXuxue Feng UNQUALIFIED
Emily WhobreySpainIvan Magalhaes NEGOTIATION
Claire TollnerFranceAmy Elsner NEW
Aditya KuskoJapanIoni Bowcher UNQUALIFIED
Jones VocelkaIndiaXuxue Feng NEW
Octavia MaletIndiaAmy Elsner NEGOTIATION
Juan WieserArgentinaIoni Bowcher PROPOSAL
Murillo MaletFranceElwin Sharvill PROPOSAL
Sinclair WaycottItalyOnyama Limba NEGOTIATION
Jones VocelkaArgentinaAmy Elsner UNQUALIFIED
Faith GillianAustraliaAsiya Javayant NEW
Maisha RulapaughUnited KingdomIoni Bowcher RENEWAL
Cody SaylorsFranceBernardo Dominic NEGOTIATION
Smith GlickBrazilElwin Sharvill UNQUALIFIED
Maisha RulapaughArgentinaBernardo Dominic RENEWAL
Ricardo GauchoGermanyOnyama Limba NEGOTIATION
Morrow RutaGermanyOnyama Limba NEW
Nicolas IturbideGermanyIvan Magalhaes RENEWAL
Alejandro PerinArgentinaAmy Elsner RENEWAL
Octavia MaletAustraliaAsiya Javayant RENEWAL
James ButtCanadaOnyama Limba NEGOTIATION
Nicolas IturbideJapanAsiya Javayant RENEWAL
Smith GlickJapanAnna Fali NEGOTIATION
Kaitlin OstroskySpainBernardo Dominic QUALIFIED
Juan WieserItalyStephen Shaw NEGOTIATION
Jeanfrancois VenereRussiaElwin Sharvill UNQUALIFIED
Emily WhobreyArgentinaBernardo Dominic NEW
Aika InouyeItalyBernardo Dominic RENEWAL
Maisha RulapaughItalyElwin Sharvill NEGOTIATION
Alejandro PerinFranceBernardo Dominic NEGOTIATION
Greenwood BologniaRussiaIvan Magalhaes PROPOSAL
Wickens NestleItalyAmy Elsner NEW
Tony FollerGermanyStephen Shaw RENEWAL
Mayumi KolmetzSpainOnyama Limba PROPOSAL
Julie StensethRussiaIvan Magalhaes UNQUALIFIED
Leon OldroydFranceAsiya Javayant RENEWAL
Izzy GarufiGermanyStephen Shaw NEGOTIATION
Johnson SergiItalyOnyama Limba RENEWAL
Johnson SergiUnited KingdomIoni Bowcher NEW
Munro FerenczArgentinaAsiya Javayant NEGOTIATION
Mujtaba NickaAustraliaXuxue Feng NEGOTIATION
Frozen Columns
Name
Nicolas Iturbide
Antonio Caudy
Nicolas Iturbide
Costa Dilliard
Jeanfrancois Venere
Murillo Malet
Alejandro Perin
Misaki Royster
James Butt
Alejandro Perin
Jones Vocelka
Faith Gillian
Faith Gillian
Mayumi Kolmetz
Isabel Bowley
Tony Foller
Jefferson Schemmer
James Butt
Jeanfrancois Venere
Kaitlin Ostrosky
Julie Stenseth
Murillo Malet
Izzy Garufi
Antonio Caudy
Cody Saylors
Kadeem Flosi
Stacey Maclead
Darci Poquette
Leja Caldarera
Antonio Caudy
Octavia Malet
Johnson Sergi
Stacey Maclead
Silvio Slusarski
Stacey Maclead
Adams Morasca
Adams Morasca
Leja Caldarera
Mujtaba Nicka
Izzy Garufi
Adams Morasca
David Darakjy
Silvio Slusarski
Emily Whobrey
Sinclair Waycott
Smith Glick
Mayumi Kolmetz
Izzy Garufi
Jefferson Schemmer
Claire Tollner
IdCountryDate
1000Russia2021-02-05
1001Canada2021-02-24
1002Argentina2021-02-17
1003Germany2021-02-22
1004Australia2021-02-23
1005Germany2021-01-30
1006Australia2021-02-16
1007Spain2021-02-09
1008Brazil2021-02-01
1009Argentina2021-02-11
1010France2021-02-13
1011Italy2021-02-08
1012United Kingdom2021-02-03
1013Brazil2021-02-22
1014Brazil2021-02-23
1015Japan2021-02-13
1016Russia2021-01-31
1017Canada2021-02-11
1018Canada2021-02-10
1019France2021-02-21
1020India2021-02-16
1021India2021-02-24
1022India2021-02-23
1023Spain2021-02-05
1024Canada2021-02-24
1025Spain2021-01-31
1026Italy2021-02-13
1027Argentina2021-02-05
1028Russia2021-02-21
1029Germany2021-02-02
1030Italy2021-02-20
1031Japan2021-01-30
1032Spain2021-02-18
1033France2021-02-17
1034India2021-01-31
1035Italy2021-02-15
1036Germany2021-02-11
1037United Kingdom2021-02-15
1038Australia2021-01-28
1039Germany2021-01-28
1040France2021-02-13
1041India2021-02-07
1042Canada2021-02-22
1043Brazil2021-02-11
1044India2021-02-01
1045India2021-02-08
1046Canada2021-01-31
1047India2021-01-30
1048Canada2021-01-28
1049Brazil2021-01-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford RimArgentinaElwin Sharvill NEW
Julie StensethFranceElwin Sharvill NEW
Salvatore StockhamUnited KingdomOnyama Limba PROPOSAL
Johnson SergiCanadaAnna Fali QUALIFIED
Ashley DoeItalyElwin Sharvill RENEWAL
Isabel BowleyCanadaIoni Bowcher NEW
Ivar PaprockiIndiaAmy Elsner NEGOTIATION
Munro FerenczUnited KingdomIoni Bowcher NEGOTIATION
Maisha RulapaughFranceOnyama Limba RENEWAL
Ashley DoeUnited KingdomIoni Bowcher QUALIFIED
Mujtaba NickaIndiaIvan Magalhaes PROPOSAL
Ashley DoeJapanOnyama Limba UNQUALIFIED
Wickens NestleUnited KingdomStephen Shaw NEW
Adams MorascaJapanBernardo Dominic RENEWAL
Emily WhobreyGermanyBernardo Dominic RENEWAL
Clifford RimAustraliaXuxue Feng PROPOSAL
Isabel BowleyBrazilOnyama Limba NEGOTIATION
Chavez BriddickRussiaAsiya Javayant UNQUALIFIED
Clifford RimRussiaIoni Bowcher QUALIFIED
Jennifer AmigonGermanyAnna Fali UNQUALIFIED
Alejandro PerinGermanyOnyama Limba QUALIFIED
David DarakjyArgentinaXuxue Feng RENEWAL
Jeanfrancois VenereAustraliaStephen Shaw QUALIFIED
Leja CaldareraArgentinaBernardo Dominic QUALIFIED
Costa DilliardFranceAmy Elsner NEW
Faith GillianFranceAmy Elsner NEW
David DarakjyJapanStephen Shaw QUALIFIED
Aika InouyeCanadaAmy Elsner NEW
Nicolas IturbideArgentinaBernardo Dominic PROPOSAL
Stacey MacleadJapanElwin Sharvill PROPOSAL
Costa DilliardJapanElwin Sharvill RENEWAL
Silvio SlusarskiFranceAmy Elsner PROPOSAL
Leon OldroydFranceIvan Magalhaes NEGOTIATION
Stacey MacleadCanadaOnyama Limba QUALIFIED
Emily WhobreySpainAnna Fali QUALIFIED
Morrow RutaJapanElwin Sharvill QUALIFIED
Mayumi KolmetzItalyIoni Bowcher NEW
Cody SaylorsBrazilIvan Magalhaes UNQUALIFIED
Isabel BowleyUnited KingdomStephen Shaw NEW
Maisha RulapaughItalyElwin Sharvill 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>