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
Tony FollerRussiaElwin Sharvill PROPOSAL
Ivar PaprockiIndiaAmy Elsner QUALIFIED
Alejandro PerinRussiaAmy Elsner NEW
Nicolas IturbideUnited KingdomAsiya Javayant QUALIFIED
Stacey MacleadJapanStephen Shaw NEW
Izzy GarufiSpainAnna Fali RENEWAL
Munro FerenczArgentinaBernardo Dominic NEGOTIATION
Nicolas IturbideFranceIoni Bowcher PROPOSAL
Mayumi KolmetzJapanXuxue Feng PROPOSAL
Aruna FigeroaJapanAnna Fali NEW
Ricardo GauchoJapanOnyama Limba NEGOTIATION
Wickens NestleIndiaAsiya Javayant PROPOSAL
Maisha RulapaughRussiaStephen Shaw PROPOSAL
Ricardo GauchoSpainIoni Bowcher NEW
Leon OldroydArgentinaIoni Bowcher PROPOSAL
Aika InouyeArgentinaIoni Bowcher RENEWAL
Izzy GarufiRussiaAnna Fali NEW
Antonio CaudyBrazilOnyama Limba NEGOTIATION
Francesco ShinkoGermanyXuxue Feng UNQUALIFIED
Murillo MaletCanadaAnna Fali QUALIFIED
Ricardo GauchoRussiaOnyama Limba PROPOSAL
Faith GillianAustraliaOnyama Limba UNQUALIFIED
David DarakjyCanadaXuxue Feng PROPOSAL
Arvin AlbaresIndiaAsiya Javayant NEW
Misaki RoysterRussiaIvan Magalhaes NEW
Ashley DoeArgentinaIvan Magalhaes RENEWAL
Claire TollnerItalyBernardo Dominic UNQUALIFIED
Johnson SergiIndiaIoni Bowcher NEW
Julie StensethRussiaXuxue Feng NEW
Adams MorascaItalyBernardo Dominic RENEWAL
James ButtSpainStephen Shaw UNQUALIFIED
Leon OldroydFranceElwin Sharvill QUALIFIED
Adams MorascaRussiaStephen Shaw UNQUALIFIED
Rodrigues CampainAustraliaElwin Sharvill NEW
Tony FollerCanadaIvan Magalhaes UNQUALIFIED
Ricardo GauchoArgentinaAmy Elsner RENEWAL
Jones VocelkaFranceOnyama Limba NEGOTIATION
Kaitlin OstroskyRussiaOnyama Limba PROPOSAL
Octavia MaletArgentinaIvan Magalhaes NEW
Aruna FigeroaCanadaIoni Bowcher PROPOSAL
Ricardo GauchoItalyIvan Magalhaes NEGOTIATION
Morrow RutaJapanElwin Sharvill NEGOTIATION
Murillo MaletIndiaAmy Elsner NEW
Nicolas IturbideRussiaIvan Magalhaes PROPOSAL
Isabel BowleyBrazilAmy Elsner NEW
Juan WieserArgentinaElwin Sharvill NEW
Clifford RimUnited KingdomIoni Bowcher NEW
Tony FollerItalyBernardo Dominic PROPOSAL
Alejandro PerinIndiaElwin Sharvill NEGOTIATION
Claire TollnerGermanyStephen Shaw PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Leja CaldareraItalyElwin Sharvill RENEWAL
Isabel BowleyGermanyAsiya Javayant NEW
Johnson SergiGermanyXuxue Feng RENEWAL
Ashley DoeRussiaAnna Fali NEW
Mayumi KolmetzBrazilXuxue Feng PROPOSAL
Sinclair WaycottIndiaAsiya Javayant NEW
Leja CaldareraGermanyOnyama Limba UNQUALIFIED
Salvatore StockhamJapanStephen Shaw NEW
Faith GillianJapanIoni Bowcher PROPOSAL
Silvio SlusarskiJapanStephen Shaw PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoGermany2026-05-29Chemel, James L Cpa QUALIFIED31Bernardo Dominic
1001Ashley DoeArgentina2026-05-23Chapman, Ross E Esq UNQUALIFIED31Elwin Sharvill
1002David DarakjyCanada2026-05-12King, Christopher A Esq UNQUALIFIED72Anna Fali
1003Jennifer AmigonArgentina2026-06-08Chanay, Jeffrey A Esq UNQUALIFIED76Anna Fali
1004Octavia MaletSpain2026-05-22Feltz Printing Service NEW98Asiya Javayant
1005Leon OldroydAustralia2026-06-03Truhlar And Truhlar Attys UNQUALIFIED87Asiya Javayant
1006Stacey MacleadItaly2026-06-05Dorl, James J Esq NEW64Xuxue Feng
1007Sinclair WaycottUnited Kingdom2026-06-05Dorl, James J Esq PROPOSAL0Asiya Javayant
1008Alejandro PerinIndia2026-05-24Printing Dimensions QUALIFIED46Amy Elsner
1009Mujtaba NickaIndia2026-05-31Feiner Bros NEGOTIATION3Amy Elsner
1010Darci PoquetteCanada2026-05-15Rousseaux, Michael Esq RENEWAL0Amy Elsner
1011Stacey MacleadArgentina2026-06-02Rangoni Of Florence UNQUALIFIED8Bernardo Dominic
1012Johnson SergiJapan2026-05-23Printing Dimensions NEGOTIATION51Anna Fali
1013Ashley DoeItaly2026-05-12Feiner Bros RENEWAL33Asiya Javayant
1014Nicolas IturbideArgentina2026-06-01Buckley Miller Wright RENEWAL13Ivan Magalhaes
1015Adams MorascaIndia2026-05-13Chapman, Ross E Esq UNQUALIFIED75Onyama Limba
1016Silvio SlusarskiGermany2026-05-22Commercial Press UNQUALIFIED17Xuxue Feng
1017Isabel BowleyIndia2026-06-06Feiner Bros NEW40Stephen Shaw
1018Faith GillianBrazil2026-05-23Truhlar And Truhlar Attys NEGOTIATION91Onyama Limba
1019Kaitlin OstroskyBrazil2026-06-02Benton, John B Jr NEW79Asiya Javayant
1020Cody SaylorsArgentina2026-06-05Dorl, James J Esq UNQUALIFIED12Onyama Limba
1021Aruna FigeroaGermany2026-05-14Dorl, James J Esq NEW57Stephen Shaw
1022Johnson SergiArgentina2026-06-06Chapman, Ross E Esq PROPOSAL36Elwin Sharvill
1023Izzy GarufiBrazil2026-05-25Buckley Miller Wright PROPOSAL28Onyama Limba
1024Tony FollerJapan2026-05-25Benton, John B Jr UNQUALIFIED21Ioni Bowcher
1025Alejandro PerinIndia2026-06-09Buckley Miller Wright NEW67Xuxue Feng
1026Deepesh ChuiIndia2026-06-09Rousseaux, Michael Esq RENEWAL60Asiya Javayant
1027Misaki RoysterCanada2026-05-16Morlong Associates NEGOTIATION39Stephen Shaw
1028Ricardo GauchoSpain2026-06-04Feiner Bros RENEWAL90Stephen Shaw
1029David DarakjyJapan2026-05-26Feiner Bros QUALIFIED69Xuxue Feng
1030Antonio CaudyAustralia2026-05-23Rousseaux, Michael Esq QUALIFIED81Anna Fali
1031Ivar PaprockiArgentina2026-05-19King, Christopher A Esq PROPOSAL63Amy Elsner
1032Sinclair WaycottRussia2026-05-28King, Christopher A Esq NEGOTIATION48Bernardo Dominic
1033Salvatore StockhamBrazil2026-05-17Rousseaux, Michael Esq UNQUALIFIED48Onyama Limba
1034Maisha RulapaughSpain2026-05-29King, Christopher A Esq UNQUALIFIED96Ioni Bowcher
1035Aditya KuskoFrance2026-05-21Rousseaux, Michael Esq NEW66Bernardo Dominic
1036Silvio SlusarskiUnited Kingdom2026-06-09Truhlar And Truhlar Attys NEW90Asiya Javayant
1037Rodrigues CampainFrance2026-06-06King, Christopher A Esq NEGOTIATION91Xuxue Feng
1038Mayumi KolmetzBrazil2026-06-02Rousseaux, Michael Esq QUALIFIED23Elwin Sharvill
1039Aika InouyeGermany2026-05-17Benton, John B Jr NEGOTIATION52Xuxue Feng
1040Chavez BriddickUnited Kingdom2026-05-20Feiner Bros NEGOTIATION53Asiya Javayant
1041Salvatore StockhamJapan2026-05-30Buckley Miller Wright UNQUALIFIED13Asiya Javayant
1042Aruna FigeroaBrazil2026-05-31Truhlar And Truhlar Attys NEGOTIATION94Bernardo Dominic
1043Darci PoquetteFrance2026-06-03Commercial Press NEGOTIATION71Ioni Bowcher
1044Silvio SlusarskiFrance2026-06-03Feltz Printing Service QUALIFIED21Asiya Javayant
1045Ashley DoeItaly2026-05-16Feltz Printing Service QUALIFIED42Asiya Javayant
1046Ashley DoeItaly2026-06-09Feiner Bros RENEWAL7Xuxue Feng
1047Aruna FigeroaJapan2026-05-25Chemel, James L Cpa QUALIFIED19Asiya Javayant
1048Faith GillianSpain2026-05-21Feltz Printing Service NEW20Xuxue Feng
1049Jeanfrancois VenereItaly2026-05-26King, Christopher A Esq NEW73Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaArgentinaElwin Sharvill PROPOSAL
Nicolas IturbideFranceAmy Elsner PROPOSAL
Ashley DoeUnited KingdomAnna Fali NEGOTIATION
Maria MarrierArgentinaAsiya Javayant QUALIFIED
Johnson SergiGermanyAnna Fali RENEWAL
Ivar PaprockiJapanIoni Bowcher PROPOSAL
Stacey MacleadAustraliaAmy Elsner QUALIFIED
Francesco ShinkoAustraliaOnyama Limba NEW
Maria MarrierJapanIoni Bowcher NEW
Ricardo GauchoGermanyAmy Elsner RENEWAL
Kadeem FlosiFranceAsiya Javayant QUALIFIED
Tony FollerIndiaStephen Shaw PROPOSAL
Munro FerenczFranceIoni Bowcher NEGOTIATION
Chavez BriddickBrazilAmy Elsner QUALIFIED
Arvin AlbaresGermanyAnna Fali RENEWAL
Deepesh ChuiAustraliaIoni Bowcher UNQUALIFIED
Ashley DoeUnited KingdomIvan Magalhaes RENEWAL
Wickens NestleItalyElwin Sharvill NEGOTIATION
Aika InouyeRussiaBernardo Dominic NEW
Costa DilliardArgentinaAmy Elsner PROPOSAL
Izzy GarufiCanadaIoni Bowcher RENEWAL
Aditya KuskoUnited KingdomIoni Bowcher NEGOTIATION
Octavia MaletAustraliaStephen Shaw RENEWAL
Francesco ShinkoAustraliaBernardo Dominic QUALIFIED
Sinclair WaycottRussiaIvan Magalhaes NEGOTIATION
Leon OldroydSpainAnna Fali RENEWAL
Jeanfrancois VenereUnited KingdomIvan Magalhaes RENEWAL
Francesco ShinkoSpainElwin Sharvill UNQUALIFIED
Tony FollerBrazilAsiya Javayant NEGOTIATION
Jones VocelkaItalyStephen Shaw NEW
Antonio CaudyArgentinaIvan Magalhaes UNQUALIFIED
Isabel BowleyIndiaStephen Shaw QUALIFIED
David DarakjyRussiaAnna Fali RENEWAL
Kaitlin OstroskyJapanIoni Bowcher UNQUALIFIED
Deepesh ChuiAustraliaIoni Bowcher RENEWAL
Ashley DoeBrazilAmy Elsner NEGOTIATION
Aika InouyeFranceElwin Sharvill NEW
Nicolas IturbideArgentinaXuxue Feng RENEWAL
Ivar PaprockiGermanyXuxue Feng NEGOTIATION
Ivar PaprockiJapanElwin Sharvill RENEWAL
Mujtaba NickaRussiaBernardo Dominic NEW
Jennifer AmigonAustraliaAsiya Javayant RENEWAL
Emily WhobreyArgentinaElwin Sharvill NEGOTIATION
Francesco ShinkoItalyAsiya Javayant NEGOTIATION
Emily WhobreyAustraliaBernardo Dominic QUALIFIED
Leja CaldareraJapanBernardo Dominic QUALIFIED
Isabel BowleyGermanyIvan Magalhaes RENEWAL
Jennifer AmigonUnited KingdomAnna Fali NEGOTIATION
Isabel BowleyArgentinaOnyama Limba QUALIFIED
Leon OldroydArgentinaStephen Shaw QUALIFIED
Frozen Columns
Name
Mujtaba Nicka
Kaitlin Ostrosky
Tony Foller
Juan Wieser
Clifford Rim
Kadeem Flosi
Misaki Royster
James Butt
Izzy Garufi
Julie Stenseth
Sinclair Waycott
Nicolas Iturbide
Aditya Kusko
Clifford Rim
Leon Oldroyd
Smith Glick
Ricardo Gaucho
Kadeem Flosi
Deepesh Chui
Cody Saylors
Cody Saylors
Adams Morasca
Smith Glick
Wickens Nestle
Kaitlin Ostrosky
Isabel Bowley
Julie Stenseth
Maisha Rulapaugh
Jefferson Schemmer
Claire Tollner
Arvin Albares
Maria Marrier
Antonio Caudy
Kadeem Flosi
Antonio Caudy
Smith Glick
Alejandro Perin
Greenwood Bolognia
Antonio Caudy
Clifford Rim
Alejandro Perin
Faith Gillian
Murillo Malet
Morrow Ruta
Sinclair Waycott
James Butt
James Butt
Adams Morasca
Greenwood Bolognia
Claire Tollner
IdCountryDate
1000Argentina2026-05-26
1001Russia2026-06-07
1002France2026-06-02
1003Canada2026-05-17
1004Brazil2026-06-01
1005United Kingdom2026-05-19
1006United Kingdom2026-06-10
1007Canada2026-05-17
1008Russia2026-05-12
1009Japan2026-05-16
1010Germany2026-05-15
1011India2026-06-08
1012Argentina2026-05-14
1013Australia2026-05-16
1014France2026-05-14
1015India2026-06-03
1016Germany2026-06-08
1017Argentina2026-05-31
1018Canada2026-05-12
1019France2026-06-07
1020Spain2026-05-30
1021Germany2026-05-24
1022India2026-05-25
1023Germany2026-06-07
1024Spain2026-06-02
1025Japan2026-05-14
1026France2026-05-19
1027Russia2026-05-17
1028Spain2026-06-01
1029Japan2026-05-22
1030Brazil2026-06-04
1031Canada2026-05-30
1032Spain2026-06-03
1033Japan2026-06-01
1034Argentina2026-06-04
1035Australia2026-06-06
1036Australia2026-05-29
1037Italy2026-05-17
1038Germany2026-06-02
1039Australia2026-05-15
1040Russia2026-05-24
1041Canada2026-05-17
1042Spain2026-05-18
1043Argentina2026-06-01
1044Spain2026-05-15
1045Japan2026-06-01
1046United Kingdom2026-05-22
1047France2026-05-25
1048Australia2026-05-27
1049Russia2026-05-14

