Locale

Language
English
English
English
French
German
German
German
Italian
Korean
Spanish
Catalan
Dutch
Portuguese
Portuguese
Arabic
Arabic
Bulgarian
Bangla
Bosnian
Czech
Greek
Estonian
Persian
Finnish
Danish
Hindi
Indonesian
Icelandic
Croatian
Japanese
Hungarian
Hebrew
Georgian
Central Kurdish
Khmer
Kyrgyz
Kazakh
Lithuanian
Latvian
Malay
Norwegian
Polish
Romanian
Russian
Slovak
Slovenian
Serbian
Serbian
Swedish
Thai
Turkish
Ukrainian
Uzbek
Vietnamese
Chinese
Chinese

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

DataTable Scroll

Both vertical and horizontal scrolling of the data is supported with optional frozen rows-columns and on-demand loading features.

Vertical
NameCountryRepresentativeStatus
Cody SaylorsUnited KingdomBernardo Dominic PROPOSAL
Costa DilliardCanadaIvan Magalhaes QUALIFIED
Arvin AlbaresIndiaIoni Bowcher RENEWAL
Johnson SergiAustraliaIvan Magalhaes QUALIFIED
Chavez BriddickCanadaIvan Magalhaes NEW
Kadeem FlosiFranceIvan Magalhaes RENEWAL
Ivar PaprockiFranceIoni Bowcher UNQUALIFIED
David DarakjyFranceIoni Bowcher RENEWAL
Mayumi KolmetzUnited KingdomIoni Bowcher NEW
Isabel BowleyAustraliaElwin Sharvill RENEWAL
Darci PoquetteFranceAsiya Javayant NEGOTIATION
Juan WieserArgentinaElwin Sharvill UNQUALIFIED
Arvin AlbaresCanadaAsiya Javayant NEW
Alejandro PerinCanadaIoni Bowcher NEW
Greenwood BologniaFranceElwin Sharvill RENEWAL
Julie StensethGermanyElwin Sharvill NEW
Mayumi KolmetzCanadaIoni Bowcher NEGOTIATION
Chavez BriddickRussiaStephen Shaw NEW
Adams MorascaUnited KingdomBernardo Dominic RENEWAL
Claire TollnerFranceIvan Magalhaes QUALIFIED
Jones VocelkaFranceXuxue Feng NEW
Izzy GarufiFranceAnna Fali UNQUALIFIED
Ashley DoeCanadaElwin Sharvill RENEWAL
Mujtaba NickaUnited KingdomOnyama Limba QUALIFIED
Maria MarrierAustraliaAmy Elsner NEW
Jennifer AmigonArgentinaXuxue Feng PROPOSAL
Maria MarrierFranceXuxue Feng NEW
Maria MarrierUnited KingdomBernardo Dominic UNQUALIFIED
Costa DilliardUnited KingdomAmy Elsner RENEWAL
Arvin AlbaresAustraliaXuxue Feng RENEWAL
Jefferson SchemmerArgentinaStephen Shaw UNQUALIFIED
Arvin AlbaresCanadaXuxue Feng UNQUALIFIED
Aika InouyeArgentinaIvan Magalhaes QUALIFIED
Greenwood BologniaJapanStephen Shaw NEW
Sinclair WaycottSpainBernardo Dominic NEGOTIATION
Stacey MacleadIndiaAsiya Javayant RENEWAL
Faith GillianBrazilElwin Sharvill NEGOTIATION
Morrow RutaSpainXuxue Feng PROPOSAL
Jones VocelkaAustraliaBernardo Dominic RENEWAL
Ashley DoeUnited KingdomAsiya Javayant PROPOSAL
Aruna FigeroaUnited KingdomIvan Magalhaes UNQUALIFIED
Leon OldroydBrazilElwin Sharvill QUALIFIED
Mujtaba NickaRussiaAmy Elsner NEW
Murillo MaletArgentinaOnyama Limba UNQUALIFIED
Greenwood BologniaUnited KingdomStephen Shaw PROPOSAL
Tony FollerArgentinaAnna Fali PROPOSAL
Jennifer AmigonItalyStephen Shaw PROPOSAL
Juan WieserJapanElwin Sharvill QUALIFIED
Alejandro PerinCanadaIoni Bowcher NEGOTIATION
Maria MarrierCanadaStephen Shaw NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Costa DilliardGermanyAmy Elsner RENEWAL
Nicolas IturbideFranceXuxue Feng NEGOTIATION
Deepesh ChuiRussiaIoni Bowcher RENEWAL
Tony FollerCanadaIoni Bowcher PROPOSAL
Maisha RulapaughItalyBernardo Dominic UNQUALIFIED
Aruna FigeroaRussiaStephen Shaw QUALIFIED
Francesco ShinkoJapanElwin Sharvill QUALIFIED
Maria MarrierRussiaXuxue Feng RENEWAL
Salvatore StockhamRussiaAsiya Javayant UNQUALIFIED
Adams MorascaItalyIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Wickens NestleGermany2025-09-18Chanay, Jeffrey A Esq PROPOSAL61Bernardo Dominic
1001Maisha RulapaughAustralia2025-09-02King, Christopher A Esq NEGOTIATION3Amy Elsner
1002Antonio CaudyBrazil2025-09-04Chapman, Ross E Esq QUALIFIED44Onyama Limba
1003Ricardo GauchoAustralia2025-09-29Chapman, Ross E Esq QUALIFIED30Onyama Limba
1004Jefferson SchemmerFrance2025-09-28Morlong Associates RENEWAL41Anna Fali
1005Munro FerenczFrance2025-10-01Printing Dimensions RENEWAL44Xuxue Feng
1006Jones VocelkaIndia2025-09-06Rousseaux, Michael Esq PROPOSAL78Stephen Shaw
1007Mujtaba NickaJapan2025-09-11Feltz Printing Service PROPOSAL99Amy Elsner
1008Isabel BowleyUnited Kingdom2025-09-23Rangoni Of Florence NEW75Elwin Sharvill
1009Munro FerenczIndia2025-09-03Chemel, James L Cpa QUALIFIED38Elwin Sharvill
1010Wickens NestleArgentina2025-09-08Printing Dimensions NEGOTIATION5Anna Fali
1011Juan WieserItaly2025-09-18Feiner Bros PROPOSAL86Bernardo Dominic
1012Jefferson SchemmerItaly2025-09-10Chanay, Jeffrey A Esq RENEWAL28Anna Fali
1013Deepesh ChuiArgentina2025-09-25Morlong Associates UNQUALIFIED67Ivan Magalhaes
1014Johnson SergiSpain2025-09-11Buckley Miller Wright QUALIFIED62Xuxue Feng
1015Leja CaldareraArgentina2025-09-19Feiner Bros QUALIFIED78Amy Elsner
1016Isabel BowleyRussia2025-10-01Morlong Associates UNQUALIFIED58Anna Fali
1017Chavez BriddickArgentina2025-09-08Chanay, Jeffrey A Esq RENEWAL34Ivan Magalhaes
1018Aika InouyeIndia2025-09-15Truhlar And Truhlar Attys QUALIFIED33Ioni Bowcher
1019Aika InouyeItaly2025-09-10Chapman, Ross E Esq RENEWAL47Stephen Shaw
1020Ivar PaprockiJapan2025-09-08Rangoni Of Florence QUALIFIED76Onyama Limba
1021Salvatore StockhamFrance2025-09-30Buckley Miller Wright UNQUALIFIED2Xuxue Feng
1022Salvatore StockhamAustralia2025-09-24Feltz Printing Service NEW36Bernardo Dominic
1023Smith GlickBrazil2025-09-28Morlong Associates NEW49Amy Elsner
1024Silvio SlusarskiIndia2025-09-16Benton, John B Jr UNQUALIFIED48Amy Elsner
1025Antonio CaudyItaly2025-09-26Buckley Miller Wright NEW10Bernardo Dominic
1026Chavez BriddickJapan2025-09-08Truhlar And Truhlar Attys QUALIFIED39Amy Elsner
1027Maisha RulapaughCanada2025-09-09Rangoni Of Florence UNQUALIFIED88Amy Elsner
1028Silvio SlusarskiIndia2025-09-10Feiner Bros NEW16Asiya Javayant
1029Jones VocelkaItaly2025-09-08Chemel, James L Cpa UNQUALIFIED53Amy Elsner
1030Francesco ShinkoSpain2025-09-08Rousseaux, Michael Esq NEW37Ioni Bowcher
1031Ashley DoeJapan2025-09-14Feltz Printing Service PROPOSAL38Elwin Sharvill
1032Faith GillianJapan2025-09-23Chemel, James L Cpa NEGOTIATION19Ioni Bowcher
1033Morrow RutaIndia2025-09-04King, Christopher A Esq NEW87Asiya Javayant
1034Kaitlin OstroskyItaly2025-09-26Truhlar And Truhlar Attys QUALIFIED93Asiya Javayant
1035Aruna FigeroaJapan2025-09-07Feltz Printing Service PROPOSAL66Amy Elsner
1036Alejandro PerinCanada2025-10-01Rousseaux, Michael Esq QUALIFIED14Xuxue Feng
1037Chavez BriddickAustralia2025-09-16Buckley Miller Wright PROPOSAL92Ivan Magalhaes
1038Faith GillianJapan2025-09-17Chemel, James L Cpa QUALIFIED7Amy Elsner
1039Leon OldroydFrance2025-09-05Benton, John B Jr NEGOTIATION47Elwin Sharvill
1040Smith GlickJapan2025-09-25Printing Dimensions QUALIFIED18Bernardo Dominic
1041Arvin AlbaresItaly2025-09-20Chemel, James L Cpa UNQUALIFIED17Anna Fali
1042Clifford RimGermany2025-09-17Printing Dimensions PROPOSAL65Stephen Shaw
1043Chavez BriddickJapan2025-09-14Commercial Press NEGOTIATION0Elwin Sharvill
1044Antonio CaudyItaly2025-09-20Printing Dimensions QUALIFIED49Elwin Sharvill
1045Sinclair WaycottJapan2025-09-03Chemel, James L Cpa QUALIFIED36Ivan Magalhaes
1046Johnson SergiArgentina2025-09-12Rousseaux, Michael Esq PROPOSAL34Ivan Magalhaes
1047Claire TollnerSpain2025-09-15Rangoni Of Florence NEW81Ioni Bowcher
1048Ricardo GauchoFrance2025-09-06Morlong Associates RENEWAL66Bernardo Dominic
1049Julie StensethGermany2025-09-29Chapman, Ross E Esq RENEWAL74Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeJapanBernardo Dominic QUALIFIED
Francesco ShinkoCanadaAnna Fali NEW
Aruna FigeroaUnited KingdomBernardo Dominic NEW
Maisha RulapaughBrazilBernardo Dominic PROPOSAL
Faith GillianFranceElwin Sharvill QUALIFIED
Jennifer AmigonBrazilIvan Magalhaes RENEWAL
Aditya KuskoIndiaElwin Sharvill NEGOTIATION
Jeanfrancois VenereAustraliaOnyama Limba UNQUALIFIED
Alejandro PerinCanadaAsiya Javayant UNQUALIFIED
Leja CaldareraBrazilIoni Bowcher PROPOSAL
Tony FollerUnited KingdomAnna Fali QUALIFIED
Ivar PaprockiUnited KingdomOnyama Limba UNQUALIFIED
Sinclair WaycottAustraliaStephen Shaw PROPOSAL
Aruna FigeroaUnited KingdomIvan Magalhaes RENEWAL
Isabel BowleyCanadaIvan Magalhaes NEW
Ivar PaprockiItalyAnna Fali NEW
Johnson SergiBrazilAmy Elsner PROPOSAL
Mayumi KolmetzAustraliaAnna Fali QUALIFIED
Leon OldroydAustraliaBernardo Dominic UNQUALIFIED
Misaki RoysterJapanXuxue Feng PROPOSAL
Sinclair WaycottFranceAnna Fali NEW
Costa DilliardRussiaStephen Shaw UNQUALIFIED
Morrow RutaIndiaIoni Bowcher QUALIFIED
Chavez BriddickBrazilOnyama Limba NEGOTIATION
Ashley DoeJapanAnna Fali PROPOSAL
James ButtBrazilXuxue Feng RENEWAL
Rodrigues CampainUnited KingdomStephen Shaw UNQUALIFIED
Ricardo GauchoCanadaIoni Bowcher UNQUALIFIED
Smith GlickRussiaIoni Bowcher PROPOSAL
Clifford RimIndiaXuxue Feng PROPOSAL
Wickens NestleGermanyOnyama Limba NEGOTIATION
Aruna FigeroaCanadaBernardo Dominic NEGOTIATION
Aditya KuskoSpainAsiya Javayant RENEWAL
James ButtIndiaBernardo Dominic RENEWAL
Rodrigues CampainArgentinaXuxue Feng NEW
Salvatore StockhamBrazilAmy Elsner NEGOTIATION
Wickens NestleArgentinaOnyama Limba UNQUALIFIED
Octavia MaletAustraliaElwin Sharvill PROPOSAL
Faith GillianAustraliaAnna Fali PROPOSAL
Faith GillianAustraliaOnyama Limba NEGOTIATION
Faith GillianAustraliaStephen Shaw NEW
Wickens NestleAustraliaBernardo Dominic PROPOSAL
Mujtaba NickaItalyAmy Elsner RENEWAL
David DarakjyRussiaIvan Magalhaes NEW
Alejandro PerinGermanyOnyama Limba UNQUALIFIED
Maisha RulapaughCanadaXuxue Feng PROPOSAL
Clifford RimArgentinaAmy Elsner RENEWAL
James ButtGermanyElwin Sharvill QUALIFIED
Ivar PaprockiArgentinaIvan Magalhaes QUALIFIED
Ivar PaprockiGermanyStephen Shaw PROPOSAL
Frozen Columns
Name
Ashley Doe
Ivar Paprocki
James Butt
Johnson Sergi
Cody Saylors
Kaitlin Ostrosky
Misaki Royster
Smith Glick
Greenwood Bolognia
Antonio Caudy
Aditya Kusko
David Darakjy
Salvatore Stockham
Ivar Paprocki
Maria Marrier
Aruna Figeroa
Nicolas Iturbide
Maisha Rulapaugh
Claire Tollner
Jefferson Schemmer
Aruna Figeroa
Ivar Paprocki
Johnson Sergi
Greenwood Bolognia
Alejandro Perin
Adams Morasca
Alejandro Perin
Aruna Figeroa
Cody Saylors
Greenwood Bolognia
Clifford Rim
Arvin Albares
Juan Wieser
Nicolas Iturbide
Salvatore Stockham
Jennifer Amigon
Isabel Bowley
Nicolas Iturbide
Murillo Malet
Mujtaba Nicka
Ivar Paprocki
Jeanfrancois Venere
Smith Glick
Smith Glick
Juan Wieser
Isabel Bowley
Isabel Bowley
Deepesh Chui
Ashley Doe
Arvin Albares
IdCountryDate
1000Japan2025-09-06
1001Brazil2025-09-08
1002Japan2025-09-17
1003India2025-09-15
1004India2025-09-10
1005France2025-09-14
1006Argentina2025-09-11
1007Spain2025-09-20
1008Spain2025-09-05
1009Germany2025-09-26
1010India2025-09-24
1011Germany2025-09-11
1012Germany2025-09-12
1013Australia2025-09-08
1014Japan2025-09-03
1015India2025-09-21
1016France2025-09-15
1017Argentina2025-09-26
1018Japan2025-09-10
1019Italy2025-09-27
1020Germany2025-09-18
1021Argentina2025-09-20
1022United Kingdom2025-09-17
1023Spain2025-09-27
1024Brazil2025-09-05
1025Argentina2025-09-29
1026United Kingdom2025-09-05
1027Italy2025-09-12
1028United Kingdom2025-09-23
1029India2025-09-17
1030Germany2025-09-08
1031France2025-09-23
1032Canada2025-09-03
1033Russia2025-09-18
1034Spain2025-09-07
1035Japan2025-09-19
1036India2025-09-09
1037Australia2025-09-22
1038India2025-09-04
1039United Kingdom2025-09-07
1040Spain2025-09-21
1041Japan2025-09-02
1042Japan2025-09-27
1043Italy2025-09-13
1044Argentina2025-09-20
1045Spain2025-09-24
1046India2025-09-21
1047Germany2025-09-28
1048Canada2025-09-14
1049France2025-09-20

