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
Greenwood BologniaFranceOnyama Limba QUALIFIED
Cody SaylorsGermanyIvan Magalhaes NEGOTIATION
Greenwood BologniaAustraliaAmy Elsner PROPOSAL
Kadeem FlosiSpainIvan Magalhaes PROPOSAL
Smith GlickIndiaIoni Bowcher NEGOTIATION
Adams MorascaArgentinaXuxue Feng RENEWAL
Tony FollerCanadaElwin Sharvill PROPOSAL
Juan WieserFranceAmy Elsner PROPOSAL
Darci PoquetteItalyAmy Elsner PROPOSAL
Julie StensethFranceAnna Fali NEGOTIATION
Arvin AlbaresIndiaAnna Fali RENEWAL
David DarakjySpainBernardo Dominic RENEWAL
Smith GlickIndiaOnyama Limba RENEWAL
Aditya KuskoSpainAsiya Javayant PROPOSAL
Ivar PaprockiRussiaOnyama Limba PROPOSAL
Costa DilliardFranceXuxue Feng UNQUALIFIED
Claire TollnerCanadaAsiya Javayant UNQUALIFIED
Jeanfrancois VenereArgentinaAsiya Javayant NEGOTIATION
Emily WhobreyBrazilAsiya Javayant NEGOTIATION
David DarakjyCanadaElwin Sharvill NEW
Munro FerenczCanadaAnna Fali QUALIFIED
Antonio CaudyItalyBernardo Dominic NEGOTIATION
Rodrigues CampainUnited KingdomStephen Shaw QUALIFIED
Sinclair WaycottBrazilOnyama Limba PROPOSAL
Misaki RoysterUnited KingdomIoni Bowcher PROPOSAL
Chavez BriddickSpainAnna Fali QUALIFIED
Octavia MaletFranceElwin Sharvill UNQUALIFIED
Maisha RulapaughAustraliaElwin Sharvill NEW
Izzy GarufiRussiaAsiya Javayant NEGOTIATION
Ivar PaprockiItalyAsiya Javayant NEGOTIATION
Jeanfrancois VenereAustraliaIvan Magalhaes NEGOTIATION
Ashley DoeGermanyStephen Shaw RENEWAL
Morrow RutaArgentinaStephen Shaw PROPOSAL
Mayumi KolmetzGermanyAmy Elsner RENEWAL
Stacey MacleadGermanyBernardo Dominic NEGOTIATION
Aruna FigeroaArgentinaAmy Elsner NEGOTIATION
Faith GillianUnited KingdomStephen Shaw NEGOTIATION
Salvatore StockhamRussiaAmy Elsner PROPOSAL
Stacey MacleadUnited KingdomXuxue Feng RENEWAL
Kadeem FlosiJapanAnna Fali RENEWAL
Maisha RulapaughIndiaAmy Elsner PROPOSAL
Jefferson SchemmerSpainXuxue Feng UNQUALIFIED
Cody SaylorsIndiaAnna Fali UNQUALIFIED
Aika InouyeFranceElwin Sharvill UNQUALIFIED
Arvin AlbaresCanadaBernardo Dominic NEGOTIATION
Jefferson SchemmerIndiaStephen Shaw PROPOSAL
Darci PoquetteAustraliaElwin Sharvill NEGOTIATION
Deepesh ChuiGermanyBernardo Dominic QUALIFIED
Murillo MaletIndiaAmy Elsner NEGOTIATION
Munro FerenczUnited KingdomXuxue Feng RENEWAL
Horizontal
NameCountryRepresentativeStatus
Maisha RulapaughUnited KingdomElwin Sharvill NEW
Clifford RimCanadaStephen Shaw NEGOTIATION
Chavez BriddickJapanStephen Shaw UNQUALIFIED
Maisha RulapaughBrazilBernardo Dominic RENEWAL
Stacey MacleadGermanyIvan Magalhaes PROPOSAL
Ashley DoeItalyAmy Elsner NEW
Jones VocelkaGermanyStephen Shaw UNQUALIFIED
Sinclair WaycottUnited KingdomStephen Shaw RENEWAL
Sinclair WaycottRussiaElwin Sharvill QUALIFIED
Izzy GarufiJapanIvan Magalhaes NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickRussia2021-02-12Buckley Miller Wright PROPOSAL34Xuxue Feng
1001Mujtaba NickaGermany2021-02-19Chanay, Jeffrey A Esq NEGOTIATION12Anna Fali
1002Chavez BriddickBrazil2021-02-05Rousseaux, Michael Esq QUALIFIED67Elwin Sharvill
1003Munro FerenczSpain2021-02-12Rousseaux, Michael Esq QUALIFIED68Ioni Bowcher
1004Adams MorascaRussia2021-02-17Rangoni Of Florence UNQUALIFIED84Ioni Bowcher
1005Munro FerenczArgentina2021-02-09Commercial Press PROPOSAL41Onyama Limba
1006Ivar PaprockiItaly2021-02-09King, Christopher A Esq RENEWAL86Xuxue Feng
1007Deepesh ChuiBrazil2021-02-23Commercial Press PROPOSAL81Elwin Sharvill
1008Stacey MacleadBrazil2021-02-17Printing Dimensions PROPOSAL36Amy Elsner
1009Julie StensethRussia2021-02-10King, Christopher A Esq NEW23Bernardo Dominic
1010Mayumi KolmetzRussia2021-02-10Morlong Associates QUALIFIED97Ivan Magalhaes
1011Rodrigues CampainCanada2021-02-17Buckley Miller Wright RENEWAL99Ivan Magalhaes
1012Kaitlin OstroskyAustralia2021-02-12Morlong Associates QUALIFIED18Bernardo Dominic
1013Deepesh ChuiSpain2021-02-23King, Christopher A Esq RENEWAL99Xuxue Feng
1014Antonio CaudyRussia2021-02-04Benton, John B Jr PROPOSAL89Ioni Bowcher
1015Julie StensethCanada2021-02-07Morlong Associates RENEWAL35Xuxue Feng
1016Adams MorascaJapan2021-02-13Chapman, Ross E Esq QUALIFIED56Anna Fali
1017Octavia MaletGermany2021-02-18Chanay, Jeffrey A Esq UNQUALIFIED40Bernardo Dominic
1018Isabel BowleyJapan2021-02-19Chemel, James L Cpa NEW59Ioni Bowcher
1019Jones VocelkaCanada2021-02-16Rousseaux, Michael Esq NEW50Anna Fali
1020Jones VocelkaItaly2021-02-16Dorl, James J Esq RENEWAL23Ivan Magalhaes
1021Greenwood BologniaGermany2021-02-11Feiner Bros NEW71Bernardo Dominic
1022Leja CaldareraSpain2021-02-09Chanay, Jeffrey A Esq PROPOSAL20Amy Elsner
1023Deepesh ChuiBrazil2021-02-05Feltz Printing Service UNQUALIFIED94Bernardo Dominic
1024Jennifer AmigonCanada2021-02-06Feltz Printing Service UNQUALIFIED32Bernardo Dominic
1025Tony FollerIndia2021-01-30Rangoni Of Florence NEGOTIATION12Asiya Javayant
1026Maisha RulapaughArgentina2021-02-13Feiner Bros RENEWAL76Bernardo Dominic
1027Jennifer AmigonArgentina2021-02-07Morlong Associates PROPOSAL23Elwin Sharvill
1028Jefferson SchemmerFrance2021-02-02King, Christopher A Esq QUALIFIED45Xuxue Feng
1029Emily WhobreyFrance2021-02-18Morlong Associates NEW63Anna Fali
1030Nicolas IturbideItaly2021-02-15Rangoni Of Florence RENEWAL51Elwin Sharvill
1031Izzy GarufiUnited Kingdom2021-02-13Chapman, Ross E Esq RENEWAL40Asiya Javayant
1032Emily WhobreyArgentina2021-02-09Chanay, Jeffrey A Esq NEGOTIATION34Bernardo Dominic
1033Stacey MacleadAustralia2021-02-20Rangoni Of Florence NEGOTIATION67Anna Fali
1034Morrow RutaArgentina2021-02-19Dorl, James J Esq NEGOTIATION91Ioni Bowcher
1035Ricardo GauchoArgentina2021-01-30Commercial Press QUALIFIED98Ivan Magalhaes
1036Costa DilliardRussia2021-01-28Buckley Miller Wright UNQUALIFIED33Xuxue Feng
1037Wickens NestleJapan2021-02-24Dorl, James J Esq PROPOSAL98Bernardo Dominic
1038Julie StensethAustralia2021-02-01Chapman, Ross E Esq QUALIFIED38Asiya Javayant
1039Silvio SlusarskiUnited Kingdom2021-02-01King, Christopher A Esq QUALIFIED66Anna Fali
1040Morrow RutaUnited Kingdom2021-02-01Morlong Associates QUALIFIED55Stephen Shaw
1041Aika InouyeJapan2021-02-18Feiner Bros UNQUALIFIED7Anna Fali
1042Costa DilliardSpain2021-02-02Feiner Bros PROPOSAL25Stephen Shaw
1043Johnson SergiRussia2021-01-29Dorl, James J Esq NEGOTIATION16Ioni Bowcher
1044Leon OldroydFrance2021-02-11King, Christopher A Esq NEW26Asiya Javayant
1045Maisha RulapaughBrazil2021-01-28Buckley Miller Wright UNQUALIFIED1Asiya Javayant
1046Stacey MacleadGermany2021-01-31Morlong Associates NEGOTIATION90Anna Fali
1047Morrow RutaCanada2021-01-30King, Christopher A Esq RENEWAL0Elwin Sharvill
1048David DarakjyRussia2021-02-06Benton, John B Jr QUALIFIED61Bernardo Dominic
1049Smith GlickAustralia2021-02-05Rangoni Of Florence PROPOSAL12Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
James ButtJapanStephen Shaw QUALIFIED
Jefferson SchemmerJapanOnyama Limba NEGOTIATION
Mayumi KolmetzAustraliaIvan Magalhaes QUALIFIED
Arvin AlbaresUnited KingdomStephen Shaw NEW
Emily WhobreyItalyXuxue Feng NEW
Alejandro PerinBrazilAnna Fali PROPOSAL
Deepesh ChuiFranceBernardo Dominic NEGOTIATION
Munro FerenczSpainIoni Bowcher RENEWAL
Ivar PaprockiSpainXuxue Feng NEW
Munro FerenczAustraliaIoni Bowcher PROPOSAL
Munro FerenczGermanyIvan Magalhaes PROPOSAL
David DarakjyIndiaIoni Bowcher PROPOSAL
Kadeem FlosiFranceOnyama Limba PROPOSAL
Leon OldroydCanadaAmy Elsner PROPOSAL
Stacey MacleadSpainElwin Sharvill PROPOSAL
Francesco ShinkoBrazilStephen Shaw UNQUALIFIED
Kadeem FlosiGermanyOnyama Limba PROPOSAL
Cody SaylorsSpainBernardo Dominic NEGOTIATION
Kadeem FlosiItalyOnyama Limba PROPOSAL
Ricardo GauchoArgentinaAsiya Javayant RENEWAL
Emily WhobreyJapanOnyama Limba NEW
Maria MarrierAustraliaAnna Fali QUALIFIED
Ashley DoeIndiaOnyama Limba QUALIFIED
Aditya KuskoBrazilStephen Shaw RENEWAL
Jeanfrancois VenereJapanIvan Magalhaes RENEWAL
Isabel BowleyItalyXuxue Feng NEGOTIATION
Jennifer AmigonItalyAsiya Javayant NEGOTIATION
Jones VocelkaFranceOnyama Limba QUALIFIED
Clifford RimItalyStephen Shaw RENEWAL
Silvio SlusarskiUnited KingdomXuxue Feng NEW
Nicolas IturbideRussiaXuxue Feng UNQUALIFIED
Kadeem FlosiBrazilIvan Magalhaes UNQUALIFIED
Nicolas IturbideArgentinaAmy Elsner QUALIFIED
Izzy GarufiRussiaXuxue Feng RENEWAL
Silvio SlusarskiArgentinaAsiya Javayant UNQUALIFIED
Jennifer AmigonAustraliaAnna Fali UNQUALIFIED
Adams MorascaIndiaOnyama Limba NEW
Arvin AlbaresJapanAsiya Javayant NEW
Kaitlin OstroskyJapanAnna Fali NEGOTIATION
Leon OldroydArgentinaAmy Elsner NEGOTIATION
Jones VocelkaIndiaOnyama Limba NEW
Maria MarrierJapanIoni Bowcher NEGOTIATION
Sinclair WaycottCanadaOnyama Limba UNQUALIFIED
Maisha RulapaughUnited KingdomAsiya Javayant PROPOSAL
Francesco ShinkoRussiaAmy Elsner NEW
Kaitlin OstroskyGermanyElwin Sharvill PROPOSAL
Alejandro PerinItalyBernardo Dominic NEGOTIATION
Ivar PaprockiItalyStephen Shaw RENEWAL
Kadeem FlosiRussiaAsiya Javayant UNQUALIFIED
Leon OldroydArgentinaStephen Shaw NEGOTIATION
Frozen Columns
Name
Misaki Royster
Darci Poquette
Claire Tollner
Octavia Malet
Julie Stenseth
David Darakjy
Smith Glick
Octavia Malet
Jefferson Schemmer
Mujtaba Nicka
Nicolas Iturbide
Ivar Paprocki
Jennifer Amigon
Nicolas Iturbide
Costa Dilliard
Jennifer Amigon
Ashley Doe
Cody Saylors
Aika Inouye
Aika Inouye
Ricardo Gaucho
Smith Glick
Jennifer Amigon
Julie Stenseth
Leon Oldroyd
Munro Ferencz
Juan Wieser
Alejandro Perin
Octavia Malet
Antonio Caudy
Tony Foller
Costa Dilliard
Alejandro Perin
Wickens Nestle
Leja Caldarera
Kaitlin Ostrosky
Jones Vocelka
Emily Whobrey
Aruna Figeroa
Stacey Maclead
James Butt
Leon Oldroyd
Aika Inouye
David Darakjy
Jennifer Amigon
Arvin Albares
Jeanfrancois Venere
Jennifer Amigon
Aruna Figeroa
Ricardo Gaucho
IdCountryDate
1000India2021-02-23
1001Canada2021-02-01
1002Japan2021-02-12
1003Canada2021-02-19
1004United Kingdom2021-01-26
1005Japan2021-02-07
1006Brazil2021-02-17
1007Argentina2021-02-20
1008Argentina2021-02-18
1009Brazil2021-02-21
1010Germany2021-02-05
1011Spain2021-01-26
1012United Kingdom2021-02-17
1013Germany2021-01-29
1014Germany2021-02-12
1015Japan2021-02-12
1016Canada2021-02-10
1017Spain2021-02-01
1018Russia2021-02-19
1019Japan2021-02-18
1020Italy2021-02-16
1021India2021-02-23
1022Canada2021-02-16
1023Spain2021-02-19
1024France2021-01-30
1025Canada2021-02-20
1026Argentina2021-02-21
1027France2021-02-04
1028Canada2021-02-24
1029Spain2021-02-03
1030France2021-02-02
1031Japan2021-02-20
1032Brazil2021-02-05
1033United Kingdom2021-02-18
1034Germany2021-02-24
1035Japan2021-02-03
1036Russia2021-02-18
1037Italy2021-02-17
1038Russia2021-02-18
1039India2021-02-10
1040Italy2021-01-31
1041India2021-02-09
1042Germany2021-01-30
1043Australia2021-02-06
1044Canada2021-02-05
1045Russia2021-02-21
1046Spain2021-02-12
1047Japan2021-01-29
1048India2021-01-30
1049Spain2021-02-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainCanadaIvan Magalhaes QUALIFIED
Murillo MaletRussiaElwin Sharvill UNQUALIFIED
Cody SaylorsSpainElwin Sharvill NEGOTIATION
Mujtaba NickaSpainBernardo Dominic PROPOSAL
Rodrigues CampainFranceIoni Bowcher QUALIFIED
Deepesh ChuiArgentinaBernardo Dominic UNQUALIFIED
Mayumi KolmetzCanadaAnna Fali NEGOTIATION
Aditya KuskoItalyOnyama Limba PROPOSAL
Aditya KuskoFranceAsiya Javayant UNQUALIFIED
Silvio SlusarskiGermanyOnyama Limba QUALIFIED
Julie StensethItalyAsiya Javayant RENEWAL
Jennifer AmigonFranceXuxue Feng QUALIFIED
Maria MarrierArgentinaBernardo Dominic NEGOTIATION
Julie StensethJapanIoni Bowcher UNQUALIFIED
Claire TollnerJapanAmy Elsner RENEWAL
Rodrigues CampainCanadaStephen Shaw PROPOSAL
Salvatore StockhamArgentinaXuxue Feng QUALIFIED
Jeanfrancois VenereAustraliaIoni Bowcher RENEWAL
Jefferson SchemmerJapanStephen Shaw NEW
Maisha RulapaughFranceIvan Magalhaes NEW
Juan WieserUnited KingdomBernardo Dominic NEW
Tony FollerBrazilAnna Fali RENEWAL
Morrow RutaUnited KingdomElwin Sharvill UNQUALIFIED
James ButtCanadaOnyama Limba QUALIFIED
Juan WieserUnited KingdomIoni Bowcher QUALIFIED
Clifford RimBrazilIvan Magalhaes UNQUALIFIED
Cody SaylorsSpainIvan Magalhaes NEGOTIATION
Salvatore StockhamIndiaAmy Elsner PROPOSAL
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Arvin AlbaresSpainAnna Fali QUALIFIED
Rodrigues CampainItalyXuxue Feng QUALIFIED
Silvio SlusarskiIndiaBernardo Dominic NEGOTIATION
Jefferson SchemmerUnited KingdomIoni Bowcher PROPOSAL
Smith GlickSpainAsiya Javayant UNQUALIFIED
Kaitlin OstroskyFranceAmy Elsner NEW
Mujtaba NickaJapanOnyama Limba RENEWAL
Clifford RimSpainOnyama Limba NEW
Johnson SergiAustraliaIoni Bowcher NEGOTIATION
Salvatore StockhamIndiaBernardo Dominic PROPOSAL
James ButtGermanyOnyama Limba NEW

<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>