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
Greenwood BologniaItalyAsiya Javayant RENEWAL
Juan WieserRussiaIoni Bowcher UNQUALIFIED
Silvio SlusarskiCanadaAnna Fali NEGOTIATION
Emily WhobreyGermanyElwin Sharvill RENEWAL
Salvatore StockhamItalyAmy Elsner UNQUALIFIED
Nicolas IturbideBrazilAsiya Javayant RENEWAL
Nicolas IturbideRussiaIoni Bowcher NEGOTIATION
Antonio CaudyRussiaXuxue Feng RENEWAL
Ashley DoeUnited KingdomStephen Shaw PROPOSAL
Murillo MaletUnited KingdomElwin Sharvill NEW
Johnson SergiUnited KingdomAsiya Javayant PROPOSAL
Greenwood BologniaArgentinaIvan Magalhaes RENEWAL
Smith GlickItalyAnna Fali RENEWAL
Francesco ShinkoRussiaIvan Magalhaes NEW
Juan WieserItalyBernardo Dominic PROPOSAL
David DarakjyJapanOnyama Limba UNQUALIFIED
Munro FerenczArgentinaAsiya Javayant RENEWAL
Octavia MaletBrazilStephen Shaw PROPOSAL
Greenwood BologniaCanadaBernardo Dominic PROPOSAL
Alejandro PerinUnited KingdomAmy Elsner UNQUALIFIED
Kaitlin OstroskyArgentinaIoni Bowcher NEGOTIATION
Greenwood BologniaSpainIoni Bowcher NEGOTIATION
Isabel BowleyRussiaStephen Shaw NEW
Francesco ShinkoArgentinaElwin Sharvill NEW
Maria MarrierGermanyIoni Bowcher UNQUALIFIED
Costa DilliardRussiaIoni Bowcher NEGOTIATION
Munro FerenczFranceIvan Magalhaes NEGOTIATION
Ashley DoeArgentinaStephen Shaw QUALIFIED
Aruna FigeroaArgentinaIoni Bowcher NEW
Murillo MaletGermanyAnna Fali RENEWAL
Julie StensethGermanyAmy Elsner RENEWAL
Kadeem FlosiArgentinaIvan Magalhaes RENEWAL
Jeanfrancois VenereAustraliaIoni Bowcher UNQUALIFIED
Julie StensethRussiaElwin Sharvill PROPOSAL
Leja CaldareraUnited KingdomIvan Magalhaes RENEWAL
Aruna FigeroaRussiaIvan Magalhaes UNQUALIFIED
Sinclair WaycottRussiaElwin Sharvill PROPOSAL
Morrow RutaCanadaAnna Fali QUALIFIED
Kadeem FlosiSpainOnyama Limba NEGOTIATION
Juan WieserRussiaIoni Bowcher RENEWAL
David DarakjyRussiaIvan Magalhaes QUALIFIED
Ricardo GauchoBrazilStephen Shaw UNQUALIFIED
Sinclair WaycottUnited KingdomBernardo Dominic QUALIFIED
Deepesh ChuiItalyStephen Shaw NEW
Octavia MaletBrazilAsiya Javayant QUALIFIED
Maria MarrierCanadaXuxue Feng PROPOSAL
Aika InouyeFranceOnyama Limba UNQUALIFIED
Misaki RoysterItalyOnyama Limba QUALIFIED
Chavez BriddickAustraliaAnna Fali UNQUALIFIED
Aika InouyeSpainOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyIndiaBernardo Dominic RENEWAL
Nicolas IturbideJapanOnyama Limba NEW
Faith GillianBrazilAnna Fali UNQUALIFIED
Salvatore StockhamAustraliaAmy Elsner NEW
Morrow RutaIndiaElwin Sharvill NEGOTIATION
Leja CaldareraAustraliaElwin Sharvill NEGOTIATION
Ashley DoeBrazilAmy Elsner RENEWAL
Octavia MaletJapanIoni Bowcher NEGOTIATION
Costa DilliardIndiaOnyama Limba NEGOTIATION
Juan WieserSpainIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaFrance2026-05-02Chanay, Jeffrey A Esq PROPOSAL66Asiya Javayant
1001Jones VocelkaCanada2026-05-19Printing Dimensions QUALIFIED35Stephen Shaw
1002Isabel BowleyIndia2026-04-28Truhlar And Truhlar Attys NEGOTIATION66Stephen Shaw
1003Leon OldroydBrazil2026-05-12Feltz Printing Service UNQUALIFIED34Anna Fali
1004Misaki RoysterArgentina2026-05-26Benton, John B Jr RENEWAL34Ioni Bowcher
1005Wickens NestleCanada2026-05-07Feiner Bros NEW88Ivan Magalhaes
1006Francesco ShinkoSpain2026-05-25Commercial Press UNQUALIFIED98Elwin Sharvill
1007Johnson SergiItaly2026-05-02Truhlar And Truhlar Attys RENEWAL61Amy Elsner
1008Maisha RulapaughBrazil2026-05-07Buckley Miller Wright UNQUALIFIED14Asiya Javayant
1009Isabel BowleySpain2026-05-15Rangoni Of Florence NEGOTIATION92Onyama Limba
1010Mayumi KolmetzSpain2026-05-16Morlong Associates PROPOSAL38Ivan Magalhaes
1011Juan WieserBrazil2026-05-03Feiner Bros UNQUALIFIED85Stephen Shaw
1012Johnson SergiCanada2026-05-26Chemel, James L Cpa PROPOSAL45Anna Fali
1013Antonio CaudyArgentina2026-05-03Benton, John B Jr QUALIFIED90Elwin Sharvill
1014Emily WhobreyUnited Kingdom2026-04-30Chapman, Ross E Esq PROPOSAL1Anna Fali
1015Murillo MaletItaly2026-05-20Rangoni Of Florence RENEWAL53Amy Elsner
1016Silvio SlusarskiIndia2026-05-07Chapman, Ross E Esq QUALIFIED37Xuxue Feng
1017Ivar PaprockiGermany2026-04-27Chemel, James L Cpa RENEWAL34Elwin Sharvill
1018Darci PoquetteIndia2026-05-07Morlong Associates NEGOTIATION86Anna Fali
1019Stacey MacleadFrance2026-05-16King, Christopher A Esq PROPOSAL12Elwin Sharvill
1020Johnson SergiFrance2026-05-10Dorl, James J Esq QUALIFIED36Stephen Shaw
1021Aditya KuskoRussia2026-04-29Benton, John B Jr RENEWAL83Elwin Sharvill
1022Alejandro PerinFrance2026-05-07Chapman, Ross E Esq QUALIFIED0Amy Elsner
1023James ButtItaly2026-05-25Rousseaux, Michael Esq QUALIFIED69Bernardo Dominic
1024Kaitlin OstroskyBrazil2026-05-14Commercial Press NEGOTIATION7Stephen Shaw
1025Juan WieserFrance2026-05-18Commercial Press PROPOSAL20Asiya Javayant
1026Rodrigues CampainCanada2026-05-15Dorl, James J Esq NEW5Asiya Javayant
1027Emily WhobreyIndia2026-05-01Rangoni Of Florence UNQUALIFIED92Elwin Sharvill
1028Maria MarrierUnited Kingdom2026-05-17Chapman, Ross E Esq NEGOTIATION85Xuxue Feng
1029David DarakjyUnited Kingdom2026-05-26Rousseaux, Michael Esq RENEWAL95Elwin Sharvill
1030Izzy GarufiArgentina2026-05-08Rangoni Of Florence PROPOSAL21Bernardo Dominic
1031Rodrigues CampainJapan2026-05-02Truhlar And Truhlar Attys NEW78Ivan Magalhaes
1032Octavia MaletItaly2026-05-14Dorl, James J Esq UNQUALIFIED82Ivan Magalhaes
1033Ashley DoeSpain2026-05-09Chemel, James L Cpa UNQUALIFIED48Xuxue Feng
1034Clifford RimGermany2026-05-25Chemel, James L Cpa NEGOTIATION91Asiya Javayant
1035Nicolas IturbideIndia2026-05-18Truhlar And Truhlar Attys UNQUALIFIED88Amy Elsner
1036Misaki RoysterBrazil2026-05-15Feiner Bros RENEWAL85Bernardo Dominic
1037Nicolas IturbideItaly2026-04-30Morlong Associates UNQUALIFIED47Amy Elsner
1038Jennifer AmigonSpain2026-04-27Chanay, Jeffrey A Esq PROPOSAL21Xuxue Feng
1039Jones VocelkaIndia2026-05-03Rousseaux, Michael Esq NEGOTIATION87Anna Fali
1040Johnson SergiUnited Kingdom2026-05-19Feiner Bros QUALIFIED25Anna Fali
1041Munro FerenczCanada2026-05-05Chanay, Jeffrey A Esq UNQUALIFIED44Anna Fali
1042Isabel BowleyFrance2026-05-09Truhlar And Truhlar Attys NEGOTIATION45Asiya Javayant
1043Stacey MacleadRussia2026-05-13Morlong Associates RENEWAL46Xuxue Feng
1044Morrow RutaRussia2026-05-25Rangoni Of Florence UNQUALIFIED53Elwin Sharvill
1045Murillo MaletRussia2026-04-28Chemel, James L Cpa NEGOTIATION64Anna Fali
1046Claire TollnerSpain2026-05-01Chanay, Jeffrey A Esq UNQUALIFIED24Xuxue Feng
1047Kaitlin OstroskyItaly2026-04-28Chapman, Ross E Esq PROPOSAL30Asiya Javayant
1048Kaitlin OstroskyIndia2026-05-15Chanay, Jeffrey A Esq NEW1Elwin Sharvill
1049Murillo MaletBrazil2026-05-09Chanay, Jeffrey A Esq NEGOTIATION11Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Francesco ShinkoIndiaAmy Elsner RENEWAL
Nicolas IturbideIndiaBernardo Dominic PROPOSAL
Stacey MacleadFranceAnna Fali NEW
Ivar PaprockiIndiaXuxue Feng PROPOSAL
Ivar PaprockiJapanOnyama Limba UNQUALIFIED
Kaitlin OstroskyJapanOnyama Limba RENEWAL
Francesco ShinkoBrazilAmy Elsner PROPOSAL
Kadeem FlosiGermanyXuxue Feng NEGOTIATION
Maria MarrierCanadaOnyama Limba QUALIFIED
Jeanfrancois VenereArgentinaAsiya Javayant NEGOTIATION
Morrow RutaArgentinaIoni Bowcher QUALIFIED
Silvio SlusarskiFranceAsiya Javayant PROPOSAL
Chavez BriddickAustraliaIvan Magalhaes UNQUALIFIED
Maria MarrierGermanyIoni Bowcher NEGOTIATION
Izzy GarufiJapanXuxue Feng NEW
Munro FerenczRussiaAsiya Javayant NEW
Mujtaba NickaItalyAsiya Javayant NEW
James ButtUnited KingdomIvan Magalhaes PROPOSAL
Darci PoquetteItalyStephen Shaw UNQUALIFIED
Aditya KuskoGermanyAmy Elsner QUALIFIED
Morrow RutaCanadaAmy Elsner NEW
David DarakjyFranceIoni Bowcher UNQUALIFIED
Deepesh ChuiCanadaIvan Magalhaes RENEWAL
Murillo MaletItalyElwin Sharvill QUALIFIED
Morrow RutaIndiaAnna Fali RENEWAL
James ButtAustraliaElwin Sharvill UNQUALIFIED
Isabel BowleyArgentinaIvan Magalhaes QUALIFIED
Ashley DoeJapanBernardo Dominic PROPOSAL
Munro FerenczGermanyOnyama Limba PROPOSAL
Rodrigues CampainBrazilElwin Sharvill NEGOTIATION
Emily WhobreyArgentinaElwin Sharvill NEGOTIATION
Ivar PaprockiBrazilStephen Shaw QUALIFIED
Maisha RulapaughFranceAnna Fali QUALIFIED
Faith GillianItalyAsiya Javayant PROPOSAL
Deepesh ChuiRussiaAmy Elsner NEGOTIATION
Jones VocelkaAustraliaElwin Sharvill QUALIFIED
Misaki RoysterIndiaElwin Sharvill RENEWAL
Nicolas IturbideSpainOnyama Limba NEGOTIATION
Greenwood BologniaJapanAmy Elsner UNQUALIFIED
Wickens NestleJapanAsiya Javayant NEGOTIATION
Faith GillianArgentinaAsiya Javayant NEGOTIATION
Octavia MaletCanadaOnyama Limba PROPOSAL
Aika InouyeUnited KingdomStephen Shaw NEW
Izzy GarufiCanadaElwin Sharvill QUALIFIED
Murillo MaletFranceAmy Elsner PROPOSAL
Cody SaylorsRussiaElwin Sharvill NEW
Kaitlin OstroskyGermanyOnyama Limba UNQUALIFIED
Ashley DoeAustraliaStephen Shaw PROPOSAL
Alejandro PerinGermanyOnyama Limba RENEWAL
Misaki RoysterArgentinaAsiya Javayant NEW
Frozen Columns
Name
Clifford Rim
Greenwood Bolognia
James Butt
Wickens Nestle
Jefferson Schemmer
Jefferson Schemmer
Morrow Ruta
Jennifer Amigon
Rodrigues Campain
Ivar Paprocki
Ashley Doe
David Darakjy
Munro Ferencz
Mujtaba Nicka
Izzy Garufi
Misaki Royster
Darci Poquette
Antonio Caudy
Johnson Sergi
Tony Foller
Salvatore Stockham
Greenwood Bolognia
Greenwood Bolognia
Kaitlin Ostrosky
Leon Oldroyd
Ricardo Gaucho
David Darakjy
Antonio Caudy
Costa Dilliard
Darci Poquette
Jones Vocelka
Leja Caldarera
Aruna Figeroa
Deepesh Chui
Jones Vocelka
Antonio Caudy
Costa Dilliard
Cody Saylors
Stacey Maclead
Aruna Figeroa
Ashley Doe
Isabel Bowley
Aika Inouye
Salvatore Stockham
Emily Whobrey
Alejandro Perin
Mujtaba Nicka
Ricardo Gaucho
Sinclair Waycott
Maria Marrier
IdCountryDate
1000United Kingdom2026-05-11
1001Argentina2026-05-18
1002Germany2026-05-11
1003Russia2026-05-19
1004Italy2026-05-23
1005Russia2026-05-26
1006Brazil2026-05-13
1007India2026-05-20
1008Russia2026-05-16
1009Russia2026-05-05
1010Japan2026-05-20
1011United Kingdom2026-05-26
1012Australia2026-04-29
1013India2026-05-07
1014France2026-05-08
1015Germany2026-05-02
1016Brazil2026-05-09
1017Argentina2026-05-25
1018Australia2026-05-22
1019Australia2026-05-23
1020Russia2026-05-26
1021Japan2026-05-23
1022Spain2026-05-23
1023Canada2026-05-01
1024Russia2026-05-24
1025Russia2026-05-22
1026Russia2026-05-14
1027Spain2026-05-23
1028India2026-05-25
1029Russia2026-05-19
1030France2026-05-20
1031United Kingdom2026-05-18
1032India2026-05-19
1033Italy2026-05-14
1034Russia2026-05-23
1035Russia2026-05-13
1036Russia2026-04-30
1037Canada2026-05-14
1038Australia2026-05-23
1039Russia2026-05-23
1040Italy2026-05-02
1041Spain2026-05-07
1042Brazil2026-04-28
1043Canada2026-05-23
1044Japan2026-05-22
1045Italy2026-05-07
1046France2026-05-22
1047India2026-05-05
1048Italy2026-04-27
1049Russia2026-05-19

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000Canada2026-05-24
Antonio Caudy1001Germany2026-05-02
Misaki Royster1002United Kingdom2026-05-25
Munro Ferencz1003Brazil2026-05-20
Johnson Sergi1004Argentina2026-05-22
Claire Tollner1005Canada2026-05-12
Johnson Sergi1006France2026-05-15
Jeanfrancois Venere1007Germany2026-04-30
Maria Marrier1008Australia2026-05-16
Misaki Royster1009United Kingdom2026-05-07
Rodrigues Campain1010Japan2026-05-02
Arvin Albares1011United Kingdom2026-05-04
Jennifer Amigon1012Germany2026-05-13
Jones Vocelka1013Japan2026-05-16
Stacey Maclead1014Canada2026-05-14
Francesco Shinko1015Argentina2026-04-28
Misaki Royster1016United Kingdom2026-05-02
Wickens Nestle1017Argentina2026-05-08
Darci Poquette1018India2026-05-26
Misaki Royster1019France2026-05-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleySpainBernardo Dominic PROPOSAL
Greenwood BologniaSpainBernardo Dominic NEW
Murillo MaletRussiaXuxue Feng RENEWAL
Jones VocelkaSpainStephen Shaw NEW
Faith GillianSpainAsiya Javayant RENEWAL
Leon OldroydFranceIvan Magalhaes PROPOSAL
Greenwood BologniaUnited KingdomIoni Bowcher RENEWAL
Octavia MaletAustraliaIoni Bowcher PROPOSAL
Chavez BriddickBrazilIoni Bowcher NEW
Mujtaba NickaUnited KingdomAsiya Javayant NEGOTIATION
Sinclair WaycottRussiaAsiya Javayant PROPOSAL
Wickens NestleUnited KingdomElwin Sharvill UNQUALIFIED
Aika InouyeCanadaAnna Fali NEW
Antonio CaudyRussiaAsiya Javayant RENEWAL
Tony FollerIndiaAnna Fali UNQUALIFIED
Rodrigues CampainFranceAmy Elsner PROPOSAL
Emily WhobreyGermanyAnna Fali RENEWAL
Leon OldroydGermanyIoni Bowcher NEW
Julie StensethJapanStephen Shaw PROPOSAL
Aditya KuskoIndiaIoni Bowcher UNQUALIFIED
Isabel BowleyArgentinaElwin Sharvill QUALIFIED
Octavia MaletUnited KingdomBernardo Dominic RENEWAL
Maisha RulapaughIndiaAmy Elsner NEGOTIATION
Murillo MaletSpainIoni Bowcher PROPOSAL
Kadeem FlosiItalyOnyama Limba QUALIFIED
David DarakjyRussiaAsiya Javayant RENEWAL
Jennifer AmigonIndiaXuxue Feng QUALIFIED
Ashley DoeAustraliaElwin Sharvill NEGOTIATION
Kadeem FlosiUnited KingdomAmy Elsner RENEWAL
Jeanfrancois VenereArgentinaAsiya Javayant UNQUALIFIED
David DarakjyJapanAmy Elsner PROPOSAL
Costa DilliardSpainAsiya Javayant NEW
Jennifer AmigonBrazilElwin Sharvill RENEWAL
Juan WieserSpainAnna Fali NEGOTIATION
Aditya KuskoItalyAmy Elsner NEGOTIATION
Sinclair WaycottAustraliaOnyama Limba NEW
Kadeem FlosiIndiaAmy Elsner QUALIFIED
Jeanfrancois VenereFranceAmy Elsner NEW
Aditya KuskoCanadaElwin Sharvill QUALIFIED
Mayumi KolmetzAustraliaElwin Sharvill NEW

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