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
Ricardo GauchoItalyAmy Elsner QUALIFIED
Aika InouyeItalyIvan Magalhaes PROPOSAL
Alejandro PerinArgentinaIvan Magalhaes NEGOTIATION
Antonio CaudyGermanyOnyama Limba UNQUALIFIED
Greenwood BologniaFranceAmy Elsner NEW
David DarakjyRussiaAmy Elsner RENEWAL
Leja CaldareraIndiaBernardo Dominic NEGOTIATION
David DarakjyIndiaStephen Shaw NEGOTIATION
Chavez BriddickJapanIvan Magalhaes QUALIFIED
Salvatore StockhamArgentinaElwin Sharvill NEW
Greenwood BologniaAustraliaElwin Sharvill PROPOSAL
Greenwood BologniaItalyElwin Sharvill NEW
Munro FerenczArgentinaAmy Elsner PROPOSAL
Aditya KuskoFranceAsiya Javayant NEW
Leja CaldareraGermanyBernardo Dominic QUALIFIED
Julie StensethSpainIvan Magalhaes PROPOSAL
Octavia MaletItalyElwin Sharvill PROPOSAL
Smith GlickRussiaAnna Fali NEW
Maisha RulapaughBrazilAmy Elsner PROPOSAL
Silvio SlusarskiArgentinaOnyama Limba PROPOSAL
Kaitlin OstroskyArgentinaAmy Elsner QUALIFIED
Francesco ShinkoFranceBernardo Dominic QUALIFIED
Clifford RimFranceElwin Sharvill PROPOSAL
Tony FollerFranceXuxue Feng UNQUALIFIED
Mujtaba NickaGermanyBernardo Dominic UNQUALIFIED
Jennifer AmigonCanadaIvan Magalhaes RENEWAL
Maisha RulapaughArgentinaElwin Sharvill QUALIFIED
Izzy GarufiArgentinaAmy Elsner UNQUALIFIED
Costa DilliardCanadaStephen Shaw RENEWAL
Cody SaylorsGermanyXuxue Feng NEGOTIATION
Nicolas IturbideAustraliaXuxue Feng QUALIFIED
Silvio SlusarskiCanadaAmy Elsner PROPOSAL
Murillo MaletAustraliaBernardo Dominic UNQUALIFIED
Nicolas IturbideFranceAsiya Javayant UNQUALIFIED
Deepesh ChuiItalyAmy Elsner QUALIFIED
Nicolas IturbideGermanyIoni Bowcher NEGOTIATION
Rodrigues CampainRussiaIoni Bowcher PROPOSAL
Cody SaylorsSpainAmy Elsner NEGOTIATION
Emily WhobreyArgentinaAsiya Javayant NEGOTIATION
Ivar PaprockiJapanStephen Shaw PROPOSAL
Costa DilliardJapanStephen Shaw UNQUALIFIED
Maria MarrierAustraliaIvan Magalhaes QUALIFIED
Murillo MaletRussiaXuxue Feng UNQUALIFIED
Chavez BriddickRussiaOnyama Limba UNQUALIFIED
Misaki RoysterGermanyElwin Sharvill UNQUALIFIED
Clifford RimRussiaXuxue Feng PROPOSAL
Costa DilliardArgentinaAsiya Javayant UNQUALIFIED
Izzy GarufiIndiaIvan Magalhaes UNQUALIFIED
Aruna FigeroaIndiaElwin Sharvill NEGOTIATION
Rodrigues CampainIndiaAsiya Javayant NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Faith GillianItalyAsiya Javayant NEW
Morrow RutaAustraliaAsiya Javayant QUALIFIED
Johnson SergiGermanyIvan Magalhaes NEW
Tony FollerCanadaIvan Magalhaes NEW
Clifford RimRussiaXuxue Feng NEGOTIATION
Emily WhobreyCanadaOnyama Limba PROPOSAL
Izzy GarufiUnited KingdomAsiya Javayant QUALIFIED
Sinclair WaycottAustraliaOnyama Limba RENEWAL
Kadeem FlosiIndiaIoni Bowcher UNQUALIFIED
Leja CaldareraItalyXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyCanada2025-08-15Morlong Associates RENEWAL8Ioni Bowcher
1001Ricardo GauchoItaly2025-09-05King, Christopher A Esq NEW44Stephen Shaw
1002Isabel BowleyIndia2025-08-19Buckley Miller Wright UNQUALIFIED12Amy Elsner
1003Morrow RutaAustralia2025-09-04Feltz Printing Service UNQUALIFIED79Stephen Shaw
1004David DarakjyIndia2025-08-17Rousseaux, Michael Esq RENEWAL44Elwin Sharvill
1005Izzy GarufiRussia2025-08-11Chanay, Jeffrey A Esq UNQUALIFIED47Anna Fali
1006Munro FerenczCanada2025-08-15King, Christopher A Esq NEGOTIATION39Anna Fali
1007Mayumi KolmetzBrazil2025-09-05Buckley Miller Wright QUALIFIED3Asiya Javayant
1008Misaki RoysterItaly2025-08-24Feiner Bros QUALIFIED99Onyama Limba
1009Nicolas IturbideItaly2025-08-13Morlong Associates RENEWAL85Amy Elsner
1010Ivar PaprockiFrance2025-08-31Printing Dimensions RENEWAL73Onyama Limba
1011Rodrigues CampainFrance2025-08-15Rousseaux, Michael Esq PROPOSAL50Ivan Magalhaes
1012Julie StensethIndia2025-08-27Chapman, Ross E Esq PROPOSAL5Ioni Bowcher
1013Clifford RimUnited Kingdom2025-08-24Dorl, James J Esq NEGOTIATION94Ioni Bowcher
1014Jones VocelkaSpain2025-08-27King, Christopher A Esq NEGOTIATION45Xuxue Feng
1015Kaitlin OstroskyBrazil2025-08-19Truhlar And Truhlar Attys UNQUALIFIED49Ioni Bowcher
1016Francesco ShinkoItaly2025-08-20Printing Dimensions NEGOTIATION19Bernardo Dominic
1017Costa DilliardJapan2025-09-04Feiner Bros RENEWAL6Elwin Sharvill
1018Costa DilliardBrazil2025-08-22Feiner Bros QUALIFIED89Asiya Javayant
1019Tony FollerCanada2025-09-05Morlong Associates NEW64Ioni Bowcher
1020Octavia MaletIndia2025-08-12Buckley Miller Wright PROPOSAL65Anna Fali
1021Mujtaba NickaAustralia2025-08-17Dorl, James J Esq NEGOTIATION69Anna Fali
1022Nicolas IturbideArgentina2025-08-16Truhlar And Truhlar Attys RENEWAL90Stephen Shaw
1023Maria MarrierFrance2025-08-19Feltz Printing Service PROPOSAL7Asiya Javayant
1024Rodrigues CampainAustralia2025-08-17Feiner Bros NEW54Ioni Bowcher
1025Isabel BowleySpain2025-09-05Truhlar And Truhlar Attys NEGOTIATION69Anna Fali
1026Ashley DoeFrance2025-08-24Dorl, James J Esq UNQUALIFIED86Xuxue Feng
1027Leon OldroydIndia2025-08-16Buckley Miller Wright QUALIFIED20Elwin Sharvill
1028Darci PoquetteItaly2025-09-02Dorl, James J Esq UNQUALIFIED84Anna Fali
1029Mayumi KolmetzUnited Kingdom2025-09-09Morlong Associates PROPOSAL37Asiya Javayant
1030Jennifer AmigonJapan2025-08-23Benton, John B Jr QUALIFIED87Anna Fali
1031Morrow RutaIndia2025-09-07Dorl, James J Esq UNQUALIFIED90Ivan Magalhaes
1032Costa DilliardCanada2025-09-06King, Christopher A Esq QUALIFIED35Ioni Bowcher
1033Jeanfrancois VenereUnited Kingdom2025-08-16King, Christopher A Esq NEGOTIATION5Onyama Limba
1034Murillo MaletJapan2025-08-19Chanay, Jeffrey A Esq NEW63Onyama Limba
1035Jennifer AmigonItaly2025-08-20Commercial Press RENEWAL42Asiya Javayant
1036Faith GillianRussia2025-08-14Buckley Miller Wright NEGOTIATION16Ioni Bowcher
1037Mujtaba NickaItaly2025-09-01Printing Dimensions PROPOSAL85Bernardo Dominic
1038Wickens NestleGermany2025-08-28Buckley Miller Wright NEGOTIATION41Amy Elsner
1039Stacey MacleadJapan2025-09-03Chanay, Jeffrey A Esq PROPOSAL74Stephen Shaw
1040Murillo MaletRussia2025-08-24Rousseaux, Michael Esq NEW82Ioni Bowcher
1041Clifford RimGermany2025-08-13Dorl, James J Esq UNQUALIFIED61Ivan Magalhaes
1042Leja CaldareraItaly2025-09-01Morlong Associates RENEWAL62Ivan Magalhaes
1043Alejandro PerinArgentina2025-09-07Buckley Miller Wright RENEWAL64Xuxue Feng
1044Alejandro PerinCanada2025-08-29Morlong Associates RENEWAL82Asiya Javayant
1045Jennifer AmigonBrazil2025-08-28Chemel, James L Cpa UNQUALIFIED39Ivan Magalhaes
1046Clifford RimSpain2025-09-04Morlong Associates PROPOSAL87Ioni Bowcher
1047Misaki RoysterFrance2025-09-07Truhlar And Truhlar Attys UNQUALIFIED8Stephen Shaw
1048Morrow RutaItaly2025-08-24Feiner Bros NEGOTIATION69Ioni Bowcher
1049Murillo MaletItaly2025-09-01Buckley Miller Wright RENEWAL1Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Julie StensethAustraliaAmy Elsner QUALIFIED
Costa DilliardIndiaAmy Elsner RENEWAL
Costa DilliardCanadaElwin Sharvill UNQUALIFIED
Morrow RutaItalyAmy Elsner UNQUALIFIED
Octavia MaletBrazilXuxue Feng RENEWAL
Jennifer AmigonGermanyXuxue Feng UNQUALIFIED
Salvatore StockhamSpainOnyama Limba NEGOTIATION
Darci PoquetteSpainIvan Magalhaes NEGOTIATION
Leja CaldareraFranceIvan Magalhaes NEW
Jones VocelkaUnited KingdomOnyama Limba QUALIFIED
Mayumi KolmetzGermanyBernardo Dominic RENEWAL
Mayumi KolmetzAustraliaIvan Magalhaes NEW
Morrow RutaBrazilElwin Sharvill UNQUALIFIED
Salvatore StockhamGermanyIoni Bowcher NEW
Morrow RutaBrazilElwin Sharvill UNQUALIFIED
Ashley DoeFranceAsiya Javayant NEW
Morrow RutaArgentinaStephen Shaw NEGOTIATION
Jeanfrancois VenereJapanXuxue Feng QUALIFIED
Kaitlin OstroskyFranceIvan Magalhaes RENEWAL
Murillo MaletUnited KingdomIoni Bowcher QUALIFIED
Aruna FigeroaFranceXuxue Feng UNQUALIFIED
Aika InouyeUnited KingdomAsiya Javayant PROPOSAL
Murillo MaletArgentinaIvan Magalhaes NEGOTIATION
Antonio CaudyJapanBernardo Dominic UNQUALIFIED
Jefferson SchemmerAustraliaBernardo Dominic NEGOTIATION
Clifford RimUnited KingdomIoni Bowcher NEGOTIATION
Aika InouyeUnited KingdomBernardo Dominic PROPOSAL
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Alejandro PerinSpainBernardo Dominic RENEWAL
Adams MorascaRussiaAmy Elsner RENEWAL
Francesco ShinkoGermanyAsiya Javayant NEW
Tony FollerBrazilAmy Elsner UNQUALIFIED
Salvatore StockhamBrazilElwin Sharvill NEGOTIATION
Aditya KuskoItalyIoni Bowcher UNQUALIFIED
Ivar PaprockiUnited KingdomAnna Fali PROPOSAL
Juan WieserAustraliaIoni Bowcher RENEWAL
Claire TollnerBrazilIoni Bowcher QUALIFIED
Cody SaylorsJapanAsiya Javayant RENEWAL
Munro FerenczIndiaBernardo Dominic QUALIFIED
Rodrigues CampainItalyAsiya Javayant NEGOTIATION
Emily WhobreyGermanyXuxue Feng NEGOTIATION
Ashley DoeRussiaElwin Sharvill NEW
Ivar PaprockiJapanIvan Magalhaes NEW
Leon OldroydUnited KingdomOnyama Limba RENEWAL
Stacey MacleadCanadaXuxue Feng PROPOSAL
Arvin AlbaresRussiaIvan Magalhaes RENEWAL
Leon OldroydAustraliaAmy Elsner QUALIFIED
Aika InouyeAustraliaElwin Sharvill UNQUALIFIED
Leja CaldareraJapanStephen Shaw UNQUALIFIED
Julie StensethBrazilIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Antonio Caudy
Murillo Malet
Deepesh Chui
Deepesh Chui
Nicolas Iturbide
Octavia Malet
Darci Poquette
Mayumi Kolmetz
Mayumi Kolmetz
Johnson Sergi
Salvatore Stockham
Jennifer Amigon
Julie Stenseth
Maisha Rulapaugh
Maria Marrier
Ashley Doe
Mayumi Kolmetz
Darci Poquette
Nicolas Iturbide
Kadeem Flosi
Deepesh Chui
Faith Gillian
Octavia Malet
Aruna Figeroa
Ashley Doe
Faith Gillian
Ricardo Gaucho
Tony Foller
Jennifer Amigon
Kaitlin Ostrosky
Isabel Bowley
Deepesh Chui
Rodrigues Campain
Sinclair Waycott
Greenwood Bolognia
Stacey Maclead
Murillo Malet
Antonio Caudy
Kadeem Flosi
Aruna Figeroa
Kaitlin Ostrosky
Aditya Kusko
Munro Ferencz
Maisha Rulapaugh
Juan Wieser
Isabel Bowley
Salvatore Stockham
Ashley Doe
Silvio Slusarski
Chavez Briddick
IdCountryDate
1000France2025-08-24
1001Germany2025-09-04
1002Japan2025-09-06
1003Canada2025-08-24
1004Argentina2025-09-04
1005France2025-08-17
1006Russia2025-08-23
1007Spain2025-08-30
1008Canada2025-08-14
1009United Kingdom2025-08-18
1010Italy2025-08-17
1011India2025-08-20
1012Japan2025-08-12
1013Argentina2025-09-05
1014Germany2025-08-26
1015Japan2025-08-23
1016Australia2025-08-15
1017India2025-08-26
1018Italy2025-09-06
1019India2025-08-20
1020Spain2025-08-26
1021Argentina2025-08-14
1022Japan2025-08-12
1023Argentina2025-08-25
1024Canada2025-08-15
1025Australia2025-08-24
1026Japan2025-09-06
1027Australia2025-08-17
1028Argentina2025-08-13
1029Russia2025-08-30
1030Australia2025-08-15
1031France2025-09-03
1032Japan2025-08-31
1033Canada2025-08-29
1034Italy2025-08-16
1035Germany2025-09-07
1036United Kingdom2025-09-06
1037Spain2025-08-14
1038Brazil2025-09-09
1039Spain2025-08-26
1040Canada2025-08-28
1041Russia2025-09-07
1042Spain2025-09-08
1043France2025-08-30
1044India2025-08-21
1045Italy2025-08-21
1046Japan2025-08-26
1047Argentina2025-08-17
1048India2025-08-29
1049Russia2025-08-23

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Italy2025-08-29
Stacey Maclead1001Italy2025-08-16
Isabel Bowley1002Canada2025-08-23
Kadeem Flosi1003Argentina2025-08-12
Wickens Nestle1004France2025-09-07
Octavia Malet1005Russia2025-09-04
Maria Marrier1006Australia2025-09-04
Adams Morasca1007Germany2025-08-30
Smith Glick1008France2025-08-12
Mujtaba Nicka1009India2025-08-13
Sinclair Waycott1010Canada2025-09-08
Stacey Maclead1011Japan2025-08-11
Morrow Ruta1012Brazil2025-08-29
Alejandro Perin1013Canada2025-08-16
Murillo Malet1014Argentina2025-08-20
Antonio Caudy1015Italy2025-09-07
Aika Inouye1016Russia2025-08-31
Alejandro Perin1017Argentina2025-08-18
David Darakjy1018France2025-08-16
Wickens Nestle1019France2025-08-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraArgentinaIoni Bowcher RENEWAL
Jones VocelkaBrazilIvan Magalhaes UNQUALIFIED
Maria MarrierJapanAmy Elsner QUALIFIED
Faith GillianArgentinaIoni Bowcher NEGOTIATION
Nicolas IturbideFranceAnna Fali NEGOTIATION
Kaitlin OstroskyFranceIvan Magalhaes PROPOSAL
Maria MarrierArgentinaStephen Shaw RENEWAL
Costa DilliardFranceIoni Bowcher NEGOTIATION
Mujtaba NickaBrazilOnyama Limba QUALIFIED
Costa DilliardSpainXuxue Feng PROPOSAL
Sinclair WaycottFranceStephen Shaw UNQUALIFIED
Costa DilliardRussiaXuxue Feng QUALIFIED
Sinclair WaycottFranceXuxue Feng UNQUALIFIED
Munro FerenczArgentinaAsiya Javayant UNQUALIFIED
Aruna FigeroaFranceIvan Magalhaes PROPOSAL
Darci PoquetteGermanyXuxue Feng UNQUALIFIED
Alejandro PerinUnited KingdomIvan Magalhaes NEGOTIATION
Ricardo GauchoArgentinaIoni Bowcher QUALIFIED
Mujtaba NickaArgentinaAnna Fali QUALIFIED
Maria MarrierAustraliaAmy Elsner QUALIFIED
Julie StensethGermanyBernardo Dominic PROPOSAL
Maria MarrierItalyStephen Shaw NEW
Ricardo GauchoArgentinaBernardo Dominic UNQUALIFIED
Rodrigues CampainRussiaXuxue Feng UNQUALIFIED
Isabel BowleyFranceIvan Magalhaes QUALIFIED
Ivar PaprockiAustraliaElwin Sharvill NEW
Jefferson SchemmerArgentinaElwin Sharvill RENEWAL
Jeanfrancois VenereSpainAsiya Javayant NEGOTIATION
Arvin AlbaresIndiaAnna Fali RENEWAL
Francesco ShinkoRussiaBernardo Dominic RENEWAL
Darci PoquetteAustraliaAsiya Javayant NEW
Silvio SlusarskiGermanyXuxue Feng UNQUALIFIED
David DarakjyIndiaAnna Fali PROPOSAL
Misaki RoysterGermanyIvan Magalhaes QUALIFIED
Izzy GarufiItalyBernardo Dominic UNQUALIFIED
Isabel BowleyFranceIoni Bowcher NEGOTIATION
Chavez BriddickRussiaXuxue Feng QUALIFIED
Arvin AlbaresArgentinaAmy Elsner QUALIFIED
Octavia MaletIndiaAnna Fali PROPOSAL
Stacey MacleadUnited KingdomAsiya 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>