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 GauchoCanadaAsiya Javayant RENEWAL
David DarakjyFranceIoni Bowcher QUALIFIED
Rodrigues CampainItalyIvan Magalhaes NEGOTIATION
Juan WieserJapanBernardo Dominic UNQUALIFIED
Clifford RimJapanStephen Shaw NEGOTIATION
Cody SaylorsRussiaElwin Sharvill UNQUALIFIED
Deepesh ChuiCanadaXuxue Feng NEGOTIATION
Jennifer AmigonAustraliaBernardo Dominic NEW
James ButtCanadaIvan Magalhaes UNQUALIFIED
Kadeem FlosiCanadaIvan Magalhaes RENEWAL
Smith GlickRussiaAsiya Javayant NEGOTIATION
Maria MarrierIndiaElwin Sharvill NEGOTIATION
Rodrigues CampainRussiaOnyama Limba RENEWAL
Kaitlin OstroskyItalyIoni Bowcher QUALIFIED
Misaki RoysterFranceIvan Magalhaes UNQUALIFIED
Maisha RulapaughSpainAmy Elsner NEW
Maria MarrierItalyIvan Magalhaes RENEWAL
Ashley DoeCanadaXuxue Feng UNQUALIFIED
Cody SaylorsIndiaIvan Magalhaes NEGOTIATION
Wickens NestleItalyIvan Magalhaes NEGOTIATION
Ashley DoeRussiaBernardo Dominic PROPOSAL
Darci PoquetteBrazilXuxue Feng PROPOSAL
Nicolas IturbideUnited KingdomAnna Fali NEW
Deepesh ChuiBrazilAmy Elsner PROPOSAL
Faith GillianGermanyBernardo Dominic QUALIFIED
Claire TollnerIndiaIoni Bowcher QUALIFIED
Darci PoquetteGermanyStephen Shaw PROPOSAL
Arvin AlbaresJapanOnyama Limba PROPOSAL
Adams MorascaFranceStephen Shaw PROPOSAL
Ivar PaprockiArgentinaIoni Bowcher NEW
Jennifer AmigonBrazilAsiya Javayant NEW
Sinclair WaycottBrazilOnyama Limba NEGOTIATION
Ricardo GauchoSpainXuxue Feng QUALIFIED
Johnson SergiUnited KingdomOnyama Limba UNQUALIFIED
Rodrigues CampainUnited KingdomXuxue Feng UNQUALIFIED
Antonio CaudyAustraliaIoni Bowcher NEGOTIATION
Tony FollerCanadaBernardo Dominic NEW
Antonio CaudyArgentinaIvan Magalhaes UNQUALIFIED
Johnson SergiCanadaAmy Elsner NEGOTIATION
Darci PoquetteJapanAmy Elsner RENEWAL
Aruna FigeroaSpainIoni Bowcher NEGOTIATION
Salvatore StockhamArgentinaXuxue Feng NEW
Johnson SergiUnited KingdomBernardo Dominic QUALIFIED
Adams MorascaSpainBernardo Dominic UNQUALIFIED
Wickens NestleAustraliaAnna Fali PROPOSAL
Costa DilliardAustraliaIvan Magalhaes QUALIFIED
Cody SaylorsArgentinaIvan Magalhaes PROPOSAL
Leja CaldareraIndiaBernardo Dominic RENEWAL
Ivar PaprockiBrazilIoni Bowcher RENEWAL
Rodrigues CampainJapanAmy Elsner UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jeanfrancois VenereJapanElwin Sharvill UNQUALIFIED
Francesco ShinkoRussiaBernardo Dominic RENEWAL
Mayumi KolmetzRussiaIoni Bowcher NEW
Octavia MaletSpainIoni Bowcher NEW
Octavia MaletIndiaAnna Fali UNQUALIFIED
Munro FerenczFranceElwin Sharvill NEGOTIATION
Maisha RulapaughBrazilStephen Shaw NEGOTIATION
Jeanfrancois VenereRussiaStephen Shaw NEGOTIATION
Alejandro PerinCanadaXuxue Feng NEGOTIATION
Darci PoquetteArgentinaAmy Elsner PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mayumi KolmetzUnited Kingdom2026-05-04Rangoni Of Florence PROPOSAL38Amy Elsner
1001Sinclair WaycottAustralia2026-04-30Commercial Press NEW55Anna Fali
1002Alejandro PerinUnited Kingdom2026-05-14Chanay, Jeffrey A Esq QUALIFIED90Onyama Limba
1003Salvatore StockhamUnited Kingdom2026-05-05Feltz Printing Service NEGOTIATION19Ivan Magalhaes
1004Maria MarrierRussia2026-05-01Chapman, Ross E Esq PROPOSAL61Ivan Magalhaes
1005Arvin AlbaresFrance2026-04-28Chapman, Ross E Esq PROPOSAL64Elwin Sharvill
1006Mayumi KolmetzAustralia2026-05-05Morlong Associates QUALIFIED17Xuxue Feng
1007Emily WhobreyFrance2026-05-04Chanay, Jeffrey A Esq UNQUALIFIED23Bernardo Dominic
1008Murillo MaletCanada2026-04-18Truhlar And Truhlar Attys QUALIFIED73Ivan Magalhaes
1009Murillo MaletUnited Kingdom2026-04-27Chanay, Jeffrey A Esq UNQUALIFIED36Anna Fali
1010Ricardo GauchoJapan2026-05-10Chapman, Ross E Esq QUALIFIED41Xuxue Feng
1011Julie StensethJapan2026-05-04King, Christopher A Esq QUALIFIED34Stephen Shaw
1012Maisha RulapaughUnited Kingdom2026-05-12Buckley Miller Wright UNQUALIFIED11Bernardo Dominic
1013Greenwood BologniaJapan2026-04-26Truhlar And Truhlar Attys QUALIFIED52Anna Fali
1014Adams MorascaJapan2026-05-09Buckley Miller Wright RENEWAL51Onyama Limba
1015Misaki RoysterIndia2026-05-04Rousseaux, Michael Esq NEGOTIATION95Asiya Javayant
1016Kadeem FlosiFrance2026-05-02King, Christopher A Esq NEW90Xuxue Feng
1017Jennifer AmigonSpain2026-04-29Morlong Associates NEGOTIATION12Asiya Javayant
1018Isabel BowleySpain2026-04-25Dorl, James J Esq NEGOTIATION77Xuxue Feng
1019Wickens NestleCanada2026-04-26Rangoni Of Florence UNQUALIFIED83Anna Fali
1020Greenwood BologniaGermany2026-04-23Buckley Miller Wright PROPOSAL92Onyama Limba
1021David DarakjyAustralia2026-04-26Feiner Bros NEW69Xuxue Feng
1022Antonio CaudyGermany2026-04-26Buckley Miller Wright PROPOSAL11Ivan Magalhaes
1023Mayumi KolmetzArgentina2026-05-15Feiner Bros PROPOSAL45Bernardo Dominic
1024Francesco ShinkoRussia2026-05-07Chapman, Ross E Esq QUALIFIED70Asiya Javayant
1025Maria MarrierIndia2026-05-07King, Christopher A Esq UNQUALIFIED5Stephen Shaw
1026Adams MorascaItaly2026-04-18Buckley Miller Wright NEW95Ivan Magalhaes
1027Jones VocelkaJapan2026-05-04Dorl, James J Esq NEW36Asiya Javayant
1028Ricardo GauchoUnited Kingdom2026-04-26Truhlar And Truhlar Attys UNQUALIFIED18Ioni Bowcher
1029Jennifer AmigonFrance2026-05-01Chapman, Ross E Esq QUALIFIED0Ioni Bowcher
1030Morrow RutaCanada2026-05-09Truhlar And Truhlar Attys PROPOSAL71Onyama Limba
1031Kaitlin OstroskyArgentina2026-04-27Commercial Press UNQUALIFIED52Anna Fali
1032Murillo MaletGermany2026-04-23Morlong Associates NEW77Xuxue Feng
1033Aruna FigeroaBrazil2026-04-16Printing Dimensions NEGOTIATION76Ivan Magalhaes
1034Sinclair WaycottBrazil2026-04-24Truhlar And Truhlar Attys QUALIFIED67Onyama Limba
1035Francesco ShinkoCanada2026-04-19Morlong Associates RENEWAL96Asiya Javayant
1036Kaitlin OstroskyFrance2026-04-23Feltz Printing Service UNQUALIFIED60Amy Elsner
1037Aditya KuskoJapan2026-05-15Commercial Press PROPOSAL95Asiya Javayant
1038Kadeem FlosiJapan2026-04-28Chapman, Ross E Esq PROPOSAL80Ivan Magalhaes
1039Darci PoquetteAustralia2026-04-18Feltz Printing Service NEGOTIATION0Bernardo Dominic
1040Stacey MacleadSpain2026-04-16Chanay, Jeffrey A Esq QUALIFIED33Onyama Limba
1041Sinclair WaycottIndia2026-04-29Rousseaux, Michael Esq QUALIFIED25Ioni Bowcher
1042Costa DilliardItaly2026-04-26Feiner Bros NEGOTIATION32Stephen Shaw
1043Costa DilliardBrazil2026-04-16Chemel, James L Cpa NEGOTIATION7Bernardo Dominic
1044Mayumi KolmetzAustralia2026-04-18Dorl, James J Esq UNQUALIFIED50Stephen Shaw
1045Munro FerenczBrazil2026-05-02Rangoni Of Florence PROPOSAL78Xuxue Feng
1046Mujtaba NickaAustralia2026-05-14Benton, John B Jr NEW12Stephen Shaw
1047Tony FollerIndia2026-04-24Commercial Press PROPOSAL43Bernardo Dominic
1048Smith GlickRussia2026-04-29Chemel, James L Cpa NEGOTIATION79Asiya Javayant
1049Leon OldroydIndia2026-05-04Feltz Printing Service NEGOTIATION25Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonIndiaXuxue Feng RENEWAL
Misaki RoysterSpainOnyama Limba PROPOSAL
Aruna FigeroaArgentinaAsiya Javayant NEW
Darci PoquetteUnited KingdomIoni Bowcher QUALIFIED
Aditya KuskoItalyAsiya Javayant NEGOTIATION
Kaitlin OstroskyFranceOnyama Limba PROPOSAL
Ashley DoeItalyBernardo Dominic NEW
Cody SaylorsUnited KingdomBernardo Dominic RENEWAL
Sinclair WaycottFranceStephen Shaw NEGOTIATION
Julie StensethAustraliaStephen Shaw RENEWAL
Clifford RimJapanXuxue Feng NEGOTIATION
Misaki RoysterFranceOnyama Limba RENEWAL
Mayumi KolmetzIndiaIvan Magalhaes QUALIFIED
Misaki RoysterBrazilOnyama Limba RENEWAL
Adams MorascaFranceElwin Sharvill QUALIFIED
Jones VocelkaItalyElwin Sharvill PROPOSAL
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Munro FerenczGermanyBernardo Dominic RENEWAL
Chavez BriddickUnited KingdomAmy Elsner RENEWAL
Jones VocelkaIndiaAmy Elsner NEGOTIATION
Stacey MacleadCanadaAsiya Javayant NEW
Antonio CaudyBrazilAsiya Javayant PROPOSAL
Deepesh ChuiBrazilOnyama Limba UNQUALIFIED
Emily WhobreyAustraliaAsiya Javayant NEW
Kadeem FlosiArgentinaBernardo Dominic NEW
Deepesh ChuiAustraliaBernardo Dominic UNQUALIFIED
Sinclair WaycottJapanElwin Sharvill NEW
Ricardo GauchoGermanyElwin Sharvill RENEWAL
Isabel BowleyUnited KingdomAnna Fali PROPOSAL
Silvio SlusarskiUnited KingdomAnna Fali RENEWAL
Wickens NestleBrazilAsiya Javayant UNQUALIFIED
Jefferson SchemmerUnited KingdomAsiya Javayant UNQUALIFIED
Sinclair WaycottBrazilIoni Bowcher RENEWAL
Leja CaldareraItalyAnna Fali NEW
Kaitlin OstroskyArgentinaXuxue Feng NEW
Aika InouyeAustraliaElwin Sharvill QUALIFIED
Antonio CaudyItalyIoni Bowcher RENEWAL
Silvio SlusarskiSpainOnyama Limba UNQUALIFIED
Chavez BriddickArgentinaBernardo Dominic PROPOSAL
Rodrigues CampainArgentinaStephen Shaw NEW
Wickens NestleSpainAmy Elsner QUALIFIED
Deepesh ChuiFranceStephen Shaw RENEWAL
David DarakjyIndiaElwin Sharvill QUALIFIED
Antonio CaudyItalyIvan Magalhaes NEGOTIATION
Juan WieserUnited KingdomStephen Shaw NEGOTIATION
David DarakjyJapanXuxue Feng PROPOSAL
Maria MarrierItalyIvan Magalhaes PROPOSAL
Kaitlin OstroskyGermanyIoni Bowcher NEW
Izzy GarufiGermanyAnna Fali PROPOSAL
Mayumi KolmetzArgentinaStephen Shaw QUALIFIED
Frozen Columns
Name
Juan Wieser
Francesco Shinko
Leja Caldarera
Isabel Bowley
Greenwood Bolognia
Stacey Maclead
James Butt
Johnson Sergi
Misaki Royster
Jefferson Schemmer
Clifford Rim
Faith Gillian
Claire Tollner
Kaitlin Ostrosky
Izzy Garufi
Silvio Slusarski
Kaitlin Ostrosky
Arvin Albares
Jones Vocelka
Nicolas Iturbide
Adams Morasca
Jones Vocelka
Costa Dilliard
Aruna Figeroa
Arvin Albares
Salvatore Stockham
Mayumi Kolmetz
Maisha Rulapaugh
Murillo Malet
Leon Oldroyd
Jefferson Schemmer
Maisha Rulapaugh
Jennifer Amigon
Murillo Malet
Darci Poquette
Adams Morasca
Nicolas Iturbide
Ivar Paprocki
Cody Saylors
Arvin Albares
Ashley Doe
Nicolas Iturbide
Jennifer Amigon
Isabel Bowley
Jeanfrancois Venere
Sinclair Waycott
Francesco Shinko
Leon Oldroyd
Jennifer Amigon
Salvatore Stockham
IdCountryDate
1000Spain2026-04-21
1001India2026-04-30
1002Brazil2026-05-01
1003France2026-04-20
1004United Kingdom2026-04-16
1005Canada2026-05-12
1006Russia2026-04-26
1007Canada2026-04-30
1008Argentina2026-05-04
1009India2026-05-02
1010Russia2026-05-08
1011Japan2026-05-08
1012Russia2026-04-25
1013Italy2026-05-13
1014Italy2026-04-29
1015Japan2026-05-14
1016France2026-04-28
1017Spain2026-05-15
1018Italy2026-04-30
1019India2026-05-09
1020Russia2026-04-26
1021United Kingdom2026-04-26
1022Australia2026-05-07
1023India2026-05-05
1024Italy2026-05-14
1025Japan2026-04-30
1026Australia2026-04-29
1027Russia2026-05-14
1028Germany2026-05-04
1029Italy2026-04-20
1030Italy2026-05-05
1031Argentina2026-05-15
1032Germany2026-04-27
1033Australia2026-04-27
1034Italy2026-05-09
1035Australia2026-05-05
1036Germany2026-05-09
1037Italy2026-04-17
1038Canada2026-05-09
1039Brazil2026-04-25
1040Canada2026-05-04
1041Spain2026-05-12
1042France2026-05-07
1043Spain2026-04-28
1044Russia2026-05-10
1045United Kingdom2026-04-23
1046Argentina2026-04-28
1047Argentina2026-04-16
1048Canada2026-05-01
1049Germany2026-04-18

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000Brazil2026-05-06
Aditya Kusko1001Russia2026-04-27
Deepesh Chui1002Canada2026-05-09
Kaitlin Ostrosky1003United Kingdom2026-04-16
Kadeem Flosi1004United Kingdom2026-05-07
Aika Inouye1005Argentina2026-05-12
Kaitlin Ostrosky1006Italy2026-04-23
Wickens Nestle1007Brazil2026-05-08
Costa Dilliard1008India2026-04-27
Ivar Paprocki1009Spain2026-04-21
Octavia Malet1010India2026-04-17
Greenwood Bolognia1011Canada2026-04-19
Clifford Rim1012United Kingdom2026-04-18
James Butt1013United Kingdom2026-04-23
Kaitlin Ostrosky1014Japan2026-04-17
Rodrigues Campain1015France2026-04-19
Isabel Bowley1016United Kingdom2026-05-02
Leja Caldarera1017France2026-04-17
Francesco Shinko1018France2026-04-19
Mayumi Kolmetz1019Australia2026-05-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraGermanyStephen Shaw PROPOSAL
Deepesh ChuiBrazilAnna Fali PROPOSAL
Emily WhobreyGermanyIoni Bowcher PROPOSAL
Maisha RulapaughCanadaAmy Elsner NEW
Clifford RimGermanyXuxue Feng PROPOSAL
Adams MorascaBrazilAnna Fali PROPOSAL
Jeanfrancois VenereAustraliaStephen Shaw NEW
Francesco ShinkoGermanyAsiya Javayant QUALIFIED
Ricardo GauchoAustraliaXuxue Feng QUALIFIED
Darci PoquetteGermanyOnyama Limba NEGOTIATION
Izzy GarufiCanadaXuxue Feng NEW
Misaki RoysterItalyXuxue Feng NEGOTIATION
Ricardo GauchoRussiaStephen Shaw NEGOTIATION
Munro FerenczJapanOnyama Limba PROPOSAL
Rodrigues CampainBrazilAmy Elsner QUALIFIED
Rodrigues CampainRussiaXuxue Feng RENEWAL
Isabel BowleyArgentinaBernardo Dominic QUALIFIED
David DarakjyArgentinaAmy Elsner PROPOSAL
Adams MorascaSpainBernardo Dominic QUALIFIED
Ashley DoeSpainElwin Sharvill UNQUALIFIED
Juan WieserFranceBernardo Dominic NEW
Rodrigues CampainSpainStephen Shaw NEGOTIATION
James ButtArgentinaAsiya Javayant QUALIFIED
Tony FollerRussiaAmy Elsner RENEWAL
Francesco ShinkoJapanOnyama Limba RENEWAL
Misaki RoysterCanadaBernardo Dominic UNQUALIFIED
Izzy GarufiJapanIoni Bowcher RENEWAL
James ButtSpainElwin Sharvill PROPOSAL
Jefferson SchemmerSpainAmy Elsner NEW
Sinclair WaycottBrazilElwin Sharvill PROPOSAL
Wickens NestleUnited KingdomIvan Magalhaes RENEWAL
Darci PoquetteBrazilXuxue Feng QUALIFIED
Isabel BowleyArgentinaXuxue Feng NEGOTIATION
Wickens NestleJapanAnna Fali NEGOTIATION
James ButtCanadaElwin Sharvill NEGOTIATION
Darci PoquetteBrazilAsiya Javayant QUALIFIED
Clifford RimFranceOnyama Limba NEGOTIATION
Greenwood BologniaArgentinaAmy Elsner QUALIFIED
Kadeem FlosiGermanyAnna Fali NEW
Ricardo GauchoItalyXuxue Feng UNQUALIFIED

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