On-Demand Data

NameIdCountryDate
Aika Inouye1000Brazil2026-06-09
Maria Marrier1001Italy2026-05-31
Julie Stenseth1002United Kingdom2026-05-12
Ricardo Gaucho1003United Kingdom2026-05-22
Claire Tollner1004Russia2026-06-08
Costa Dilliard1005Argentina2026-06-04
Rodrigues Campain1006Australia2026-05-26
Tony Foller1007Canada2026-05-15
Antonio Caudy1008Italy2026-05-15
Leon Oldroyd1009Canada2026-05-19
Cody Saylors1010Brazil2026-06-10
Jennifer Amigon1011Germany2026-06-02
Jones Vocelka1012United Kingdom2026-05-24
Darci Poquette1013Canada2026-05-12
Juan Wieser1014Brazil2026-05-29
Smith Glick1015Brazil2026-05-31
Munro Ferencz1016Canada2026-05-21
Costa Dilliard1017Japan2026-05-19
Leon Oldroyd1018Brazil2026-05-12
Costa Dilliard1019Germany2026-06-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Chavez BriddickCanadaElwin Sharvill QUALIFIED
Adams MorascaJapanBernardo Dominic UNQUALIFIED
Mujtaba NickaUnited KingdomElwin Sharvill UNQUALIFIED
Rodrigues CampainJapanOnyama Limba UNQUALIFIED
Leon OldroydArgentinaAmy Elsner QUALIFIED
Sinclair WaycottJapanBernardo Dominic NEW
Mayumi KolmetzBrazilIoni Bowcher PROPOSAL
Aika InouyeItalyBernardo Dominic NEW
Juan WieserUnited KingdomIvan Magalhaes NEGOTIATION
Chavez BriddickArgentinaAnna Fali UNQUALIFIED
Alejandro PerinIndiaAmy Elsner UNQUALIFIED
David DarakjyGermanyAsiya Javayant RENEWAL
Cody SaylorsRussiaBernardo Dominic NEW
Mayumi KolmetzAustraliaElwin Sharvill UNQUALIFIED
Kadeem FlosiBrazilElwin Sharvill QUALIFIED
Ivar PaprockiCanadaAmy Elsner QUALIFIED
Sinclair WaycottRussiaStephen Shaw QUALIFIED
Greenwood BologniaAustraliaAnna Fali UNQUALIFIED
Costa DilliardSpainAnna Fali UNQUALIFIED
Salvatore StockhamAustraliaBernardo Dominic PROPOSAL
Chavez BriddickGermanyBernardo Dominic PROPOSAL
Mayumi KolmetzCanadaElwin Sharvill NEGOTIATION
Munro FerenczArgentinaAsiya Javayant QUALIFIED
Mujtaba NickaFranceXuxue Feng NEW
Faith GillianAustraliaAmy Elsner PROPOSAL
Mujtaba NickaJapanAsiya Javayant NEGOTIATION
Johnson SergiJapanAnna Fali PROPOSAL
Kadeem FlosiCanadaBernardo Dominic QUALIFIED
Misaki RoysterIndiaAnna Fali RENEWAL
Aika InouyeRussiaStephen Shaw NEW
Ivar PaprockiIndiaAsiya Javayant RENEWAL
Nicolas IturbideAustraliaAmy Elsner QUALIFIED
Jennifer AmigonIndiaXuxue Feng UNQUALIFIED
Wickens NestleSpainAsiya Javayant NEGOTIATION
Leja CaldareraFranceAmy Elsner NEW
Izzy GarufiItalyOnyama Limba NEGOTIATION
Cody SaylorsAustraliaAmy Elsner RENEWAL
Ashley DoeIndiaIoni Bowcher PROPOSAL
Octavia MaletBrazilXuxue Feng QUALIFIED
Nicolas IturbideCanadaIvan Magalhaes NEW

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