On-Demand Data

NameIdCountryDate
Kadeem Flosi1000France2025-09-05
Misaki Royster1001France2025-09-20
James Butt1002Argentina2025-09-05
Adams Morasca1003Russia2025-10-01
Adams Morasca1004India2025-09-02
Juan Wieser1005Canada2025-09-27
Jefferson Schemmer1006France2025-09-03
David Darakjy1007India2025-09-29
Leon Oldroyd1008India2025-09-14
Morrow Ruta1009United Kingdom2025-09-26
Claire Tollner1010Argentina2025-09-07
Mujtaba Nicka1011Canada2025-09-21
Tony Foller1012India2025-09-18
David Darakjy1013France2025-09-27
Chavez Briddick1014Germany2025-09-25
Adams Morasca1015Brazil2025-09-21
Cody Saylors1016Canada2025-10-01
Adams Morasca1017Russia2025-09-30
Ricardo Gaucho1018Spain2025-09-19
Cody Saylors1019Brazil2025-09-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Wickens NestleAustraliaStephen Shaw NEW
Kaitlin OstroskyCanadaElwin Sharvill NEGOTIATION
Octavia MaletFranceStephen Shaw NEGOTIATION
Johnson SergiBrazilIoni Bowcher NEGOTIATION
Jones VocelkaAustraliaAsiya Javayant QUALIFIED
Arvin AlbaresSpainOnyama Limba RENEWAL
Ricardo GauchoUnited KingdomAmy Elsner PROPOSAL
Ashley DoeJapanIvan Magalhaes NEW
Munro FerenczRussiaAmy Elsner QUALIFIED
Julie StensethCanadaElwin Sharvill NEGOTIATION
Rodrigues CampainCanadaOnyama Limba NEW
Maisha RulapaughJapanBernardo Dominic NEGOTIATION
Salvatore StockhamUnited KingdomAnna Fali NEW
Octavia MaletBrazilIoni Bowcher RENEWAL
Kadeem FlosiCanadaIvan Magalhaes NEW
Cody SaylorsRussiaAsiya Javayant PROPOSAL
Cody SaylorsJapanAsiya Javayant NEW
Leon OldroydRussiaIvan Magalhaes QUALIFIED
Arvin AlbaresItalyXuxue Feng UNQUALIFIED
Aruna FigeroaRussiaAsiya Javayant UNQUALIFIED
Salvatore StockhamSpainElwin Sharvill QUALIFIED
Kaitlin OstroskyItalyStephen Shaw PROPOSAL
Stacey MacleadUnited KingdomIvan Magalhaes PROPOSAL
Wickens NestleItalyXuxue Feng UNQUALIFIED
Ricardo GauchoFranceStephen Shaw UNQUALIFIED
Silvio SlusarskiGermanyIoni Bowcher NEGOTIATION
Emily WhobreyAustraliaOnyama Limba NEGOTIATION
Tony FollerAustraliaAmy Elsner QUALIFIED
James ButtUnited KingdomStephen Shaw PROPOSAL
Aika InouyeGermanyElwin Sharvill RENEWAL
Aruna FigeroaBrazilIvan Magalhaes NEW
Antonio CaudyGermanyOnyama Limba UNQUALIFIED
Greenwood BologniaIndiaIoni Bowcher NEW
Wickens NestleItalyOnyama Limba UNQUALIFIED
Adams MorascaBrazilXuxue Feng PROPOSAL
Claire TollnerGermanyIoni Bowcher QUALIFIED
Jefferson SchemmerSpainAnna Fali PROPOSAL
Octavia MaletUnited KingdomOnyama Limba PROPOSAL
Munro FerenczBrazilXuxue Feng NEW
Wickens NestleJapanAmy Elsner PROPOSAL

<style>
    .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.statusName}">#{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.statusName}">#{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.statusName}">#{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.statusName}">#{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">
        <h3>On-Demand Data</h3>
        <p:dataTable var="customer" value="#{dtScrollView.customers6}" scrollRows="20" scrollable="true" liveScroll="true" scrollHeight="150">
            <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.statusName}">#{customer.status}</span>
            </p:column>
        </p:dataTable>
    </div>

</h:form>