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
Antonio CaudyGermanyXuxue Feng NEGOTIATION
Clifford RimBrazilIvan Magalhaes NEGOTIATION
Jeanfrancois VenereFranceXuxue Feng QUALIFIED
Leon OldroydUnited KingdomAnna Fali NEW
Smith GlickCanadaAsiya Javayant PROPOSAL
Misaki RoysterGermanyElwin Sharvill PROPOSAL
Mujtaba NickaFranceAmy Elsner NEGOTIATION
Ivar PaprockiJapanXuxue Feng UNQUALIFIED
Mayumi KolmetzAustraliaAnna Fali RENEWAL
James ButtFranceXuxue Feng PROPOSAL
Nicolas IturbideItalyAnna Fali RENEWAL
Julie StensethAustraliaStephen Shaw PROPOSAL
Faith GillianFranceStephen Shaw NEW
Mayumi KolmetzUnited KingdomIvan Magalhaes QUALIFIED
Tony FollerCanadaStephen Shaw RENEWAL
Silvio SlusarskiIndiaAnna Fali PROPOSAL
Jennifer AmigonItalyAnna Fali PROPOSAL
Faith GillianUnited KingdomIvan Magalhaes QUALIFIED
David DarakjyRussiaAnna Fali UNQUALIFIED
Smith GlickCanadaOnyama Limba RENEWAL
Greenwood BologniaGermanyElwin Sharvill NEW
Sinclair WaycottItalyStephen Shaw UNQUALIFIED
David DarakjyItalyXuxue Feng UNQUALIFIED
Wickens NestleGermanyStephen Shaw RENEWAL
Munro FerenczCanadaIoni Bowcher UNQUALIFIED
Johnson SergiArgentinaAsiya Javayant QUALIFIED
Antonio CaudySpainStephen Shaw NEGOTIATION
Silvio SlusarskiSpainAsiya Javayant NEGOTIATION
Mujtaba NickaFranceAmy Elsner QUALIFIED
Jennifer AmigonItalyStephen Shaw NEW
Maria MarrierRussiaElwin Sharvill NEGOTIATION
Greenwood BologniaUnited KingdomXuxue Feng RENEWAL
Octavia MaletJapanIvan Magalhaes QUALIFIED
Tony FollerRussiaIoni Bowcher QUALIFIED
Mayumi KolmetzFranceOnyama Limba UNQUALIFIED
Arvin AlbaresGermanyIoni Bowcher NEGOTIATION
Nicolas IturbideArgentinaBernardo Dominic QUALIFIED
Adams MorascaItalyAmy Elsner NEW
Jefferson SchemmerIndiaAsiya Javayant RENEWAL
Leon OldroydUnited KingdomAsiya Javayant NEW
Clifford RimIndiaAnna Fali RENEWAL
Ricardo GauchoBrazilOnyama Limba NEGOTIATION
Alejandro PerinJapanOnyama Limba QUALIFIED
Nicolas IturbideSpainXuxue Feng QUALIFIED
David DarakjyRussiaAmy Elsner NEW
Jennifer AmigonJapanXuxue Feng NEW
Jeanfrancois VenereFranceXuxue Feng RENEWAL
Cody SaylorsItalyOnyama Limba NEW
Juan WieserItalyStephen Shaw NEW
Clifford RimArgentinaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaAustraliaIoni Bowcher NEGOTIATION
Maria MarrierJapanIoni Bowcher PROPOSAL
Jennifer AmigonBrazilAmy Elsner NEGOTIATION
Smith GlickSpainIoni Bowcher NEGOTIATION
Faith GillianCanadaXuxue Feng PROPOSAL
Munro FerenczItalyBernardo Dominic NEW
Jennifer AmigonItalyAsiya Javayant NEGOTIATION
Nicolas IturbideFranceStephen Shaw UNQUALIFIED
Claire TollnerSpainXuxue Feng UNQUALIFIED
Munro FerenczUnited KingdomIoni Bowcher NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Johnson SergiUnited Kingdom2025-08-07Feiner Bros NEGOTIATION59Amy Elsner
1001Juan WieserSpain2025-08-03Benton, John B Jr QUALIFIED29Ioni Bowcher
1002Misaki RoysterFrance2025-07-28Feiner Bros NEGOTIATION99Stephen Shaw
1003Jones VocelkaGermany2025-08-06Benton, John B Jr NEGOTIATION17Xuxue Feng
1004Claire TollnerSpain2025-08-10King, Christopher A Esq NEW3Xuxue Feng
1005Maisha RulapaughGermany2025-08-03Rangoni Of Florence NEGOTIATION91Asiya Javayant
1006Juan WieserBrazil2025-07-28Buckley Miller Wright QUALIFIED41Bernardo Dominic
1007Smith GlickJapan2025-07-21Truhlar And Truhlar Attys RENEWAL86Amy Elsner
1008Octavia MaletRussia2025-08-09Benton, John B Jr PROPOSAL89Anna Fali
1009Misaki RoysterUnited Kingdom2025-07-21Feltz Printing Service RENEWAL25Ioni Bowcher
1010Jennifer AmigonFrance2025-07-31Truhlar And Truhlar Attys UNQUALIFIED38Xuxue Feng
1011Silvio SlusarskiItaly2025-08-07Chanay, Jeffrey A Esq UNQUALIFIED21Stephen Shaw
1012Morrow RutaJapan2025-07-28Truhlar And Truhlar Attys UNQUALIFIED24Stephen Shaw
1013David DarakjyCanada2025-08-01Feiner Bros NEGOTIATION5Onyama Limba
1014Leja CaldareraJapan2025-08-07Benton, John B Jr RENEWAL16Amy Elsner
1015Mujtaba NickaIndia2025-08-05Chemel, James L Cpa PROPOSAL96Elwin Sharvill
1016Mujtaba NickaBrazil2025-08-05Chanay, Jeffrey A Esq NEGOTIATION16Ivan Magalhaes
1017Jennifer AmigonJapan2025-07-29Rousseaux, Michael Esq UNQUALIFIED73Asiya Javayant
1018David DarakjyArgentina2025-07-23Feltz Printing Service NEGOTIATION70Elwin Sharvill
1019Isabel BowleyBrazil2025-07-29Dorl, James J Esq RENEWAL79Bernardo Dominic
1020David DarakjyRussia2025-07-16Buckley Miller Wright NEW34Xuxue Feng
1021Claire TollnerFrance2025-07-19Printing Dimensions RENEWAL70Onyama Limba
1022Maria MarrierArgentina2025-07-13Truhlar And Truhlar Attys NEW31Ivan Magalhaes
1023Claire TollnerRussia2025-08-01Chapman, Ross E Esq UNQUALIFIED7Anna Fali
1024Morrow RutaJapan2025-07-23Feiner Bros QUALIFIED43Asiya Javayant
1025Mujtaba NickaBrazil2025-07-16King, Christopher A Esq QUALIFIED92Asiya Javayant
1026Morrow RutaJapan2025-08-05Chapman, Ross E Esq NEGOTIATION79Anna Fali
1027Arvin AlbaresAustralia2025-08-01Chemel, James L Cpa NEGOTIATION41Asiya Javayant
1028Mujtaba NickaUnited Kingdom2025-07-24Buckley Miller Wright RENEWAL6Elwin Sharvill
1029Aruna FigeroaItaly2025-08-07Chemel, James L Cpa UNQUALIFIED95Ivan Magalhaes
1030Leon OldroydIndia2025-07-24Benton, John B Jr RENEWAL13Onyama Limba
1031Clifford RimSpain2025-08-04Printing Dimensions PROPOSAL61Amy Elsner
1032Sinclair WaycottUnited Kingdom2025-07-25Rousseaux, Michael Esq NEW35Bernardo Dominic
1033Wickens NestleGermany2025-08-07Rangoni Of Florence PROPOSAL83Ioni Bowcher
1034Nicolas IturbideIndia2025-07-25Chapman, Ross E Esq RENEWAL9Stephen Shaw
1035Ashley DoeAustralia2025-07-14Benton, John B Jr QUALIFIED80Ioni Bowcher
1036Juan WieserFrance2025-08-05Benton, John B Jr UNQUALIFIED41Ivan Magalhaes
1037Isabel BowleyBrazil2025-07-14Morlong Associates NEW36Onyama Limba
1038Kadeem FlosiItaly2025-08-10King, Christopher A Esq NEW86Amy Elsner
1039Leon OldroydItaly2025-07-28Truhlar And Truhlar Attys NEW10Ioni Bowcher
1040Adams MorascaItaly2025-07-17Feiner Bros RENEWAL47Bernardo Dominic
1041Julie StensethSpain2025-07-31Printing Dimensions RENEWAL82Amy Elsner
1042Alejandro PerinGermany2025-07-26Commercial Press PROPOSAL13Xuxue Feng
1043Leon OldroydArgentina2025-08-05Printing Dimensions RENEWAL3Asiya Javayant
1044David DarakjyCanada2025-07-14Printing Dimensions QUALIFIED3Amy Elsner
1045Antonio CaudyJapan2025-07-14Truhlar And Truhlar Attys PROPOSAL31Xuxue Feng
1046Cody SaylorsBrazil2025-07-20Printing Dimensions QUALIFIED8Bernardo Dominic
1047Francesco ShinkoBrazil2025-07-29Rousseaux, Michael Esq RENEWAL53Elwin Sharvill
1048Costa DilliardFrance2025-08-10Rangoni Of Florence RENEWAL12Elwin Sharvill
1049Stacey MacleadCanada2025-07-27Feiner Bros PROPOSAL51Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerAustraliaAnna Fali QUALIFIED
Jones VocelkaGermanyBernardo Dominic UNQUALIFIED
Leja CaldareraCanadaIvan Magalhaes PROPOSAL
Greenwood BologniaJapanIvan Magalhaes QUALIFIED
Munro FerenczIndiaBernardo Dominic PROPOSAL
Jefferson SchemmerAustraliaStephen Shaw NEGOTIATION
Cody SaylorsIndiaOnyama Limba QUALIFIED
Jefferson SchemmerBrazilElwin Sharvill QUALIFIED
Clifford RimBrazilElwin Sharvill RENEWAL
Morrow RutaGermanyAsiya Javayant UNQUALIFIED
Rodrigues CampainItalyAsiya Javayant UNQUALIFIED
Aditya KuskoUnited KingdomElwin Sharvill QUALIFIED
Leja CaldareraJapanAnna Fali QUALIFIED
Deepesh ChuiIndiaAnna Fali NEW
Octavia MaletIndiaIvan Magalhaes QUALIFIED
Jennifer AmigonArgentinaXuxue Feng RENEWAL
Arvin AlbaresUnited KingdomBernardo Dominic QUALIFIED
James ButtRussiaStephen Shaw NEW
Nicolas IturbideIndiaOnyama Limba QUALIFIED
Tony FollerRussiaXuxue Feng NEGOTIATION
Cody SaylorsItalyElwin Sharvill NEGOTIATION
Wickens NestleRussiaAsiya Javayant UNQUALIFIED
Adams MorascaUnited KingdomAmy Elsner QUALIFIED
Aditya KuskoJapanAsiya Javayant UNQUALIFIED
Munro FerenczUnited KingdomAnna Fali NEGOTIATION
Ashley DoeSpainXuxue Feng PROPOSAL
Salvatore StockhamFranceElwin Sharvill UNQUALIFIED
Munro FerenczArgentinaAsiya Javayant PROPOSAL
Ivar PaprockiRussiaAnna Fali PROPOSAL
Jefferson SchemmerJapanIoni Bowcher PROPOSAL
Silvio SlusarskiAustraliaOnyama Limba UNQUALIFIED
Leon OldroydRussiaOnyama Limba NEGOTIATION
Mujtaba NickaAustraliaElwin Sharvill NEW
Leja CaldareraItalyAnna Fali QUALIFIED
Claire TollnerRussiaStephen Shaw RENEWAL
Smith GlickRussiaXuxue Feng PROPOSAL
Arvin AlbaresSpainOnyama Limba PROPOSAL
Greenwood BologniaRussiaBernardo Dominic NEW
Kadeem FlosiItalyXuxue Feng RENEWAL
Kaitlin OstroskyArgentinaElwin Sharvill PROPOSAL
Kadeem FlosiUnited KingdomAmy Elsner NEW
Julie StensethUnited KingdomStephen Shaw PROPOSAL
Antonio CaudySpainStephen Shaw RENEWAL
Aika InouyeItalyAmy Elsner NEGOTIATION
Darci PoquetteArgentinaXuxue Feng NEGOTIATION
Johnson SergiGermanyElwin Sharvill QUALIFIED
Smith GlickJapanIoni Bowcher UNQUALIFIED
Juan WieserFranceBernardo Dominic NEGOTIATION
Ashley DoeItalyXuxue Feng PROPOSAL
James ButtArgentinaAmy Elsner RENEWAL
Frozen Columns
Name
Antonio Caudy
Jones Vocelka
Arvin Albares
Julie Stenseth
Jeanfrancois Venere
Darci Poquette
Jennifer Amigon
Francesco Shinko
Mujtaba Nicka
Cody Saylors
Aruna Figeroa
Emily Whobrey
Mujtaba Nicka
Clifford Rim
Jeanfrancois Venere
Murillo Malet
Smith Glick
Cody Saylors
Emily Whobrey
Kadeem Flosi
Clifford Rim
Leon Oldroyd
Tony Foller
Johnson Sergi
Chavez Briddick
Aditya Kusko
Leon Oldroyd
Johnson Sergi
Octavia Malet
Izzy Garufi
Mujtaba Nicka
Aditya Kusko
Kadeem Flosi
Isabel Bowley
Chavez Briddick
Emily Whobrey
Maisha Rulapaugh
Adams Morasca
Mujtaba Nicka
Claire Tollner
Isabel Bowley
Aruna Figeroa
Ricardo Gaucho
Smith Glick
Chavez Briddick
Kaitlin Ostrosky
Kaitlin Ostrosky
Mujtaba Nicka
Costa Dilliard
Maisha Rulapaugh
IdCountryDate
1000France2025-07-30
1001United Kingdom2025-07-21
1002Italy2025-08-09
1003France2025-07-21
1004Brazil2025-08-09
1005Japan2025-08-01
1006Argentina2025-08-06
1007Russia2025-08-01
1008India2025-08-06
1009France2025-07-17
1010Japan2025-07-30
1011Germany2025-08-03
1012Brazil2025-07-13
1013United Kingdom2025-07-25
1014Germany2025-08-01
1015United Kingdom2025-07-22
1016Spain2025-08-01
1017Argentina2025-08-08
1018Australia2025-07-30
1019Argentina2025-07-30
1020Spain2025-08-09
1021Russia2025-08-04
1022Canada2025-07-17
1023Argentina2025-07-17
1024Japan2025-07-24
1025Italy2025-07-30
1026Australia2025-08-03
1027United Kingdom2025-07-19
1028Brazil2025-07-22
1029Russia2025-07-14
1030Italy2025-08-04
1031Italy2025-08-08
1032Italy2025-07-21
1033Germany2025-07-20
1034Brazil2025-08-06
1035Italy2025-08-04
1036Spain2025-07-25
1037Germany2025-07-24
1038Japan2025-07-16
1039Italy2025-08-07
1040Russia2025-08-05
1041Canada2025-07-13
1042Brazil2025-08-10
1043France2025-07-20
1044India2025-08-01
1045France2025-07-24
1046France2025-08-01
1047France2025-08-03
1048Brazil2025-07-20
1049Argentina2025-07-31

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Argentina2025-07-15
Francesco Shinko1001Spain2025-07-23
Claire Tollner1002Australia2025-08-06
Johnson Sergi1003Japan2025-07-31
Nicolas Iturbide1004Germany2025-07-31
Jeanfrancois Venere1005United Kingdom2025-08-03
Salvatore Stockham1006United Kingdom2025-07-19
Jennifer Amigon1007Canada2025-08-01
Faith Gillian1008Spain2025-07-25
Jones Vocelka1009France2025-07-19
Costa Dilliard1010Spain2025-08-09
Jones Vocelka1011Spain2025-07-31
Stacey Maclead1012Australia2025-07-19
Jennifer Amigon1013France2025-07-17
Ivar Paprocki1014Australia2025-07-31
Maria Marrier1015United Kingdom2025-07-13
Claire Tollner1016United Kingdom2025-07-28
Faith Gillian1017Spain2025-07-28
Aruna Figeroa1018Russia2025-08-04
Costa Dilliard1019Canada2025-07-20
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Francesco ShinkoAustraliaXuxue Feng UNQUALIFIED
Aika InouyeCanadaXuxue Feng NEGOTIATION
Emily WhobreyCanadaAmy Elsner PROPOSAL
Adams MorascaArgentinaIvan Magalhaes NEW
Aditya KuskoBrazilBernardo Dominic NEGOTIATION
Costa DilliardSpainElwin Sharvill UNQUALIFIED
Smith GlickUnited KingdomElwin Sharvill QUALIFIED
Izzy GarufiArgentinaBernardo Dominic QUALIFIED
Darci PoquetteRussiaIvan Magalhaes UNQUALIFIED
Johnson SergiUnited KingdomIvan Magalhaes QUALIFIED
Darci PoquetteFranceXuxue Feng RENEWAL
Francesco ShinkoFranceBernardo Dominic PROPOSAL
Costa DilliardAustraliaAsiya Javayant UNQUALIFIED
Emily WhobreyBrazilStephen Shaw UNQUALIFIED
Tony FollerUnited KingdomIvan Magalhaes RENEWAL
Greenwood BologniaArgentinaIvan Magalhaes NEGOTIATION
Jones VocelkaItalyIvan Magalhaes RENEWAL
Ivar PaprockiJapanAsiya Javayant PROPOSAL
Morrow RutaUnited KingdomXuxue Feng NEW
Misaki RoysterUnited KingdomAsiya Javayant PROPOSAL
Salvatore StockhamAustraliaIvan Magalhaes UNQUALIFIED
Jones VocelkaIndiaStephen Shaw NEGOTIATION
Francesco ShinkoSpainIoni Bowcher QUALIFIED
Misaki RoysterCanadaIvan Magalhaes UNQUALIFIED
Kadeem FlosiBrazilBernardo Dominic UNQUALIFIED
Cody SaylorsGermanyStephen Shaw RENEWAL
Leon OldroydIndiaIoni Bowcher RENEWAL
Claire TollnerFranceAnna Fali NEGOTIATION
Nicolas IturbideBrazilAnna Fali PROPOSAL
Salvatore StockhamSpainElwin Sharvill UNQUALIFIED
Aditya KuskoAustraliaXuxue Feng NEGOTIATION
Kadeem FlosiGermanyStephen Shaw QUALIFIED
Ivar PaprockiFranceOnyama Limba PROPOSAL
Emily WhobreyBrazilAsiya Javayant NEGOTIATION
Aditya KuskoBrazilOnyama Limba RENEWAL
Darci PoquetteGermanyIoni Bowcher RENEWAL
Tony FollerSpainAsiya Javayant PROPOSAL
David DarakjyUnited KingdomBernardo Dominic NEGOTIATION
Munro FerenczGermanyXuxue Feng UNQUALIFIED
Chavez BriddickSpainStephen Shaw RENEWAL

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