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
Silvio SlusarskiSpainAnna Fali NEW
Isabel BowleyRussiaAnna Fali PROPOSAL
Kadeem FlosiSpainStephen Shaw UNQUALIFIED
Greenwood BologniaGermanyStephen Shaw QUALIFIED
Murillo MaletSpainOnyama Limba NEW
Wickens NestleAustraliaXuxue Feng QUALIFIED
Leja CaldareraAustraliaAmy Elsner NEW
Clifford RimArgentinaAsiya Javayant NEW
Aruna FigeroaUnited KingdomXuxue Feng UNQUALIFIED
Clifford RimArgentinaBernardo Dominic UNQUALIFIED
Clifford RimRussiaIoni Bowcher NEGOTIATION
Arvin AlbaresJapanAsiya Javayant QUALIFIED
Kadeem FlosiGermanyBernardo Dominic UNQUALIFIED
Murillo MaletItalyStephen Shaw QUALIFIED
Deepesh ChuiUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinUnited KingdomIoni Bowcher UNQUALIFIED
David DarakjyItalyOnyama Limba PROPOSAL
Nicolas IturbideIndiaBernardo Dominic NEW
James ButtGermanyAsiya Javayant NEW
Deepesh ChuiSpainAnna Fali RENEWAL
Cody SaylorsArgentinaIoni Bowcher RENEWAL
Costa DilliardFranceOnyama Limba UNQUALIFIED
Octavia MaletCanadaAmy Elsner RENEWAL
Johnson SergiFranceIvan Magalhaes NEW
Sinclair WaycottSpainBernardo Dominic RENEWAL
Nicolas IturbideItalyAnna Fali NEW
Smith GlickFranceBernardo Dominic UNQUALIFIED
Stacey MacleadGermanyStephen Shaw NEW
Sinclair WaycottAustraliaAsiya Javayant UNQUALIFIED
Alejandro PerinRussiaAsiya Javayant NEW
Leon OldroydJapanIoni Bowcher RENEWAL
Deepesh ChuiGermanyBernardo Dominic RENEWAL
Jeanfrancois VenereCanadaAsiya Javayant QUALIFIED
Smith GlickBrazilStephen Shaw RENEWAL
Chavez BriddickGermanyAsiya Javayant NEGOTIATION
Isabel BowleyJapanIoni Bowcher PROPOSAL
Jones VocelkaItalyStephen Shaw UNQUALIFIED
Kadeem FlosiJapanElwin Sharvill QUALIFIED
Deepesh ChuiRussiaAsiya Javayant PROPOSAL
Jennifer AmigonSpainAsiya Javayant PROPOSAL
Salvatore StockhamCanadaAsiya Javayant NEGOTIATION
Octavia MaletArgentinaIoni Bowcher NEGOTIATION
Tony FollerIndiaIvan Magalhaes RENEWAL
Jennifer AmigonArgentinaIvan Magalhaes PROPOSAL
Jones VocelkaItalyIoni Bowcher NEGOTIATION
Isabel BowleyArgentinaAnna Fali NEW
Antonio CaudyFranceXuxue Feng NEGOTIATION
Octavia MaletRussiaBernardo Dominic PROPOSAL
Arvin AlbaresSpainElwin Sharvill NEW
Wickens NestleBrazilAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Clifford RimJapanOnyama Limba PROPOSAL
Aruna FigeroaSpainXuxue Feng UNQUALIFIED
Jefferson SchemmerRussiaIoni Bowcher QUALIFIED
Salvatore StockhamItalyAsiya Javayant QUALIFIED
Octavia MaletSpainElwin Sharvill RENEWAL
Ricardo GauchoAustraliaXuxue Feng NEW
Juan WieserItalyAnna Fali PROPOSAL
Leja CaldareraJapanElwin Sharvill UNQUALIFIED
Salvatore StockhamUnited KingdomOnyama Limba RENEWAL
Claire TollnerGermanyAmy Elsner UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickBrazil2021-02-16Printing Dimensions PROPOSAL27Stephen Shaw
1001Salvatore StockhamArgentina2021-02-01Chemel, James L Cpa NEGOTIATION88Bernardo Dominic
1002Maisha RulapaughGermany2021-01-29Chanay, Jeffrey A Esq QUALIFIED46Ivan Magalhaes
1003Juan WieserBrazil2021-02-20Morlong Associates NEW80Asiya Javayant
1004Tony FollerCanada2021-02-10Morlong Associates NEGOTIATION89Elwin Sharvill
1005Mujtaba NickaCanada2021-02-18Benton, John B Jr QUALIFIED15Ioni Bowcher
1006Costa DilliardSpain2021-02-19Benton, John B Jr QUALIFIED75Bernardo Dominic
1007Sinclair WaycottAustralia2021-02-13Dorl, James J Esq QUALIFIED8Xuxue Feng
1008Darci PoquetteJapan2021-02-07Dorl, James J Esq PROPOSAL71Anna Fali
1009Ricardo GauchoArgentina2021-02-02Morlong Associates NEW38Elwin Sharvill
1010Aika InouyeGermany2021-02-23Chanay, Jeffrey A Esq RENEWAL87Xuxue Feng
1011Mujtaba NickaIndia2021-02-19Morlong Associates UNQUALIFIED1Bernardo Dominic
1012Morrow RutaFrance2021-02-21Buckley Miller Wright QUALIFIED10Elwin Sharvill
1013Ivar PaprockiGermany2021-02-15Truhlar And Truhlar Attys NEGOTIATION2Xuxue Feng
1014Faith GillianItaly2021-01-31Chemel, James L Cpa QUALIFIED48Bernardo Dominic
1015Jennifer AmigonAustralia2021-02-05Buckley Miller Wright RENEWAL10Bernardo Dominic
1016Leja CaldareraCanada2021-01-27Rousseaux, Michael Esq NEGOTIATION92Ivan Magalhaes
1017Kaitlin OstroskyGermany2021-02-17King, Christopher A Esq UNQUALIFIED43Onyama Limba
1018Costa DilliardFrance2021-02-16Commercial Press PROPOSAL58Amy Elsner
1019Deepesh ChuiIndia2021-02-05Chapman, Ross E Esq UNQUALIFIED80Elwin Sharvill
1020Chavez BriddickGermany2021-01-30Rousseaux, Michael Esq PROPOSAL25Elwin Sharvill
1021Izzy GarufiItaly2021-02-21Chapman, Ross E Esq QUALIFIED22Elwin Sharvill
1022David DarakjyArgentina2021-02-06Chemel, James L Cpa RENEWAL8Onyama Limba
1023Leja CaldareraUnited Kingdom2021-02-02Rangoni Of Florence PROPOSAL31Xuxue Feng
1024Nicolas IturbideBrazil2021-02-20Chapman, Ross E Esq QUALIFIED36Stephen Shaw
1025Jones VocelkaArgentina2021-01-29Printing Dimensions QUALIFIED51Anna Fali
1026James ButtGermany2021-01-30Feltz Printing Service UNQUALIFIED94Anna Fali
1027Costa DilliardRussia2021-02-19Truhlar And Truhlar Attys QUALIFIED75Elwin Sharvill
1028Ivar PaprockiCanada2021-02-05Morlong Associates NEGOTIATION98Stephen Shaw
1029Isabel BowleyRussia2021-02-15Truhlar And Truhlar Attys PROPOSAL12Onyama Limba
1030Julie StensethIndia2021-02-17Truhlar And Truhlar Attys NEW78Stephen Shaw
1031Maisha RulapaughAustralia2021-02-20Truhlar And Truhlar Attys NEGOTIATION17Amy Elsner
1032James ButtSpain2021-02-09Commercial Press UNQUALIFIED96Ivan Magalhaes
1033Aditya KuskoUnited Kingdom2021-02-02Buckley Miller Wright PROPOSAL51Elwin Sharvill
1034Ashley DoeSpain2021-02-22Truhlar And Truhlar Attys UNQUALIFIED16Bernardo Dominic
1035Maria MarrierArgentina2021-02-03Feltz Printing Service PROPOSAL85Elwin Sharvill
1036Munro FerenczRussia2021-02-22Printing Dimensions NEW52Xuxue Feng
1037Chavez BriddickRussia2021-02-19Buckley Miller Wright QUALIFIED87Onyama Limba
1038Isabel BowleySpain2021-02-09Feltz Printing Service UNQUALIFIED33Ivan Magalhaes
1039Aruna FigeroaItaly2021-01-29Dorl, James J Esq NEGOTIATION37Bernardo Dominic
1040Johnson SergiUnited Kingdom2021-02-15Dorl, James J Esq NEGOTIATION17Amy Elsner
1041Juan WieserBrazil2021-02-06King, Christopher A Esq PROPOSAL49Asiya Javayant
1042Isabel BowleyIndia2021-02-14Chemel, James L Cpa NEGOTIATION21Xuxue Feng
1043Leja CaldareraJapan2021-02-22Commercial Press NEGOTIATION15Amy Elsner
1044Costa DilliardAustralia2021-02-19Chapman, Ross E Esq RENEWAL11Bernardo Dominic
1045Alejandro PerinBrazil2021-02-19Truhlar And Truhlar Attys QUALIFIED23Elwin Sharvill
1046Silvio SlusarskiIndia2021-02-14Rousseaux, Michael Esq UNQUALIFIED26Ivan Magalhaes
1047Deepesh ChuiUnited Kingdom2021-02-03Printing Dimensions QUALIFIED1Amy Elsner
1048Sinclair WaycottJapan2021-02-21Chanay, Jeffrey A Esq NEW97Ioni Bowcher
1049Ashley DoeUnited Kingdom2021-02-24Truhlar And Truhlar Attys PROPOSAL62Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickUnited KingdomXuxue Feng UNQUALIFIED
Sinclair WaycottCanadaAmy Elsner QUALIFIED
Johnson SergiItalyStephen Shaw NEGOTIATION
Smith GlickGermanyBernardo Dominic RENEWAL
Greenwood BologniaGermanyAsiya Javayant QUALIFIED
Rodrigues CampainSpainElwin Sharvill QUALIFIED
Aruna FigeroaJapanAmy Elsner NEGOTIATION
Ivar PaprockiRussiaIvan Magalhaes NEW
Aika InouyeGermanyAmy Elsner RENEWAL
Jeanfrancois VenereArgentinaStephen Shaw UNQUALIFIED
Jones VocelkaBrazilAmy Elsner PROPOSAL
Leon OldroydSpainAmy Elsner NEGOTIATION
Cody SaylorsAustraliaIoni Bowcher QUALIFIED
Aika InouyeAustraliaIvan Magalhaes NEGOTIATION
Smith GlickCanadaIvan Magalhaes QUALIFIED
Jefferson SchemmerArgentinaBernardo Dominic QUALIFIED
Julie StensethItalyIvan Magalhaes NEGOTIATION
Rodrigues CampainItalyXuxue Feng NEGOTIATION
Nicolas IturbideArgentinaIvan Magalhaes UNQUALIFIED
Francesco ShinkoCanadaAnna Fali NEW
Tony FollerIndiaAsiya Javayant PROPOSAL
Nicolas IturbideFranceElwin Sharvill RENEWAL
Johnson SergiBrazilAmy Elsner NEW
Silvio SlusarskiJapanStephen Shaw RENEWAL
Morrow RutaCanadaXuxue Feng QUALIFIED
Munro FerenczItalyAmy Elsner UNQUALIFIED
Claire TollnerIndiaIvan Magalhaes UNQUALIFIED
Adams MorascaArgentinaIoni Bowcher NEW
Ivar PaprockiSpainBernardo Dominic RENEWAL
Arvin AlbaresAustraliaXuxue Feng UNQUALIFIED
Jones VocelkaIndiaIoni Bowcher NEW
Nicolas IturbideAustraliaStephen Shaw PROPOSAL
James ButtSpainXuxue Feng RENEWAL
David DarakjyAustraliaBernardo Dominic PROPOSAL
Cody SaylorsUnited KingdomAsiya Javayant UNQUALIFIED
Claire TollnerFranceOnyama Limba RENEWAL
Aika InouyeIndiaAsiya Javayant NEGOTIATION
Nicolas IturbideUnited KingdomAsiya Javayant UNQUALIFIED
Wickens NestleRussiaStephen Shaw PROPOSAL
Sinclair WaycottGermanyAnna Fali UNQUALIFIED
Munro FerenczCanadaIvan Magalhaes RENEWAL
Julie StensethAustraliaIvan Magalhaes NEW
Murillo MaletUnited KingdomOnyama Limba RENEWAL
Maria MarrierFranceAsiya Javayant QUALIFIED
Chavez BriddickAustraliaAnna Fali RENEWAL
Costa DilliardRussiaIoni Bowcher UNQUALIFIED
Silvio SlusarskiBrazilXuxue Feng NEW
Darci PoquetteAustraliaStephen Shaw NEGOTIATION
James ButtAustraliaBernardo Dominic RENEWAL
Mujtaba NickaSpainXuxue Feng RENEWAL
Frozen Columns
Name
Alejandro Perin
Francesco Shinko
David Darakjy
Salvatore Stockham
Maisha Rulapaugh
Costa Dilliard
Maria Marrier
Isabel Bowley
Izzy Garufi
Misaki Royster
Julie Stenseth
Jeanfrancois Venere
Kaitlin Ostrosky
Aika Inouye
Silvio Slusarski
Munro Ferencz
Costa Dilliard
Munro Ferencz
Munro Ferencz
Jefferson Schemmer
Cody Saylors
Ashley Doe
Wickens Nestle
Costa Dilliard
Mayumi Kolmetz
Leon Oldroyd
Maisha Rulapaugh
Leon Oldroyd
Maria Marrier
Smith Glick
Kadeem Flosi
Tony Foller
Rodrigues Campain
Julie Stenseth
Maisha Rulapaugh
Arvin Albares
Sinclair Waycott
Mujtaba Nicka
Greenwood Bolognia
Julie Stenseth
Smith Glick
Leon Oldroyd
Rodrigues Campain
Stacey Maclead
Leon Oldroyd
Jefferson Schemmer
Munro Ferencz
Tony Foller
Juan Wieser
Munro Ferencz
IdCountryDate
1000Italy2021-01-31
1001India2021-02-09
1002United Kingdom2021-02-17
1003United Kingdom2021-02-04
1004Australia2021-02-19
1005Germany2021-02-18
1006Italy2021-02-24
1007Australia2021-02-03
1008Canada2021-02-24
1009Germany2021-01-30
1010India2021-02-17
1011Spain2021-01-31
1012France2021-02-04
1013Japan2021-01-27
1014France2021-02-09
1015India2021-01-27
1016United Kingdom2021-02-20
1017Canada2021-02-01
1018Australia2021-02-06
1019France2021-02-07
1020Australia2021-02-15
1021Japan2021-01-28
1022Argentina2021-02-01
1023Italy2021-02-02
1024Japan2021-02-05
1025Spain2021-02-08
1026Spain2021-02-11
1027Germany2021-02-14
1028Australia2021-02-12
1029France2021-02-16
1030India2021-02-08
1031Argentina2021-02-05
1032Spain2021-01-28
1033Argentina2021-02-16
1034India2021-02-04
1035France2021-02-16
1036Italy2021-02-02
1037Australia2021-01-31
1038Argentina2021-02-01
1039Russia2021-02-25
1040United Kingdom2021-02-20
1041Argentina2021-02-05
1042Canada2021-02-08
1043Japan2021-01-29
1044Brazil2021-02-08
1045Japan2021-02-02
1046France2021-02-11
1047Russia2021-01-29
1048Japan2021-02-21
1049Japan2021-02-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoUnited KingdomOnyama Limba PROPOSAL
Ashley DoeGermanyOnyama Limba NEW
Salvatore StockhamIndiaAsiya Javayant NEGOTIATION
Munro FerenczIndiaOnyama Limba UNQUALIFIED
Francesco ShinkoSpainStephen Shaw PROPOSAL
Sinclair WaycottArgentinaElwin Sharvill NEW
Silvio SlusarskiRussiaIoni Bowcher RENEWAL
Jeanfrancois VenereSpainElwin Sharvill QUALIFIED
Tony FollerSpainIvan Magalhaes NEW
Izzy GarufiGermanyStephen Shaw RENEWAL
Darci PoquetteAustraliaXuxue Feng UNQUALIFIED
Maisha RulapaughIndiaIvan Magalhaes NEGOTIATION
Alejandro PerinUnited KingdomElwin Sharvill NEW
Faith GillianCanadaXuxue Feng PROPOSAL
Kaitlin OstroskyFranceElwin Sharvill NEGOTIATION
Ashley DoeBrazilAsiya Javayant PROPOSAL
Arvin AlbaresIndiaIvan Magalhaes NEGOTIATION
Octavia MaletArgentinaIvan Magalhaes RENEWAL
Isabel BowleyAustraliaIvan Magalhaes PROPOSAL
Nicolas IturbideItalyAmy Elsner NEW
Maria MarrierJapanAsiya Javayant QUALIFIED
Jefferson SchemmerJapanXuxue Feng PROPOSAL
Ricardo GauchoFranceXuxue Feng QUALIFIED
Arvin AlbaresCanadaOnyama Limba UNQUALIFIED
Cody SaylorsBrazilAsiya Javayant UNQUALIFIED
Izzy GarufiGermanyElwin Sharvill RENEWAL
Stacey MacleadBrazilIvan Magalhaes PROPOSAL
Jeanfrancois VenereUnited KingdomStephen Shaw QUALIFIED
Jefferson SchemmerSpainStephen Shaw NEGOTIATION
Francesco ShinkoAustraliaAsiya Javayant RENEWAL
Tony FollerGermanyElwin Sharvill UNQUALIFIED
Kadeem FlosiIndiaXuxue Feng RENEWAL
Mayumi KolmetzRussiaOnyama Limba UNQUALIFIED
Juan WieserUnited KingdomAmy Elsner QUALIFIED
Julie StensethJapanBernardo Dominic RENEWAL
Darci PoquetteFranceOnyama Limba UNQUALIFIED
Emily WhobreyIndiaIoni Bowcher PROPOSAL
Leja CaldareraCanadaElwin Sharvill RENEWAL
Rodrigues CampainCanadaBernardo Dominic QUALIFIED
Antonio CaudyAustraliaBernardo Dominic 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>