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
Mujtaba NickaItalyAsiya Javayant QUALIFIED
Rodrigues CampainRussiaAnna Fali NEGOTIATION
Faith GillianArgentinaIoni Bowcher PROPOSAL
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Smith GlickBrazilIvan Magalhaes NEGOTIATION
Rodrigues CampainRussiaOnyama Limba UNQUALIFIED
Faith GillianArgentinaXuxue Feng UNQUALIFIED
James ButtItalyAnna Fali PROPOSAL
Johnson SergiGermanyIvan Magalhaes RENEWAL
Maisha RulapaughBrazilIoni Bowcher RENEWAL
Clifford RimBrazilIvan Magalhaes NEW
Deepesh ChuiUnited KingdomIoni Bowcher PROPOSAL
Greenwood BologniaBrazilOnyama Limba QUALIFIED
Munro FerenczAustraliaElwin Sharvill NEW
Leon OldroydUnited KingdomOnyama Limba QUALIFIED
Juan WieserBrazilAmy Elsner RENEWAL
Wickens NestleFranceIoni Bowcher NEGOTIATION
Kaitlin OstroskyGermanyBernardo Dominic NEW
Claire TollnerGermanyAmy Elsner UNQUALIFIED
Jones VocelkaRussiaElwin Sharvill RENEWAL
Juan WieserSpainXuxue Feng NEW
Stacey MacleadIndiaAnna Fali NEW
Emily WhobreyCanadaIoni Bowcher PROPOSAL
Murillo MaletBrazilIvan Magalhaes PROPOSAL
Ivar PaprockiSpainOnyama Limba PROPOSAL
David DarakjyAustraliaOnyama Limba PROPOSAL
Jeanfrancois VenereAustraliaAsiya Javayant PROPOSAL
Arvin AlbaresSpainAmy Elsner RENEWAL
Emily WhobreyRussiaBernardo Dominic NEGOTIATION
Jefferson SchemmerAustraliaAmy Elsner RENEWAL
Mujtaba NickaJapanXuxue Feng RENEWAL
Ivar PaprockiSpainIvan Magalhaes RENEWAL
Kaitlin OstroskyIndiaAnna Fali PROPOSAL
Kadeem FlosiCanadaAnna Fali QUALIFIED
Stacey MacleadCanadaAsiya Javayant PROPOSAL
Juan WieserRussiaAmy Elsner RENEWAL
Cody SaylorsCanadaStephen Shaw RENEWAL
Clifford RimArgentinaOnyama Limba UNQUALIFIED
Izzy GarufiBrazilAmy Elsner RENEWAL
Kadeem FlosiFranceOnyama Limba QUALIFIED
Kadeem FlosiIndiaAmy Elsner NEW
Clifford RimItalyAnna Fali RENEWAL
Jeanfrancois VenereCanadaIoni Bowcher NEW
Leja CaldareraBrazilAmy Elsner UNQUALIFIED
Misaki RoysterItalyIvan Magalhaes NEW
Jeanfrancois VenereBrazilBernardo Dominic RENEWAL
Greenwood BologniaArgentinaStephen Shaw QUALIFIED
Greenwood BologniaRussiaOnyama Limba RENEWAL
Clifford RimSpainBernardo Dominic NEW
Mayumi KolmetzUnited KingdomBernardo Dominic NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Adams MorascaUnited KingdomOnyama Limba NEGOTIATION
Rodrigues CampainSpainIvan Magalhaes PROPOSAL
Ricardo GauchoRussiaElwin Sharvill NEGOTIATION
Octavia MaletBrazilIvan Magalhaes UNQUALIFIED
Mujtaba NickaArgentinaStephen Shaw RENEWAL
Costa DilliardArgentinaXuxue Feng QUALIFIED
Cody SaylorsItalyOnyama Limba QUALIFIED
Clifford RimBrazilOnyama Limba UNQUALIFIED
Ricardo GauchoBrazilOnyama Limba RENEWAL
Isabel BowleyArgentinaXuxue Feng QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ashley DoeGermany2025-06-07Truhlar And Truhlar Attys RENEWAL96Amy Elsner
1001Kaitlin OstroskyCanada2025-06-26Chanay, Jeffrey A Esq RENEWAL73Onyama Limba
1002Greenwood BologniaItaly2025-06-06Chapman, Ross E Esq RENEWAL52Asiya Javayant
1003Silvio SlusarskiFrance2025-07-01King, Christopher A Esq UNQUALIFIED26Bernardo Dominic
1004David DarakjyItaly2025-06-28Commercial Press NEW65Asiya Javayant
1005Deepesh ChuiGermany2025-06-30Chemel, James L Cpa UNQUALIFIED97Amy Elsner
1006Izzy GarufiFrance2025-06-18Chemel, James L Cpa NEGOTIATION89Amy Elsner
1007Chavez BriddickItaly2025-06-26King, Christopher A Esq UNQUALIFIED53Ivan Magalhaes
1008Stacey MacleadAustralia2025-06-28Printing Dimensions NEW61Asiya Javayant
1009Mujtaba NickaSpain2025-06-03Benton, John B Jr NEW29Stephen Shaw
1010Alejandro PerinUnited Kingdom2025-06-11Dorl, James J Esq UNQUALIFIED6Onyama Limba
1011Octavia MaletRussia2025-06-20Rangoni Of Florence NEW32Bernardo Dominic
1012Greenwood BologniaItaly2025-06-03King, Christopher A Esq UNQUALIFIED74Ioni Bowcher
1013Julie StensethCanada2025-06-23King, Christopher A Esq UNQUALIFIED11Ivan Magalhaes
1014Munro FerenczCanada2025-06-03Printing Dimensions NEW52Amy Elsner
1015Francesco ShinkoRussia2025-06-17Chapman, Ross E Esq UNQUALIFIED29Anna Fali
1016Deepesh ChuiItaly2025-06-20Chemel, James L Cpa PROPOSAL85Elwin Sharvill
1017Kaitlin OstroskyUnited Kingdom2025-06-16Commercial Press RENEWAL34Asiya Javayant
1018Ashley DoeFrance2025-07-01Rousseaux, Michael Esq NEW2Stephen Shaw
1019Greenwood BologniaItaly2025-06-17Feltz Printing Service NEGOTIATION26Bernardo Dominic
1020Emily WhobreyBrazil2025-06-06Morlong Associates NEGOTIATION80Onyama Limba
1021Maria MarrierUnited Kingdom2025-06-02Benton, John B Jr QUALIFIED55Stephen Shaw
1022Munro FerenczAustralia2025-06-25Commercial Press NEGOTIATION31Onyama Limba
1023Munro FerenczArgentina2025-06-28Morlong Associates PROPOSAL22Onyama Limba
1024Jones VocelkaRussia2025-06-14Chemel, James L Cpa NEGOTIATION56Stephen Shaw
1025Mujtaba NickaUnited Kingdom2025-06-09Truhlar And Truhlar Attys NEGOTIATION6Stephen Shaw
1026Silvio SlusarskiFrance2025-06-07Morlong Associates PROPOSAL99Amy Elsner
1027Aika InouyeJapan2025-06-09Benton, John B Jr RENEWAL62Onyama Limba
1028Arvin AlbaresGermany2025-06-06Truhlar And Truhlar Attys NEW78Bernardo Dominic
1029Octavia MaletBrazil2025-06-21Morlong Associates UNQUALIFIED24Stephen Shaw
1030Mayumi KolmetzUnited Kingdom2025-06-06Chanay, Jeffrey A Esq PROPOSAL85Stephen Shaw
1031Rodrigues CampainAustralia2025-06-16Feltz Printing Service QUALIFIED69Amy Elsner
1032Mayumi KolmetzSpain2025-06-27Benton, John B Jr PROPOSAL89Anna Fali
1033Silvio SlusarskiIndia2025-06-24Feltz Printing Service QUALIFIED5Elwin Sharvill
1034Maisha RulapaughCanada2025-06-11Truhlar And Truhlar Attys QUALIFIED39Onyama Limba
1035Wickens NestleJapan2025-06-20King, Christopher A Esq UNQUALIFIED37Onyama Limba
1036Julie StensethUnited Kingdom2025-06-05Truhlar And Truhlar Attys QUALIFIED99Xuxue Feng
1037Leja CaldareraSpain2025-06-09Rangoni Of Florence NEW41Amy Elsner
1038Maisha RulapaughItaly2025-06-29Commercial Press QUALIFIED26Elwin Sharvill
1039Chavez BriddickAustralia2025-06-23Chemel, James L Cpa NEGOTIATION82Stephen Shaw
1040Ivar PaprockiIndia2025-06-15Benton, John B Jr PROPOSAL14Anna Fali
1041Jones VocelkaFrance2025-06-14Commercial Press RENEWAL28Anna Fali
1042Juan WieserIndia2025-06-03King, Christopher A Esq PROPOSAL52Ivan Magalhaes
1043Chavez BriddickFrance2025-06-03Dorl, James J Esq PROPOSAL97Stephen Shaw
1044Ricardo GauchoBrazil2025-06-09Benton, John B Jr PROPOSAL46Ioni Bowcher
1045Francesco ShinkoArgentina2025-06-26King, Christopher A Esq UNQUALIFIED21Amy Elsner
1046Silvio SlusarskiRussia2025-06-25Dorl, James J Esq NEGOTIATION33Xuxue Feng
1047Mujtaba NickaJapan2025-06-19Feltz Printing Service NEW7Ivan Magalhaes
1048Francesco ShinkoFrance2025-06-21Buckley Miller Wright PROPOSAL95Anna Fali
1049Chavez BriddickGermany2025-06-25Truhlar And Truhlar Attys QUALIFIED50Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyCanadaAsiya Javayant RENEWAL
Morrow RutaArgentinaAmy Elsner UNQUALIFIED
Greenwood BologniaFranceAsiya Javayant RENEWAL
Cody SaylorsJapanOnyama Limba NEGOTIATION
James ButtItalyXuxue Feng PROPOSAL
Francesco ShinkoFranceAnna Fali NEW
Munro FerenczUnited KingdomOnyama Limba RENEWAL
Deepesh ChuiItalyAnna Fali PROPOSAL
Ivar PaprockiBrazilAsiya Javayant UNQUALIFIED
Maria MarrierBrazilIvan Magalhaes PROPOSAL
Claire TollnerUnited KingdomAnna Fali RENEWAL
Chavez BriddickSpainElwin Sharvill NEW
Cody SaylorsFranceAsiya Javayant PROPOSAL
Kaitlin OstroskyRussiaStephen Shaw NEGOTIATION
Silvio SlusarskiIndiaIoni Bowcher QUALIFIED
Nicolas IturbideSpainOnyama Limba PROPOSAL
Leon OldroydAustraliaAmy Elsner PROPOSAL
Sinclair WaycottAustraliaOnyama Limba RENEWAL
Sinclair WaycottRussiaAmy Elsner NEW
Costa DilliardGermanyIvan Magalhaes PROPOSAL
Alejandro PerinRussiaXuxue Feng QUALIFIED
Isabel BowleyItalyBernardo Dominic QUALIFIED
David DarakjyFranceAmy Elsner UNQUALIFIED
Costa DilliardIndiaAnna Fali NEGOTIATION
Chavez BriddickCanadaAsiya Javayant NEW
Deepesh ChuiRussiaAnna Fali UNQUALIFIED
Maisha RulapaughSpainBernardo Dominic NEW
Darci PoquetteAustraliaIoni Bowcher NEGOTIATION
Maisha RulapaughItalyIvan Magalhaes RENEWAL
Izzy GarufiRussiaBernardo Dominic RENEWAL
Morrow RutaItalyBernardo Dominic QUALIFIED
Alejandro PerinGermanyBernardo Dominic UNQUALIFIED
Faith GillianFranceXuxue Feng UNQUALIFIED
Munro FerenczRussiaStephen Shaw NEW
Jones VocelkaRussiaIvan Magalhaes QUALIFIED
Aika InouyeArgentinaOnyama Limba UNQUALIFIED
Claire TollnerCanadaBernardo Dominic NEW
Cody SaylorsItalyAmy Elsner UNQUALIFIED
Adams MorascaIndiaStephen Shaw NEW
Isabel BowleyCanadaXuxue Feng RENEWAL
Leja CaldareraSpainBernardo Dominic PROPOSAL
Francesco ShinkoBrazilOnyama Limba NEW
Izzy GarufiCanadaBernardo Dominic PROPOSAL
Costa DilliardGermanyStephen Shaw QUALIFIED
Claire TollnerCanadaIoni Bowcher RENEWAL
Chavez BriddickItalyStephen Shaw UNQUALIFIED
David DarakjyBrazilElwin Sharvill QUALIFIED
Arvin AlbaresSpainBernardo Dominic UNQUALIFIED
Juan WieserSpainAmy Elsner UNQUALIFIED
Aruna FigeroaRussiaBernardo Dominic QUALIFIED
Frozen Columns
Name
Izzy Garufi
Greenwood Bolognia
Alejandro Perin
Faith Gillian
Kaitlin Ostrosky
Kaitlin Ostrosky
David Darakjy
Silvio Slusarski
Mujtaba Nicka
Chavez Briddick
Faith Gillian
Aditya Kusko
Jennifer Amigon
Clifford Rim
Smith Glick
Ricardo Gaucho
Jeanfrancois Venere
Mayumi Kolmetz
Ashley Doe
Jeanfrancois Venere
Izzy Garufi
Jones Vocelka
Faith Gillian
Emily Whobrey
Julie Stenseth
Jones Vocelka
Johnson Sergi
Adams Morasca
Ashley Doe
Kaitlin Ostrosky
Leja Caldarera
Stacey Maclead
David Darakjy
Ashley Doe
Rodrigues Campain
Alejandro Perin
Deepesh Chui
Jeanfrancois Venere
Jones Vocelka
Greenwood Bolognia
Mayumi Kolmetz
Aruna Figeroa
Maisha Rulapaugh
Kaitlin Ostrosky
Octavia Malet
Claire Tollner
Arvin Albares
Jeanfrancois Venere
Mujtaba Nicka
Maisha Rulapaugh
IdCountryDate
1000Italy2025-06-23
1001Italy2025-06-24
1002Canada2025-07-01
1003Australia2025-06-19
1004France2025-06-17
1005Japan2025-06-30
1006Spain2025-06-12
1007Canada2025-06-03
1008Brazil2025-06-19
1009Australia2025-06-16
1010India2025-06-03
1011Argentina2025-06-07
1012United Kingdom2025-06-24
1013Spain2025-06-22
1014Germany2025-06-06
1015Italy2025-06-20
1016France2025-06-09
1017India2025-06-15
1018Spain2025-06-19
1019Australia2025-06-27
1020Italy2025-06-06
1021France2025-06-10
1022Canada2025-06-21
1023France2025-06-08
1024United Kingdom2025-07-01
1025Spain2025-06-03
1026Russia2025-06-23
1027Japan2025-06-23
1028Argentina2025-06-03
1029Germany2025-06-27
1030Australia2025-06-13
1031France2025-06-12
1032Australia2025-06-16
1033Argentina2025-06-17
1034Brazil2025-06-21
1035Canada2025-06-16
1036Spain2025-06-08
1037United Kingdom2025-06-14
1038Canada2025-06-21
1039Brazil2025-06-10
1040India2025-06-30
1041Spain2025-06-08
1042Australia2025-06-02
1043Italy2025-06-09
1044Argentina2025-06-05
1045Spain2025-06-14
1046Australia2025-06-04
1047Spain2025-06-15
1048Argentina2025-06-21
1049Argentina2025-06-10

