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
Aika InouyeAustraliaAsiya Javayant RENEWAL
Jefferson SchemmerBrazilAmy Elsner NEW
Costa DilliardItalyStephen Shaw UNQUALIFIED
Munro FerenczUnited KingdomAsiya Javayant RENEWAL
Aruna FigeroaArgentinaAsiya Javayant RENEWAL
Octavia MaletFranceElwin Sharvill RENEWAL
Arvin AlbaresSpainXuxue Feng NEW
Alejandro PerinFranceBernardo Dominic NEW
Emily WhobreyAustraliaElwin Sharvill NEW
Nicolas IturbideUnited KingdomXuxue Feng NEW
Darci PoquetteIndiaOnyama Limba NEGOTIATION
Murillo MaletCanadaAmy Elsner NEW
Johnson SergiUnited KingdomOnyama Limba NEW
Jefferson SchemmerCanadaStephen Shaw PROPOSAL
Jeanfrancois VenereFranceOnyama Limba NEW
Izzy GarufiArgentinaIoni Bowcher QUALIFIED
Darci PoquetteAustraliaElwin Sharvill RENEWAL
Silvio SlusarskiAustraliaElwin Sharvill NEGOTIATION
Aditya KuskoIndiaIvan Magalhaes PROPOSAL
Salvatore StockhamJapanBernardo Dominic UNQUALIFIED
Alejandro PerinFranceAsiya Javayant PROPOSAL
Munro FerenczJapanOnyama Limba NEGOTIATION
Ivar PaprockiFranceIvan Magalhaes NEGOTIATION
Chavez BriddickIndiaElwin Sharvill QUALIFIED
Adams MorascaUnited KingdomXuxue Feng NEW
James ButtGermanyXuxue Feng NEGOTIATION
Ivar PaprockiBrazilBernardo Dominic UNQUALIFIED
David DarakjyBrazilStephen Shaw NEGOTIATION
Sinclair WaycottGermanyBernardo Dominic UNQUALIFIED
Alejandro PerinSpainIoni Bowcher PROPOSAL
Claire TollnerJapanIvan Magalhaes QUALIFIED
Chavez BriddickJapanIvan Magalhaes UNQUALIFIED
Emily WhobreySpainIoni Bowcher RENEWAL
Leja CaldareraAustraliaOnyama Limba QUALIFIED
Cody SaylorsSpainElwin Sharvill NEW
Ricardo GauchoRussiaStephen Shaw PROPOSAL
Aditya KuskoFranceOnyama Limba PROPOSAL
Emily WhobreyJapanOnyama Limba RENEWAL
Antonio CaudyRussiaBernardo Dominic RENEWAL
Aika InouyeBrazilStephen Shaw UNQUALIFIED
Darci PoquetteItalyAnna Fali UNQUALIFIED
Mayumi KolmetzSpainAmy Elsner RENEWAL
Morrow RutaAustraliaBernardo Dominic PROPOSAL
Salvatore StockhamArgentinaBernardo Dominic NEW
Rodrigues CampainCanadaOnyama Limba NEGOTIATION
Costa DilliardFranceXuxue Feng RENEWAL
Salvatore StockhamUnited KingdomIoni Bowcher NEW
Julie StensethJapanStephen Shaw UNQUALIFIED
Faith GillianItalyOnyama Limba PROPOSAL
Sinclair WaycottCanadaAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaCanadaStephen Shaw NEGOTIATION
James ButtIndiaXuxue Feng UNQUALIFIED
Julie StensethIndiaBernardo Dominic NEW
Smith GlickItalyIvan Magalhaes UNQUALIFIED
Julie StensethGermanyIoni Bowcher NEW
Maria MarrierFranceAnna Fali NEGOTIATION
Munro FerenczJapanAmy Elsner RENEWAL
Mayumi KolmetzJapanIoni Bowcher RENEWAL
Sinclair WaycottRussiaOnyama Limba NEW
Emily WhobreyBrazilOnyama Limba PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kadeem FlosiSpain2026-05-10Chapman, Ross E Esq UNQUALIFIED73Elwin Sharvill
1001Murillo MaletBrazil2026-05-05Morlong Associates QUALIFIED90Bernardo Dominic
1002Maisha RulapaughBrazil2026-04-29Chanay, Jeffrey A Esq NEGOTIATION90Bernardo Dominic
1003Darci PoquetteIndia2026-04-20Chapman, Ross E Esq UNQUALIFIED2Anna Fali
1004Cody SaylorsAustralia2026-04-30Chemel, James L Cpa RENEWAL96Ioni Bowcher
1005James ButtIndia2026-04-29Chemel, James L Cpa RENEWAL90Ivan Magalhaes
1006Maria MarrierFrance2026-04-20Printing Dimensions RENEWAL31Elwin Sharvill
1007Maisha RulapaughUnited Kingdom2026-04-14Chanay, Jeffrey A Esq PROPOSAL12Amy Elsner
1008Kaitlin OstroskyFrance2026-04-21Dorl, James J Esq RENEWAL58Ioni Bowcher
1009Octavia MaletRussia2026-05-03Feiner Bros QUALIFIED69Asiya Javayant
1010Arvin AlbaresItaly2026-05-10King, Christopher A Esq RENEWAL42Xuxue Feng
1011Wickens NestleJapan2026-04-13Chapman, Ross E Esq UNQUALIFIED31Xuxue Feng
1012Sinclair WaycottUnited Kingdom2026-04-24Dorl, James J Esq UNQUALIFIED40Ivan Magalhaes
1013Chavez BriddickJapan2026-04-24Chanay, Jeffrey A Esq NEW31Anna Fali
1014Leja CaldareraCanada2026-05-09Commercial Press NEGOTIATION41Bernardo Dominic
1015Francesco ShinkoIndia2026-04-22Chemel, James L Cpa NEGOTIATION63Stephen Shaw
1016Leja CaldareraIndia2026-05-10Chanay, Jeffrey A Esq UNQUALIFIED12Elwin Sharvill
1017Mujtaba NickaAustralia2026-04-21Feltz Printing Service UNQUALIFIED48Amy Elsner
1018Clifford RimItaly2026-04-19Commercial Press NEW36Xuxue Feng
1019Darci PoquetteUnited Kingdom2026-04-15Chanay, Jeffrey A Esq QUALIFIED61Asiya Javayant
1020Mujtaba NickaItaly2026-04-21Morlong Associates QUALIFIED72Bernardo Dominic
1021Jeanfrancois VenereSpain2026-04-29Benton, John B Jr NEW27Stephen Shaw
1022Sinclair WaycottGermany2026-04-16Feiner Bros NEW32Stephen Shaw
1023Emily WhobreyFrance2026-04-26Printing Dimensions NEGOTIATION5Ivan Magalhaes
1024Arvin AlbaresFrance2026-04-11Chanay, Jeffrey A Esq QUALIFIED79Onyama Limba
1025Aika InouyeJapan2026-05-08Benton, John B Jr PROPOSAL29Asiya Javayant
1026Tony FollerGermany2026-04-26Dorl, James J Esq NEW48Stephen Shaw
1027Kaitlin OstroskyIndia2026-04-26Commercial Press PROPOSAL74Amy Elsner
1028Maria MarrierFrance2026-05-07Feltz Printing Service QUALIFIED90Ivan Magalhaes
1029Aika InouyeFrance2026-04-21Benton, John B Jr NEGOTIATION89Ivan Magalhaes
1030Chavez BriddickUnited Kingdom2026-04-22Feiner Bros QUALIFIED91Amy Elsner
1031Stacey MacleadIndia2026-04-12Feiner Bros RENEWAL16Elwin Sharvill
1032James ButtItaly2026-05-04Chanay, Jeffrey A Esq NEW13Ivan Magalhaes
1033Salvatore StockhamItaly2026-04-20Feltz Printing Service QUALIFIED3Asiya Javayant
1034Leon OldroydRussia2026-05-09Chemel, James L Cpa QUALIFIED73Xuxue Feng
1035Francesco ShinkoAustralia2026-04-15Printing Dimensions NEW5Ioni Bowcher
1036Munro FerenczAustralia2026-05-03Feiner Bros QUALIFIED19Onyama Limba
1037Kadeem FlosiFrance2026-05-09King, Christopher A Esq QUALIFIED95Anna Fali
1038Cody SaylorsUnited Kingdom2026-05-05King, Christopher A Esq QUALIFIED39Onyama Limba
1039Maisha RulapaughJapan2026-04-25Feiner Bros PROPOSAL94Ioni Bowcher
1040Stacey MacleadBrazil2026-04-30Printing Dimensions NEW56Bernardo Dominic
1041Francesco ShinkoGermany2026-04-30Dorl, James J Esq RENEWAL7Ioni Bowcher
1042Alejandro PerinGermany2026-04-17Feiner Bros RENEWAL52Onyama Limba
1043Leon OldroydJapan2026-04-11Buckley Miller Wright RENEWAL59Bernardo Dominic
1044Jeanfrancois VenereItaly2026-04-12Feiner Bros UNQUALIFIED43Xuxue Feng
1045Adams MorascaGermany2026-04-18Chemel, James L Cpa UNQUALIFIED23Anna Fali
1046Salvatore StockhamFrance2026-05-02Dorl, James J Esq QUALIFIED19Xuxue Feng
1047Emily WhobreyIndia2026-04-30Rangoni Of Florence RENEWAL67Xuxue Feng
1048Antonio CaudyArgentina2026-04-24Truhlar And Truhlar Attys RENEWAL58Anna Fali
1049David DarakjyRussia2026-04-16Rangoni Of Florence RENEWAL60Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Salvatore StockhamGermanyXuxue Feng QUALIFIED
Murillo MaletCanadaElwin Sharvill NEGOTIATION
Morrow RutaRussiaAnna Fali NEW
Aruna FigeroaUnited KingdomOnyama Limba UNQUALIFIED
Mujtaba NickaFranceBernardo Dominic QUALIFIED
Leon OldroydBrazilElwin Sharvill QUALIFIED
David DarakjyArgentinaElwin Sharvill QUALIFIED
Mujtaba NickaFranceIoni Bowcher UNQUALIFIED
Aruna FigeroaSpainXuxue Feng PROPOSAL
Izzy GarufiBrazilXuxue Feng RENEWAL
Morrow RutaGermanyIoni Bowcher NEGOTIATION
Arvin AlbaresRussiaBernardo Dominic QUALIFIED
Nicolas IturbideAustraliaElwin Sharvill NEGOTIATION
Johnson SergiUnited KingdomOnyama Limba NEGOTIATION
Jennifer AmigonAustraliaXuxue Feng NEW
Silvio SlusarskiBrazilIoni Bowcher NEW
Stacey MacleadSpainAsiya Javayant QUALIFIED
David DarakjyBrazilAsiya Javayant RENEWAL
Maria MarrierIndiaAnna Fali NEGOTIATION
Adams MorascaGermanyIoni Bowcher NEGOTIATION
Jennifer AmigonItalyBernardo Dominic NEGOTIATION
Faith GillianUnited KingdomStephen Shaw RENEWAL
Ashley DoeSpainAnna Fali PROPOSAL
Stacey MacleadIndiaOnyama Limba NEGOTIATION
Murillo MaletArgentinaAsiya Javayant NEGOTIATION
Isabel BowleyCanadaXuxue Feng UNQUALIFIED
Faith GillianBrazilXuxue Feng UNQUALIFIED
Aditya KuskoAustraliaOnyama Limba NEGOTIATION
James ButtJapanAmy Elsner RENEWAL
Greenwood BologniaRussiaIvan Magalhaes UNQUALIFIED
Murillo MaletBrazilAmy Elsner NEW
Aditya KuskoSpainIoni Bowcher NEGOTIATION
Darci PoquetteGermanyAsiya Javayant QUALIFIED
Rodrigues CampainItalyElwin Sharvill QUALIFIED
Misaki RoysterIndiaStephen Shaw UNQUALIFIED
Kaitlin OstroskySpainStephen Shaw QUALIFIED
Munro FerenczJapanIoni Bowcher PROPOSAL
Costa DilliardCanadaAmy Elsner NEGOTIATION
Julie StensethUnited KingdomAmy Elsner PROPOSAL
Julie StensethFranceIoni Bowcher NEGOTIATION
Silvio SlusarskiCanadaElwin Sharvill QUALIFIED
Adams MorascaArgentinaBernardo Dominic RENEWAL
Sinclair WaycottSpainAsiya Javayant PROPOSAL
Arvin AlbaresBrazilIoni Bowcher NEGOTIATION
Tony FollerFranceIvan Magalhaes NEGOTIATION
Kaitlin OstroskyAustraliaStephen Shaw QUALIFIED
Mayumi KolmetzArgentinaElwin Sharvill UNQUALIFIED
Faith GillianJapanElwin Sharvill NEGOTIATION
Jones VocelkaGermanyIvan Magalhaes PROPOSAL
Leon OldroydRussiaStephen Shaw QUALIFIED
Frozen Columns
Name
Maria Marrier
Wickens Nestle
Claire Tollner
Emily Whobrey
Claire Tollner
Salvatore Stockham
Clifford Rim
Antonio Caudy
Costa Dilliard
Leon Oldroyd
Clifford Rim
Emily Whobrey
Sinclair Waycott
Maisha Rulapaugh
Munro Ferencz
Silvio Slusarski
Francesco Shinko
Julie Stenseth
Jeanfrancois Venere
Misaki Royster
Kadeem Flosi
Misaki Royster
Mujtaba Nicka
Misaki Royster
Francesco Shinko
Darci Poquette
Leja Caldarera
Maria Marrier
Costa Dilliard
Francesco Shinko
Rodrigues Campain
Greenwood Bolognia
Aika Inouye
Greenwood Bolognia
Leja Caldarera
Francesco Shinko
Julie Stenseth
Maisha Rulapaugh
Costa Dilliard
Mujtaba Nicka
Aditya Kusko
Francesco Shinko
Emily Whobrey
Kadeem Flosi
Darci Poquette
James Butt
Mayumi Kolmetz
Chavez Briddick
Emily Whobrey
David Darakjy
IdCountryDate
1000United Kingdom2026-05-04
1001India2026-04-12
1002Argentina2026-05-05
1003Brazil2026-04-26
1004Italy2026-04-13
1005United Kingdom2026-04-14
1006Brazil2026-04-28
1007France2026-05-08
1008Germany2026-04-24
1009Canada2026-05-05
1010Canada2026-04-23
1011Russia2026-04-30
1012Argentina2026-04-20
1013Brazil2026-05-08
1014Canada2026-04-20
1015India2026-05-02
1016Argentina2026-05-02
1017United Kingdom2026-04-28
1018Japan2026-05-01
1019India2026-04-26
1020France2026-05-08
1021Spain2026-04-25
1022Australia2026-04-27
1023Argentina2026-04-15
1024Brazil2026-04-17
1025France2026-04-14
1026United Kingdom2026-05-10
1027Russia2026-04-12
1028Argentina2026-04-13
1029France2026-04-15
1030United Kingdom2026-04-23
1031Brazil2026-04-11
1032India2026-04-23
1033United Kingdom2026-04-14
1034Italy2026-04-24
1035Canada2026-04-23
1036France2026-04-29
1037Spain2026-05-10
1038Canada2026-04-21
1039Russia2026-04-16
1040Canada2026-04-19
1041Japan2026-04-21
1042Japan2026-05-08
1043France2026-04-17
1044Australia2026-05-03
1045Brazil2026-04-11
1046Japan2026-04-17
1047Spain2026-05-01
1048France2026-04-15
1049Brazil2026-04-29

