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
Arvin AlbaresFranceIvan Magalhaes NEW
Deepesh ChuiFranceElwin Sharvill UNQUALIFIED
Jeanfrancois VenereJapanIoni Bowcher QUALIFIED
Wickens NestleUnited KingdomIvan Magalhaes NEW
Munro FerenczGermanyStephen Shaw PROPOSAL
Emily WhobreyCanadaOnyama Limba QUALIFIED
James ButtFranceStephen Shaw QUALIFIED
Cody SaylorsCanadaIvan Magalhaes QUALIFIED
Ricardo GauchoSpainElwin Sharvill NEW
Smith GlickUnited KingdomStephen Shaw NEW
Kadeem FlosiFranceAsiya Javayant UNQUALIFIED
Octavia MaletRussiaBernardo Dominic QUALIFIED
Alejandro PerinCanadaAsiya Javayant QUALIFIED
Nicolas IturbideRussiaXuxue Feng NEW
Ashley DoeItalyStephen Shaw PROPOSAL
Smith GlickSpainIoni Bowcher QUALIFIED
Ricardo GauchoItalyXuxue Feng QUALIFIED
David DarakjyBrazilXuxue Feng PROPOSAL
Ivar PaprockiBrazilIvan Magalhaes RENEWAL
Leon OldroydArgentinaBernardo Dominic NEGOTIATION
Jennifer AmigonUnited KingdomAmy Elsner PROPOSAL
Mayumi KolmetzUnited KingdomAmy Elsner QUALIFIED
Kaitlin OstroskyFranceElwin Sharvill NEGOTIATION
Murillo MaletArgentinaBernardo Dominic QUALIFIED
Tony FollerItalyOnyama Limba RENEWAL
James ButtIndiaStephen Shaw UNQUALIFIED
Mujtaba NickaArgentinaIvan Magalhaes QUALIFIED
Adams MorascaFranceAmy Elsner RENEWAL
Maria MarrierGermanyAnna Fali QUALIFIED
Misaki RoysterSpainAsiya Javayant PROPOSAL
Tony FollerRussiaAsiya Javayant UNQUALIFIED
Leon OldroydUnited KingdomIvan Magalhaes RENEWAL
Isabel BowleyUnited KingdomOnyama Limba RENEWAL
Alejandro PerinRussiaIvan Magalhaes RENEWAL
Jeanfrancois VenereAustraliaElwin Sharvill QUALIFIED
Salvatore StockhamJapanOnyama Limba QUALIFIED
Misaki RoysterUnited KingdomStephen Shaw PROPOSAL
Leon OldroydBrazilIvan Magalhaes UNQUALIFIED
Izzy GarufiBrazilBernardo Dominic PROPOSAL
Leja CaldareraRussiaAmy Elsner PROPOSAL
Ashley DoeIndiaAsiya Javayant UNQUALIFIED
Faith GillianCanadaStephen Shaw PROPOSAL
Deepesh ChuiArgentinaOnyama Limba NEGOTIATION
Arvin AlbaresJapanStephen Shaw PROPOSAL
Murillo MaletArgentinaAnna Fali NEW
Faith GillianFranceAnna Fali NEGOTIATION
Tony FollerAustraliaAmy Elsner RENEWAL
Aruna FigeroaArgentinaIvan Magalhaes PROPOSAL
Murillo MaletJapanIvan Magalhaes PROPOSAL
Mujtaba NickaItalyStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiSpainElwin Sharvill UNQUALIFIED
Murillo MaletItalyOnyama Limba RENEWAL
Stacey MacleadAustraliaAsiya Javayant UNQUALIFIED
Jeanfrancois VenereAustraliaIvan Magalhaes PROPOSAL
Ashley DoeFranceOnyama Limba PROPOSAL
Mayumi KolmetzRussiaAsiya Javayant PROPOSAL
Faith GillianAustraliaBernardo Dominic NEGOTIATION
Mujtaba NickaRussiaBernardo Dominic UNQUALIFIED
Emily WhobreySpainAsiya Javayant NEGOTIATION
Salvatore StockhamArgentinaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottIndia2021-02-09Commercial Press UNQUALIFIED1Anna Fali
1001Mujtaba NickaGermany2021-02-20Rousseaux, Michael Esq PROPOSAL83Amy Elsner
1002Misaki RoysterIndia2021-02-24Chemel, James L Cpa PROPOSAL2Bernardo Dominic
1003Salvatore StockhamItaly2021-02-20Chemel, James L Cpa QUALIFIED36Onyama Limba
1004Smith GlickSpain2021-02-24Chapman, Ross E Esq UNQUALIFIED54Bernardo Dominic
1005Jones VocelkaRussia2021-02-01Chemel, James L Cpa UNQUALIFIED63Stephen Shaw
1006Tony FollerUnited Kingdom2021-02-05King, Christopher A Esq RENEWAL50Asiya Javayant
1007Isabel BowleyRussia2021-02-26Rangoni Of Florence UNQUALIFIED81Amy Elsner
1008Munro FerenczFrance2021-02-18Rousseaux, Michael Esq QUALIFIED41Stephen Shaw
1009Arvin AlbaresUnited Kingdom2021-02-11Chanay, Jeffrey A Esq NEW33Ivan Magalhaes
1010Costa DilliardItaly2021-02-16Truhlar And Truhlar Attys PROPOSAL10Elwin Sharvill
1011James ButtBrazil2021-02-04Commercial Press UNQUALIFIED8Asiya Javayant
1012James ButtItaly2021-02-19Feltz Printing Service UNQUALIFIED81Amy Elsner
1013James ButtSpain2021-02-22Morlong Associates NEW94Anna Fali
1014Stacey MacleadCanada2021-02-28Rousseaux, Michael Esq NEGOTIATION95Ivan Magalhaes
1015Maria MarrierBrazil2021-02-19Benton, John B Jr UNQUALIFIED28Anna Fali
1016Munro FerenczFrance2021-02-26Dorl, James J Esq RENEWAL10Elwin Sharvill
1017Ricardo GauchoRussia2021-02-03Feltz Printing Service QUALIFIED70Ivan Magalhaes
1018Deepesh ChuiAustralia2021-02-12Rangoni Of Florence PROPOSAL25Ivan Magalhaes
1019Clifford RimUnited Kingdom2021-02-02Rangoni Of Florence QUALIFIED72Ioni Bowcher
1020Aruna FigeroaRussia2021-01-30Printing Dimensions NEW98Ivan Magalhaes
1021Rodrigues CampainBrazil2021-02-18Commercial Press QUALIFIED88Asiya Javayant
1022Izzy GarufiBrazil2021-02-17Chapman, Ross E Esq PROPOSAL36Amy Elsner
1023Silvio SlusarskiArgentina2021-02-11Feltz Printing Service RENEWAL86Asiya Javayant
1024James ButtArgentina2021-02-14Dorl, James J Esq NEGOTIATION33Onyama Limba
1025Francesco ShinkoBrazil2021-02-28Feltz Printing Service NEGOTIATION9Stephen Shaw
1026Ricardo GauchoUnited Kingdom2021-02-08Chanay, Jeffrey A Esq RENEWAL2Asiya Javayant
1027Kaitlin OstroskyFrance2021-01-30Feiner Bros RENEWAL55Bernardo Dominic
1028Sinclair WaycottCanada2021-02-19Printing Dimensions RENEWAL96Anna Fali
1029Aika InouyeCanada2021-02-15Printing Dimensions NEW46Stephen Shaw
1030Francesco ShinkoGermany2021-01-30Morlong Associates QUALIFIED92Bernardo Dominic
1031Clifford RimArgentina2021-02-22Commercial Press NEW81Elwin Sharvill
1032Ricardo GauchoGermany2021-02-22Printing Dimensions NEW34Stephen Shaw
1033Rodrigues CampainGermany2021-02-04Chapman, Ross E Esq UNQUALIFIED93Xuxue Feng
1034David DarakjyRussia2021-02-12Feiner Bros NEW29Stephen Shaw
1035Costa DilliardSpain2021-02-05Truhlar And Truhlar Attys NEW83Stephen Shaw
1036Tony FollerUnited Kingdom2021-02-23Rousseaux, Michael Esq RENEWAL46Onyama Limba
1037Maria MarrierCanada2021-02-21Printing Dimensions NEGOTIATION77Anna Fali
1038Isabel BowleySpain2021-02-25King, Christopher A Esq QUALIFIED43Anna Fali
1039Darci PoquetteItaly2021-02-24Chanay, Jeffrey A Esq RENEWAL66Xuxue Feng
1040Maisha RulapaughUnited Kingdom2021-02-27Dorl, James J Esq RENEWAL98Anna Fali
1041Antonio CaudyUnited Kingdom2021-02-17Truhlar And Truhlar Attys QUALIFIED25Anna Fali
1042Ricardo GauchoCanada2021-02-12King, Christopher A Esq RENEWAL82Ivan Magalhaes
1043Cody SaylorsUnited Kingdom2021-02-08King, Christopher A Esq NEGOTIATION83Ioni Bowcher
1044Maria MarrierBrazil2021-02-11Rangoni Of Florence PROPOSAL89Stephen Shaw
1045Costa DilliardCanada2021-01-30Truhlar And Truhlar Attys UNQUALIFIED87Amy Elsner
1046Wickens NestleArgentina2021-02-19Chemel, James L Cpa UNQUALIFIED37Bernardo Dominic
1047Chavez BriddickItaly2021-02-26Dorl, James J Esq NEW56Xuxue Feng
1048Greenwood BologniaCanada2021-02-10Rangoni Of Florence NEGOTIATION8Amy Elsner
1049Misaki RoysterItaly2021-02-24Printing Dimensions QUALIFIED74Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Nicolas IturbideGermanyIoni Bowcher NEW
Morrow RutaUnited KingdomElwin Sharvill RENEWAL
Juan WieserRussiaXuxue Feng UNQUALIFIED
Claire TollnerUnited KingdomStephen Shaw QUALIFIED
Darci PoquetteGermanyBernardo Dominic UNQUALIFIED
Kadeem FlosiRussiaIvan Magalhaes PROPOSAL
Greenwood BologniaIndiaIoni Bowcher NEW
Morrow RutaSpainIoni Bowcher QUALIFIED
Clifford RimFranceStephen Shaw UNQUALIFIED
Emily WhobreyBrazilAnna Fali PROPOSAL
David DarakjyGermanyIvan Magalhaes NEW
Francesco ShinkoUnited KingdomIoni Bowcher RENEWAL
James ButtFranceAnna Fali RENEWAL
Deepesh ChuiAustraliaStephen Shaw NEW
Nicolas IturbideJapanIoni Bowcher RENEWAL
Ivar PaprockiBrazilAmy Elsner QUALIFIED
Mujtaba NickaSpainIoni Bowcher RENEWAL
Costa DilliardAustraliaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiArgentinaElwin Sharvill UNQUALIFIED
Nicolas IturbideJapanStephen Shaw PROPOSAL
Cody SaylorsUnited KingdomAsiya Javayant PROPOSAL
Salvatore StockhamItalyIvan Magalhaes NEW
Silvio SlusarskiItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinFranceAnna Fali NEW
Adams MorascaArgentinaIoni Bowcher PROPOSAL
Francesco ShinkoGermanyAnna Fali PROPOSAL
Johnson SergiAustraliaAmy Elsner RENEWAL
Maisha RulapaughSpainXuxue Feng RENEWAL
Ivar PaprockiArgentinaXuxue Feng NEGOTIATION
Emily WhobreyCanadaElwin Sharvill UNQUALIFIED
Maisha RulapaughCanadaIvan Magalhaes RENEWAL
Stacey MacleadIndiaAmy Elsner NEGOTIATION
Mayumi KolmetzSpainXuxue Feng PROPOSAL
Faith GillianGermanyStephen Shaw NEW
Leja CaldareraUnited KingdomXuxue Feng NEGOTIATION
Adams MorascaGermanyAmy Elsner QUALIFIED
Ivar PaprockiBrazilIvan Magalhaes RENEWAL
Jefferson SchemmerItalyIvan Magalhaes NEW
Rodrigues CampainAustraliaIoni Bowcher PROPOSAL
Greenwood BologniaGermanyAmy Elsner PROPOSAL
Morrow RutaArgentinaAsiya Javayant NEW
Isabel BowleyBrazilXuxue Feng PROPOSAL
Claire TollnerCanadaBernardo Dominic PROPOSAL
Arvin AlbaresItalyOnyama Limba PROPOSAL
Darci PoquetteUnited KingdomAsiya Javayant QUALIFIED
Morrow RutaCanadaOnyama Limba NEW
Ricardo GauchoUnited KingdomIvan Magalhaes UNQUALIFIED
Rodrigues CampainArgentinaStephen Shaw QUALIFIED
Juan WieserFranceAnna Fali PROPOSAL
Costa DilliardRussiaStephen Shaw UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Costa Dilliard
Juan Wieser
Jones Vocelka
Greenwood Bolognia
David Darakjy
Smith Glick
Deepesh Chui
Aditya Kusko
Clifford Rim
Isabel Bowley
Chavez Briddick
Ashley Doe
Francesco Shinko
Isabel Bowley
Chavez Briddick
David Darakjy
Rodrigues Campain
Adams Morasca
Johnson Sergi
Misaki Royster
Kaitlin Ostrosky
Leon Oldroyd
James Butt
Jeanfrancois Venere
Aruna Figeroa
Isabel Bowley
Wickens Nestle
Isabel Bowley
Murillo Malet
Maria Marrier
Emily Whobrey
Aika Inouye
Salvatore Stockham
Arvin Albares
Jefferson Schemmer
Juan Wieser
Sinclair Waycott
Aika Inouye
Faith Gillian
Maria Marrier
Francesco Shinko
Chavez Briddick
Tony Foller
Aruna Figeroa
Smith Glick
Arvin Albares
Izzy Garufi
Chavez Briddick
Smith Glick
IdCountryDate
1000Brazil2021-02-26
1001Canada2021-02-18
1002Canada2021-02-07
1003Spain2021-02-11
1004Argentina2021-02-02
1005Argentina2021-02-13
1006Germany2021-02-08
1007Germany2021-02-21
1008Japan2021-02-20
1009Spain2021-02-01
1010Japan2021-02-08
1011Japan2021-02-13
1012France2021-02-05
1013Australia2021-02-19
1014France2021-02-02
1015United Kingdom2021-02-01
1016United Kingdom2021-02-01
1017France2021-02-17
1018Italy2021-02-15
1019Argentina2021-02-03
1020Spain2021-02-01
1021India2021-02-08
1022Canada2021-02-28
1023Argentina2021-02-25
1024Canada2021-02-19
1025India2021-02-10
1026Brazil2021-02-21
1027Brazil2021-02-10
1028Australia2021-02-07
1029Japan2021-02-05
1030Argentina2021-02-04
1031Japan2021-01-31
1032Argentina2021-02-09
1033France2021-02-05
1034Spain2021-02-06
1035Canada2021-02-01
1036Japan2021-02-21
1037Spain2021-02-27
1038Japan2021-02-01
1039United Kingdom2021-02-09
1040United Kingdom2021-02-01
1041Russia2021-02-06
1042Germany2021-02-03
1043Spain2021-02-07
1044Canada2021-02-22
1045United Kingdom2021-02-19
1046Australia2021-02-01
1047United Kingdom2021-02-15
1048Japan2021-02-21
1049Italy2021-01-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerItalyBernardo Dominic QUALIFIED
Salvatore StockhamGermanyAmy Elsner UNQUALIFIED
Johnson SergiArgentinaIvan Magalhaes PROPOSAL
James ButtUnited KingdomAmy Elsner NEGOTIATION
Rodrigues CampainRussiaAmy Elsner NEGOTIATION
Francesco ShinkoArgentinaAmy Elsner QUALIFIED
Salvatore StockhamJapanIoni Bowcher NEGOTIATION
Ivar PaprockiGermanyBernardo Dominic RENEWAL
Mujtaba NickaArgentinaAnna Fali RENEWAL
Leja CaldareraIndiaAnna Fali NEGOTIATION
Salvatore StockhamCanadaStephen Shaw PROPOSAL
Aruna FigeroaAustraliaAmy Elsner UNQUALIFIED
Ivar PaprockiIndiaAmy Elsner UNQUALIFIED
Claire TollnerGermanyStephen Shaw QUALIFIED
Stacey MacleadUnited KingdomElwin Sharvill NEGOTIATION
Claire TollnerRussiaXuxue Feng PROPOSAL
Nicolas IturbideGermanyOnyama Limba PROPOSAL
Alejandro PerinRussiaBernardo Dominic PROPOSAL
Cody SaylorsJapanIvan Magalhaes RENEWAL
Adams MorascaRussiaElwin Sharvill RENEWAL
Juan WieserCanadaAmy Elsner UNQUALIFIED
Julie StensethItalyIoni Bowcher RENEWAL
David DarakjyItalyAnna Fali QUALIFIED
Deepesh ChuiCanadaStephen Shaw RENEWAL
Ivar PaprockiIndiaBernardo Dominic QUALIFIED
Munro FerenczGermanyStephen Shaw NEW
Johnson SergiUnited KingdomElwin Sharvill UNQUALIFIED
Morrow RutaAustraliaIvan Magalhaes UNQUALIFIED
Claire TollnerBrazilXuxue Feng UNQUALIFIED
Deepesh ChuiCanadaElwin Sharvill NEW
Arvin AlbaresGermanyAsiya Javayant RENEWAL
Kadeem FlosiArgentinaElwin Sharvill PROPOSAL
Juan WieserRussiaAmy Elsner PROPOSAL
Aditya KuskoRussiaOnyama Limba QUALIFIED
Morrow RutaAustraliaAmy Elsner PROPOSAL
Emily WhobreyUnited KingdomAmy Elsner PROPOSAL
Chavez BriddickCanadaStephen Shaw RENEWAL
Emily WhobreyFranceIvan Magalhaes NEGOTIATION
James ButtBrazilAmy Elsner PROPOSAL
Kadeem FlosiRussiaStephen Shaw 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>