On-Demand Data

NameIdCountryDate
Jones Vocelka1000Germany2025-06-14
Maisha Rulapaugh1001United Kingdom2025-06-09
Jennifer Amigon1002India2025-06-02
Maria Marrier1003Brazil2025-06-25
Arvin Albares1004Spain2025-06-16
Nicolas Iturbide1005Japan2025-06-08
Salvatore Stockham1006Italy2025-06-18
Izzy Garufi1007Germany2025-06-05
Misaki Royster1008Argentina2025-06-15
Juan Wieser1009Italy2025-06-27
Morrow Ruta1010Japan2025-06-25
Francesco Shinko1011Australia2025-06-15
Tony Foller1012Brazil2025-06-30
James Butt1013Japan2025-06-08
Ashley Doe1014Australia2025-06-09
Tony Foller1015Italy2025-06-28
Silvio Slusarski1016Canada2025-06-21
Maria Marrier1017Spain2025-06-03
Isabel Bowley1018Australia2025-06-11
Mujtaba Nicka1019India2025-06-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiGermanyIoni Bowcher RENEWAL
Francesco ShinkoAustraliaIoni Bowcher PROPOSAL
Maisha RulapaughBrazilAnna Fali NEGOTIATION
Arvin AlbaresIndiaAnna Fali RENEWAL
Kaitlin OstroskyUnited KingdomAmy Elsner NEW
Munro FerenczCanadaAnna Fali NEW
Munro FerenczSpainElwin Sharvill QUALIFIED
Clifford RimBrazilXuxue Feng QUALIFIED
Claire TollnerGermanyAsiya Javayant RENEWAL
Kaitlin OstroskyArgentinaElwin Sharvill RENEWAL
Misaki RoysterUnited KingdomXuxue Feng QUALIFIED
Emily WhobreyGermanyElwin Sharvill PROPOSAL
Murillo MaletItalyAsiya Javayant NEW
Stacey MacleadGermanyAsiya Javayant NEW
Leon OldroydGermanyBernardo Dominic QUALIFIED
Mujtaba NickaJapanAsiya Javayant UNQUALIFIED
Adams MorascaSpainXuxue Feng QUALIFIED
Claire TollnerCanadaBernardo Dominic QUALIFIED
James ButtJapanIoni Bowcher NEGOTIATION
David DarakjyItalyBernardo Dominic NEW
Deepesh ChuiIndiaOnyama Limba UNQUALIFIED
Chavez BriddickJapanXuxue Feng PROPOSAL
Emily WhobreyGermanyIoni Bowcher QUALIFIED
Antonio CaudySpainOnyama Limba QUALIFIED
Chavez BriddickArgentinaOnyama Limba QUALIFIED
Sinclair WaycottBrazilOnyama Limba QUALIFIED
Jeanfrancois VenereFranceBernardo Dominic PROPOSAL
Antonio CaudyArgentinaOnyama Limba NEW
Leja CaldareraArgentinaAsiya Javayant NEGOTIATION
Leon OldroydCanadaXuxue Feng UNQUALIFIED
Ashley DoeRussiaXuxue Feng NEW
Cody SaylorsBrazilAmy Elsner PROPOSAL
Morrow RutaCanadaXuxue Feng QUALIFIED
Murillo MaletFranceIvan Magalhaes UNQUALIFIED
Ricardo GauchoCanadaXuxue Feng UNQUALIFIED
Juan WieserUnited KingdomOnyama Limba NEW
Jefferson SchemmerGermanyIvan Magalhaes UNQUALIFIED
Arvin AlbaresRussiaAmy Elsner PROPOSAL
Isabel BowleyGermanyXuxue Feng NEGOTIATION
Kadeem FlosiAustraliaElwin Sharvill 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>