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 BologniaGermanyOnyama Limba PROPOSAL
Clifford RimArgentinaStephen Shaw RENEWAL
Jones VocelkaSpainOnyama Limba NEGOTIATION
Silvio SlusarskiIndiaXuxue Feng PROPOSAL
Aika InouyeIndiaOnyama Limba RENEWAL
Sinclair WaycottRussiaIvan Magalhaes PROPOSAL
Jeanfrancois VenereItalyAmy Elsner RENEWAL
Arvin AlbaresRussiaStephen Shaw NEGOTIATION
Cody SaylorsItalyAnna Fali QUALIFIED
Mayumi KolmetzArgentinaOnyama Limba RENEWAL
Jefferson SchemmerBrazilElwin Sharvill NEGOTIATION
Jeanfrancois VenereArgentinaStephen Shaw QUALIFIED
Mayumi KolmetzItalyAmy Elsner QUALIFIED
Emily WhobreyAustraliaAnna Fali UNQUALIFIED
Wickens NestleFranceXuxue Feng PROPOSAL
Chavez BriddickGermanyAnna Fali RENEWAL
Aditya KuskoUnited KingdomBernardo Dominic UNQUALIFIED
Faith GillianFranceXuxue Feng UNQUALIFIED
Aditya KuskoUnited KingdomAsiya Javayant NEW
Wickens NestleJapanAsiya Javayant QUALIFIED
Maria MarrierFranceOnyama Limba QUALIFIED
Johnson SergiAustraliaAsiya Javayant RENEWAL
Emily WhobreyItalyXuxue Feng QUALIFIED
James ButtGermanyOnyama Limba NEW
Smith GlickCanadaBernardo Dominic QUALIFIED
Mayumi KolmetzBrazilOnyama Limba RENEWAL
Leon OldroydGermanyOnyama Limba QUALIFIED
Misaki RoysterItalyIoni Bowcher PROPOSAL
Adams MorascaItalyElwin Sharvill UNQUALIFIED
Octavia MaletIndiaIvan Magalhaes NEGOTIATION
Jennifer AmigonRussiaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiFranceXuxue Feng UNQUALIFIED
Johnson SergiGermanyIoni Bowcher NEGOTIATION
Cody SaylorsFranceAsiya Javayant PROPOSAL
Adams MorascaItalyIvan Magalhaes RENEWAL
Munro FerenczJapanStephen Shaw UNQUALIFIED
Morrow RutaUnited KingdomAmy Elsner UNQUALIFIED
Deepesh ChuiUnited KingdomElwin Sharvill QUALIFIED
Clifford RimFranceStephen Shaw UNQUALIFIED
Aika InouyeFranceAmy Elsner PROPOSAL
Faith GillianCanadaIvan Magalhaes UNQUALIFIED
Julie StensethIndiaXuxue Feng NEGOTIATION
Aditya KuskoArgentinaElwin Sharvill NEW
Leja CaldareraIndiaAmy Elsner RENEWAL
Mayumi KolmetzBrazilBernardo Dominic PROPOSAL
Stacey MacleadItalyAnna Fali RENEWAL
Francesco ShinkoFranceStephen Shaw NEGOTIATION
Morrow RutaCanadaElwin Sharvill NEGOTIATION
Alejandro PerinRussiaXuxue Feng PROPOSAL
Jeanfrancois VenereJapanAmy Elsner UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Antonio CaudyCanadaStephen Shaw NEGOTIATION
Silvio SlusarskiFranceAnna Fali NEW
Jeanfrancois VenereSpainIoni Bowcher RENEWAL
Kadeem FlosiItalyBernardo Dominic PROPOSAL
Leon OldroydFranceAnna Fali PROPOSAL
Morrow RutaIndiaXuxue Feng NEW
Aruna FigeroaIndiaBernardo Dominic NEW
Mayumi KolmetzArgentinaElwin Sharvill NEW
Tony FollerCanadaStephen Shaw NEW
Johnson SergiArgentinaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Octavia MaletUnited Kingdom2021-02-23Feltz Printing Service UNQUALIFIED13Onyama Limba
1001Claire TollnerItaly2021-01-28Feiner Bros NEW77Onyama Limba
1002Kadeem FlosiArgentina2021-01-29King, Christopher A Esq UNQUALIFIED2Bernardo Dominic
1003Antonio CaudyFrance2021-02-15Rangoni Of Florence RENEWAL12Amy Elsner
1004Kadeem FlosiBrazil2021-02-15Dorl, James J Esq NEW1Onyama Limba
1005Maria MarrierSpain2021-02-08Morlong Associates RENEWAL69Ivan Magalhaes
1006Maria MarrierItaly2021-02-20Buckley Miller Wright NEW98Ioni Bowcher
1007Cody SaylorsAustralia2021-02-08Rousseaux, Michael Esq PROPOSAL76Anna Fali
1008Smith GlickItaly2021-02-12Truhlar And Truhlar Attys RENEWAL94Xuxue Feng
1009Misaki RoysterUnited Kingdom2021-02-18Chapman, Ross E Esq NEGOTIATION21Onyama Limba
1010Faith GillianSpain2021-01-30Rousseaux, Michael Esq QUALIFIED63Ioni Bowcher
1011Smith GlickFrance2021-02-04Buckley Miller Wright PROPOSAL3Bernardo Dominic
1012Costa DilliardUnited Kingdom2021-02-10Benton, John B Jr NEW22Ioni Bowcher
1013Isabel BowleyRussia2021-02-09King, Christopher A Esq UNQUALIFIED85Xuxue Feng
1014Smith GlickItaly2021-02-05Feiner Bros UNQUALIFIED37Asiya Javayant
1015Munro FerenczItaly2021-02-11Chanay, Jeffrey A Esq NEGOTIATION18Asiya Javayant
1016Costa DilliardGermany2021-02-02Rousseaux, Michael Esq RENEWAL24Asiya Javayant
1017Jennifer AmigonGermany2021-02-13Buckley Miller Wright QUALIFIED95Anna Fali
1018Darci PoquetteRussia2021-02-14Truhlar And Truhlar Attys NEW42Amy Elsner
1019Ricardo GauchoBrazil2021-02-20Benton, John B Jr RENEWAL70Xuxue Feng
1020Francesco ShinkoJapan2021-02-05Chemel, James L Cpa NEGOTIATION71Anna Fali
1021Stacey MacleadIndia2021-02-06Chapman, Ross E Esq NEW7Ioni Bowcher
1022Leja CaldareraUnited Kingdom2021-01-31Chemel, James L Cpa QUALIFIED37Onyama Limba
1023Smith GlickCanada2021-02-12Morlong Associates NEW91Bernardo Dominic
1024Octavia MaletAustralia2021-02-06Feiner Bros NEW15Ioni Bowcher
1025Silvio SlusarskiBrazil2021-02-04Printing Dimensions QUALIFIED47Anna Fali
1026Mujtaba NickaAustralia2021-01-25Rousseaux, Michael Esq RENEWAL41Ivan Magalhaes
1027Munro FerenczBrazil2021-02-18King, Christopher A Esq PROPOSAL71Stephen Shaw
1028Chavez BriddickBrazil2021-02-02Dorl, James J Esq UNQUALIFIED95Anna Fali
1029Clifford RimCanada2021-02-16Dorl, James J Esq PROPOSAL44Asiya Javayant
1030Aruna FigeroaArgentina2021-02-05Chapman, Ross E Esq RENEWAL65Ivan Magalhaes
1031Jennifer AmigonJapan2021-02-16Feltz Printing Service NEW38Amy Elsner
1032Aika InouyeGermany2021-01-29Buckley Miller Wright UNQUALIFIED42Amy Elsner
1033Alejandro PerinSpain2021-02-02Dorl, James J Esq NEGOTIATION25Ioni Bowcher
1034Isabel BowleyFrance2021-02-17Feltz Printing Service NEW58Ioni Bowcher
1035Antonio CaudyBrazil2021-02-18King, Christopher A Esq RENEWAL22Amy Elsner
1036Nicolas IturbideSpain2021-02-12Commercial Press NEW84Ioni Bowcher
1037Kadeem FlosiUnited Kingdom2021-02-07Rangoni Of Florence PROPOSAL37Amy Elsner
1038Munro FerenczIndia2021-02-01Chapman, Ross E Esq UNQUALIFIED44Elwin Sharvill
1039Sinclair WaycottCanada2021-02-04Benton, John B Jr RENEWAL96Ioni Bowcher
1040Murillo MaletSpain2021-01-28Feltz Printing Service UNQUALIFIED90Amy Elsner
1041Maria MarrierRussia2021-02-11Benton, John B Jr NEGOTIATION41Elwin Sharvill
1042Wickens NestleGermany2021-02-20Rangoni Of Florence PROPOSAL85Anna Fali
1043Misaki RoysterArgentina2021-02-10Rangoni Of Florence NEGOTIATION71Bernardo Dominic
1044Arvin AlbaresCanada2021-02-13Truhlar And Truhlar Attys NEW7Stephen Shaw
1045Jeanfrancois VenereRussia2021-02-08Commercial Press PROPOSAL10Amy Elsner
1046Morrow RutaUnited Kingdom2021-02-20Chemel, James L Cpa PROPOSAL94Xuxue Feng
1047Jennifer AmigonBrazil2021-02-06Rousseaux, Michael Esq NEGOTIATION53Stephen Shaw
1048Misaki RoysterUnited Kingdom2021-02-03Rangoni Of Florence NEGOTIATION71Stephen Shaw
1049Mujtaba NickaCanada2021-02-10Rangoni Of Florence NEW92Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Darci PoquetteCanadaAsiya Javayant RENEWAL
Murillo MaletCanadaOnyama Limba NEW
Ricardo GauchoJapanXuxue Feng NEGOTIATION
Mujtaba NickaUnited KingdomXuxue Feng RENEWAL
Kaitlin OstroskyUnited KingdomAmy Elsner QUALIFIED
Claire TollnerBrazilAsiya Javayant RENEWAL
Juan WieserFranceIvan Magalhaes QUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant PROPOSAL
Aditya KuskoUnited KingdomAsiya Javayant UNQUALIFIED
Kadeem FlosiArgentinaStephen Shaw QUALIFIED
Arvin AlbaresArgentinaIoni Bowcher RENEWAL
Darci PoquetteRussiaAnna Fali QUALIFIED
Silvio SlusarskiRussiaElwin Sharvill QUALIFIED
Ashley DoeCanadaStephen Shaw NEGOTIATION
Kaitlin OstroskyJapanAmy Elsner UNQUALIFIED
Adams MorascaCanadaIoni Bowcher QUALIFIED
Kadeem FlosiSpainIvan Magalhaes NEGOTIATION
Costa DilliardSpainOnyama Limba QUALIFIED
Jefferson SchemmerGermanyIvan Magalhaes NEGOTIATION
Ricardo GauchoJapanXuxue Feng UNQUALIFIED
Aruna FigeroaBrazilIvan Magalhaes NEW
Salvatore StockhamItalyAnna Fali NEGOTIATION
Faith GillianRussiaBernardo Dominic NEGOTIATION
Smith GlickCanadaOnyama Limba PROPOSAL
Adams MorascaFranceElwin Sharvill NEGOTIATION
Leon OldroydArgentinaAsiya Javayant UNQUALIFIED
Jennifer AmigonSpainElwin Sharvill UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes PROPOSAL
Leon OldroydItalyStephen Shaw UNQUALIFIED
Aditya KuskoIndiaXuxue Feng RENEWAL
Deepesh ChuiRussiaBernardo Dominic NEGOTIATION
Leja CaldareraItalyStephen Shaw UNQUALIFIED
Francesco ShinkoSpainOnyama Limba NEGOTIATION
Darci PoquetteGermanyStephen Shaw RENEWAL
Morrow RutaBrazilXuxue Feng QUALIFIED
Antonio CaudyFranceAmy Elsner PROPOSAL
Antonio CaudyCanadaIvan Magalhaes PROPOSAL
Smith GlickIndiaStephen Shaw PROPOSAL
Octavia MaletArgentinaXuxue Feng RENEWAL
Faith GillianJapanAsiya Javayant UNQUALIFIED
Octavia MaletGermanyAnna Fali QUALIFIED
Stacey MacleadFranceAnna Fali NEW
Silvio SlusarskiItalyStephen Shaw PROPOSAL
Juan WieserRussiaAsiya Javayant NEGOTIATION
Leja CaldareraFranceBernardo Dominic RENEWAL
Jones VocelkaAustraliaBernardo Dominic PROPOSAL
Stacey MacleadCanadaIoni Bowcher NEW
Silvio SlusarskiJapanStephen Shaw NEGOTIATION
Stacey MacleadBrazilOnyama Limba PROPOSAL
Claire TollnerBrazilAsiya Javayant QUALIFIED
Frozen Columns
Name
Johnson Sergi
Murillo Malet
Misaki Royster
Cody Saylors
Jones Vocelka
Aika Inouye
Julie Stenseth
Alejandro Perin
Wickens Nestle
Clifford Rim
Aika Inouye
Chavez Briddick
Maisha Rulapaugh
Rodrigues Campain
Juan Wieser
Aditya Kusko
Maisha Rulapaugh
Greenwood Bolognia
Antonio Caudy
Sinclair Waycott
Francesco Shinko
Murillo Malet
Faith Gillian
Claire Tollner
Octavia Malet
Misaki Royster
Kaitlin Ostrosky
Aditya Kusko
Morrow Ruta
Isabel Bowley
Mujtaba Nicka
Jennifer Amigon
Johnson Sergi
Izzy Garufi
Ricardo Gaucho
Francesco Shinko
Johnson Sergi
Morrow Ruta
Claire Tollner
Jones Vocelka
Rodrigues Campain
Jones Vocelka
Mayumi Kolmetz
Alejandro Perin
Kaitlin Ostrosky
Maisha Rulapaugh
Rodrigues Campain
Misaki Royster
Costa Dilliard
Silvio Slusarski
IdCountryDate
1000Russia2021-02-22
1001Canada2021-02-04
1002Australia2021-01-30
1003United Kingdom2021-02-23
1004France2021-02-16
1005Argentina2021-02-18
1006India2021-02-16
1007Australia2021-02-13
1008Japan2021-02-02
1009Australia2021-02-17
1010Spain2021-02-18
1011France2021-02-14
1012Brazil2021-02-05
1013Germany2021-01-27
1014United Kingdom2021-01-28
1015Argentina2021-02-23
1016Japan2021-02-22
1017Australia2021-02-13
1018Russia2021-02-20
1019Canada2021-01-28
1020India2021-02-08
1021Germany2021-02-11
1022Spain2021-02-09
1023Australia2021-01-28
1024United Kingdom2021-02-22
1025Spain2021-02-19
1026United Kingdom2021-01-30
1027France2021-02-13
1028Spain2021-02-07
1029Australia2021-02-13
1030Argentina2021-02-01
1031United Kingdom2021-02-14
1032Germany2021-02-11
1033Argentina2021-01-31
1034Japan2021-01-28
1035Russia2021-02-14
1036Canada2021-01-30
1037United Kingdom2021-02-21
1038Argentina2021-01-29
1039Italy2021-02-20
1040Germany2021-02-13
1041Russia2021-02-14
1042Japan2021-02-20
1043Australia2021-02-05
1044Russia2021-02-04
1045Argentina2021-02-15
1046Argentina2021-01-31
1047Brazil2021-02-13
1048Canada2021-02-17
1049Argentina2021-02-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyRussiaIoni Bowcher QUALIFIED
Jennifer AmigonIndiaAsiya Javayant PROPOSAL
Maisha RulapaughAustraliaBernardo Dominic PROPOSAL
Chavez BriddickSpainXuxue Feng UNQUALIFIED
Octavia MaletAustraliaStephen Shaw RENEWAL
Francesco ShinkoItalyXuxue Feng RENEWAL
Kadeem FlosiRussiaAsiya Javayant PROPOSAL
Arvin AlbaresIndiaAmy Elsner NEGOTIATION
Sinclair WaycottIndiaAsiya Javayant RENEWAL
Jefferson SchemmerAustraliaAnna Fali PROPOSAL
Darci PoquetteAustraliaAsiya Javayant QUALIFIED
Ashley DoeSpainBernardo Dominic UNQUALIFIED
Ricardo GauchoSpainXuxue Feng PROPOSAL
Mayumi KolmetzUnited KingdomIvan Magalhaes RENEWAL
Francesco ShinkoFranceBernardo Dominic UNQUALIFIED
Cody SaylorsJapanIoni Bowcher UNQUALIFIED
Ashley DoeCanadaIoni Bowcher UNQUALIFIED
Rodrigues CampainGermanyIoni Bowcher UNQUALIFIED
Jones VocelkaArgentinaXuxue Feng UNQUALIFIED
Deepesh ChuiJapanBernardo Dominic NEW
Wickens NestleItalyAnna Fali UNQUALIFIED
Leja CaldareraGermanyIoni Bowcher NEW
Izzy GarufiItalyOnyama Limba NEW
Ricardo GauchoJapanBernardo Dominic NEGOTIATION
Maisha RulapaughAustraliaIoni Bowcher PROPOSAL
Emily WhobreyUnited KingdomIoni Bowcher RENEWAL
Emily WhobreyIndiaAnna Fali RENEWAL
Mujtaba NickaAustraliaOnyama Limba RENEWAL
Jeanfrancois VenereRussiaStephen Shaw NEGOTIATION
Jones VocelkaItalyElwin Sharvill PROPOSAL
Izzy GarufiSpainOnyama Limba UNQUALIFIED
Arvin AlbaresSpainIvan Magalhaes NEGOTIATION
Stacey MacleadFranceElwin Sharvill NEW
Leon OldroydAustraliaAsiya Javayant NEW
Jones VocelkaFranceStephen Shaw QUALIFIED
Faith GillianSpainBernardo Dominic PROPOSAL
Ivar PaprockiUnited KingdomOnyama Limba NEGOTIATION
Mujtaba NickaBrazilAsiya Javayant PROPOSAL
Kaitlin OstroskyBrazilIoni Bowcher NEGOTIATION
Kadeem FlosiFranceIvan Magalhaes 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>