On-Demand Data

NameIdCountryDate
Ashley Doe1000France2026-04-21
Misaki Royster1001Italy2026-04-11
Kaitlin Ostrosky1002Japan2026-05-02
Misaki Royster1003Spain2026-05-02
Emily Whobrey1004Germany2026-04-26
Jeanfrancois Venere1005Italy2026-05-07
Jennifer Amigon1006France2026-04-19
Francesco Shinko1007Canada2026-05-06
Izzy Garufi1008Russia2026-05-08
Ricardo Gaucho1009Russia2026-05-08
Jefferson Schemmer1010India2026-05-03
Emily Whobrey1011United Kingdom2026-04-14
David Darakjy1012Germany2026-04-16
Leon Oldroyd1013Argentina2026-04-29
Leon Oldroyd1014France2026-04-11
Jennifer Amigon1015Italy2026-04-22
Jennifer Amigon1016Italy2026-04-17
Ashley Doe1017United Kingdom2026-04-26
Ricardo Gaucho1018Germany2026-04-12
Octavia Malet1019Argentina2026-05-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteSpainIvan Magalhaes QUALIFIED
Clifford RimUnited KingdomXuxue Feng RENEWAL
Ashley DoeJapanAsiya Javayant QUALIFIED
Munro FerenczUnited KingdomOnyama Limba RENEWAL
Jennifer AmigonSpainAnna Fali QUALIFIED
Darci PoquetteIndiaAmy Elsner RENEWAL
Emily WhobreyFranceStephen Shaw NEGOTIATION
Alejandro PerinFranceAmy Elsner NEGOTIATION
Kadeem FlosiJapanAsiya Javayant QUALIFIED
Jennifer AmigonIndiaAmy Elsner PROPOSAL
Aika InouyeCanadaElwin Sharvill RENEWAL
Aika InouyeArgentinaAmy Elsner QUALIFIED
Adams MorascaArgentinaOnyama Limba QUALIFIED
Salvatore StockhamIndiaBernardo Dominic UNQUALIFIED
Jefferson SchemmerArgentinaAsiya Javayant QUALIFIED
Stacey MacleadRussiaAnna Fali RENEWAL
Alejandro PerinGermanyStephen Shaw PROPOSAL
Aika InouyeGermanyAnna Fali UNQUALIFIED
Francesco ShinkoCanadaOnyama Limba NEW
Maria MarrierJapanElwin Sharvill PROPOSAL
Rodrigues CampainJapanStephen Shaw UNQUALIFIED
Cody SaylorsGermanyAnna Fali NEW
Emily WhobreyUnited KingdomAnna Fali RENEWAL
Ricardo GauchoArgentinaAsiya Javayant RENEWAL
Smith GlickSpainAnna Fali PROPOSAL
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Munro FerenczCanadaElwin Sharvill RENEWAL
Jones VocelkaIndiaOnyama Limba NEGOTIATION
Kadeem FlosiGermanyIvan Magalhaes PROPOSAL
Faith GillianArgentinaBernardo Dominic PROPOSAL
Leja CaldareraIndiaBernardo Dominic RENEWAL
Jones VocelkaUnited KingdomElwin Sharvill PROPOSAL
Rodrigues CampainIndiaBernardo Dominic NEGOTIATION
Francesco ShinkoUnited KingdomAsiya Javayant NEGOTIATION
Faith GillianItalyIoni Bowcher RENEWAL
Julie StensethUnited KingdomBernardo Dominic PROPOSAL
Tony FollerCanadaOnyama Limba NEGOTIATION
Deepesh ChuiGermanyIoni Bowcher UNQUALIFIED
Murillo MaletBrazilOnyama Limba QUALIFIED
Ashley DoeBrazilAsiya Javayant NEGOTIATION

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