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
Adams MorascaUnited KingdomElwin Sharvill UNQUALIFIED
Jeanfrancois VenereBrazilIvan Magalhaes QUALIFIED
Jennifer AmigonBrazilStephen Shaw RENEWAL
Silvio SlusarskiSpainAnna Fali NEW
David DarakjyRussiaBernardo Dominic NEGOTIATION
Kaitlin OstroskyUnited KingdomBernardo Dominic NEGOTIATION
Alejandro PerinCanadaAnna Fali NEGOTIATION
Murillo MaletUnited KingdomOnyama Limba NEW
Alejandro PerinAustraliaElwin Sharvill QUALIFIED
Misaki RoysterCanadaOnyama Limba QUALIFIED
Smith GlickItalyBernardo Dominic RENEWAL
Murillo MaletGermanyIvan Magalhaes PROPOSAL
Francesco ShinkoAustraliaAmy Elsner NEW
Nicolas IturbideCanadaXuxue Feng NEGOTIATION
Johnson SergiSpainIvan Magalhaes PROPOSAL
Rodrigues CampainGermanyAsiya Javayant RENEWAL
Alejandro PerinIndiaXuxue Feng UNQUALIFIED
Cody SaylorsBrazilBernardo Dominic UNQUALIFIED
Aika InouyeSpainElwin Sharvill UNQUALIFIED
Kadeem FlosiSpainAsiya Javayant NEW
Alejandro PerinIndiaBernardo Dominic PROPOSAL
Jones VocelkaFranceBernardo Dominic NEW
Claire TollnerSpainAnna Fali QUALIFIED
Jones VocelkaUnited KingdomElwin Sharvill QUALIFIED
Adams MorascaCanadaIvan Magalhaes QUALIFIED
Rodrigues CampainJapanIoni Bowcher NEGOTIATION
Mujtaba NickaArgentinaIoni Bowcher NEGOTIATION
Morrow RutaGermanyXuxue Feng UNQUALIFIED
Aditya KuskoGermanyXuxue Feng PROPOSAL
David DarakjyUnited KingdomAmy Elsner QUALIFIED
Deepesh ChuiSpainAmy Elsner NEW
Silvio SlusarskiCanadaAmy Elsner UNQUALIFIED
Clifford RimCanadaIoni Bowcher UNQUALIFIED
Deepesh ChuiSpainAmy Elsner RENEWAL
Juan WieserArgentinaOnyama Limba PROPOSAL
Aika InouyeAustraliaIvan Magalhaes NEGOTIATION
Adams MorascaAustraliaOnyama Limba NEW
Stacey MacleadAustraliaAnna Fali PROPOSAL
Chavez BriddickBrazilIoni Bowcher NEW
James ButtCanadaIvan Magalhaes QUALIFIED
Wickens NestleCanadaOnyama Limba NEW
Kaitlin OstroskyRussiaBernardo Dominic QUALIFIED
Chavez BriddickJapanIvan Magalhaes NEW
Rodrigues CampainGermanyIoni Bowcher PROPOSAL
Aika InouyeFranceAmy Elsner PROPOSAL
Jeanfrancois VenereRussiaIoni Bowcher UNQUALIFIED
Clifford RimIndiaAsiya Javayant UNQUALIFIED
Deepesh ChuiArgentinaIoni Bowcher QUALIFIED
Clifford RimUnited KingdomAnna Fali NEGOTIATION
Leon OldroydArgentinaStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Jones VocelkaUnited KingdomIoni Bowcher NEGOTIATION
Salvatore StockhamGermanyBernardo Dominic PROPOSAL
Tony FollerCanadaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereSpainElwin Sharvill NEGOTIATION
Aditya KuskoArgentinaAsiya Javayant PROPOSAL
Deepesh ChuiRussiaStephen Shaw UNQUALIFIED
Greenwood BologniaSpainIoni Bowcher NEGOTIATION
Nicolas IturbideItalyAmy Elsner PROPOSAL
Antonio CaudyAustraliaIvan Magalhaes PROPOSAL
Francesco ShinkoUnited KingdomOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickArgentina2026-05-10Feltz Printing Service QUALIFIED15Ioni Bowcher
1001Sinclair WaycottArgentina2026-04-29Printing Dimensions PROPOSAL95Anna Fali
1002Jones VocelkaAustralia2026-05-11Chanay, Jeffrey A Esq PROPOSAL33Amy Elsner
1003Ricardo GauchoJapan2026-05-17Dorl, James J Esq NEW71Ivan Magalhaes
1004Kadeem FlosiRussia2026-04-30Feltz Printing Service QUALIFIED82Amy Elsner
1005Ashley DoeIndia2026-05-12Printing Dimensions QUALIFIED45Amy Elsner
1006Murillo MaletBrazil2026-05-03Rangoni Of Florence PROPOSAL59Onyama Limba
1007Sinclair WaycottJapan2026-05-16Feltz Printing Service NEW99Xuxue Feng
1008Jefferson SchemmerIndia2026-05-12Feiner Bros UNQUALIFIED26Stephen Shaw
1009Stacey MacleadAustralia2026-05-13King, Christopher A Esq NEGOTIATION75Elwin Sharvill
1010Morrow RutaBrazil2026-05-12Buckley Miller Wright RENEWAL31Anna Fali
1011Sinclair WaycottCanada2026-05-15Morlong Associates PROPOSAL97Anna Fali
1012Izzy GarufiArgentina2026-04-30Rousseaux, Michael Esq NEGOTIATION56Onyama Limba
1013Aditya KuskoRussia2026-05-21Buckley Miller Wright QUALIFIED7Stephen Shaw
1014Antonio CaudyGermany2026-05-09Rousseaux, Michael Esq RENEWAL11Anna Fali
1015Ricardo GauchoUnited Kingdom2026-05-17Rangoni Of Florence RENEWAL77Elwin Sharvill
1016Julie StensethCanada2026-05-23King, Christopher A Esq PROPOSAL16Asiya Javayant
1017Sinclair WaycottJapan2026-04-26Rousseaux, Michael Esq NEW55Elwin Sharvill
1018Leja CaldareraGermany2026-05-12Chemel, James L Cpa UNQUALIFIED51Ivan Magalhaes
1019Jennifer AmigonRussia2026-05-22Chemel, James L Cpa PROPOSAL59Asiya Javayant
1020Rodrigues CampainUnited Kingdom2026-05-06Benton, John B Jr RENEWAL71Asiya Javayant
1021Clifford RimJapan2026-05-10Chapman, Ross E Esq QUALIFIED19Bernardo Dominic
1022Alejandro PerinUnited Kingdom2026-04-25Rangoni Of Florence NEGOTIATION41Asiya Javayant
1023James ButtFrance2026-05-18Buckley Miller Wright UNQUALIFIED92Xuxue Feng
1024Julie StensethJapan2026-05-18Rousseaux, Michael Esq RENEWAL71Xuxue Feng
1025Johnson SergiJapan2026-05-03Truhlar And Truhlar Attys PROPOSAL72Amy Elsner
1026Rodrigues CampainIndia2026-04-25Morlong Associates NEW45Stephen Shaw
1027Ivar PaprockiSpain2026-05-02Chanay, Jeffrey A Esq UNQUALIFIED35Xuxue Feng
1028Murillo MaletCanada2026-04-30Buckley Miller Wright NEGOTIATION25Elwin Sharvill
1029Claire TollnerItaly2026-05-06Dorl, James J Esq NEGOTIATION49Stephen Shaw
1030Francesco ShinkoRussia2026-05-11Chemel, James L Cpa UNQUALIFIED98Ioni Bowcher
1031Kaitlin OstroskyGermany2026-04-26Benton, John B Jr NEGOTIATION4Xuxue Feng
1032Antonio CaudyJapan2026-05-12Printing Dimensions NEGOTIATION71Asiya Javayant
1033Darci PoquetteUnited Kingdom2026-04-30Rousseaux, Michael Esq QUALIFIED72Stephen Shaw
1034Izzy GarufiCanada2026-05-20Chanay, Jeffrey A Esq NEGOTIATION64Amy Elsner
1035Chavez BriddickUnited Kingdom2026-05-06King, Christopher A Esq NEW0Ioni Bowcher
1036Ivar PaprockiJapan2026-04-30Feiner Bros RENEWAL85Stephen Shaw
1037Ricardo GauchoItaly2026-04-26Rousseaux, Michael Esq RENEWAL46Asiya Javayant
1038James ButtAustralia2026-05-03Chemel, James L Cpa UNQUALIFIED12Amy Elsner
1039Ivar PaprockiAustralia2026-05-16Benton, John B Jr NEGOTIATION74Elwin Sharvill
1040Morrow RutaUnited Kingdom2026-05-01Rousseaux, Michael Esq PROPOSAL72Anna Fali
1041Maisha RulapaughSpain2026-05-03Rousseaux, Michael Esq UNQUALIFIED73Stephen Shaw
1042Chavez BriddickIndia2026-05-06Chanay, Jeffrey A Esq UNQUALIFIED63Amy Elsner
1043Aditya KuskoCanada2026-05-07Feiner Bros PROPOSAL10Ivan Magalhaes
1044Antonio CaudyRussia2026-04-29Buckley Miller Wright RENEWAL81Onyama Limba
1045Kaitlin OstroskyUnited Kingdom2026-05-17Buckley Miller Wright NEW54Asiya Javayant
1046Emily WhobreyCanada2026-05-05Commercial Press NEW0Stephen Shaw
1047Maisha RulapaughUnited Kingdom2026-05-01Dorl, James J Esq PROPOSAL30Xuxue Feng
1048Chavez BriddickAustralia2026-04-30Rangoni Of Florence UNQUALIFIED74Xuxue Feng
1049Claire TollnerSpain2026-05-05Chapman, Ross E Esq NEGOTIATION77Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoCanadaIoni Bowcher RENEWAL
Silvio SlusarskiUnited KingdomBernardo Dominic QUALIFIED
Deepesh ChuiIndiaIoni Bowcher PROPOSAL
Emily WhobreyBrazilAnna Fali NEW
Leon OldroydBrazilXuxue Feng RENEWAL
Aditya KuskoUnited KingdomElwin Sharvill NEW
Izzy GarufiGermanyIoni Bowcher NEGOTIATION
Nicolas IturbideSpainElwin Sharvill UNQUALIFIED
Clifford RimFranceBernardo Dominic RENEWAL
Jennifer AmigonJapanIoni Bowcher RENEWAL
Jefferson SchemmerSpainAmy Elsner NEGOTIATION
Tony FollerGermanyAsiya Javayant QUALIFIED
Maria MarrierSpainXuxue Feng NEGOTIATION
Cody SaylorsCanadaIvan Magalhaes UNQUALIFIED
Faith GillianSpainBernardo Dominic UNQUALIFIED
Clifford RimFranceAmy Elsner NEGOTIATION
Francesco ShinkoFranceAmy Elsner UNQUALIFIED
Smith GlickJapanStephen Shaw PROPOSAL
Aruna FigeroaAustraliaIoni Bowcher RENEWAL
Claire TollnerItalyAsiya Javayant RENEWAL
Aruna FigeroaJapanAnna Fali RENEWAL
Wickens NestleFranceXuxue Feng QUALIFIED
Ivar PaprockiIndiaStephen Shaw PROPOSAL
Ivar PaprockiBrazilIvan Magalhaes NEGOTIATION
Kaitlin OstroskyFranceBernardo Dominic PROPOSAL
Emily WhobreyFranceAmy Elsner NEW
Cody SaylorsSpainElwin Sharvill UNQUALIFIED
Murillo MaletBrazilOnyama Limba NEW
Costa DilliardItalyAmy Elsner UNQUALIFIED
Jefferson SchemmerArgentinaAnna Fali UNQUALIFIED
Greenwood BologniaItalyStephen Shaw QUALIFIED
Jennifer AmigonBrazilBernardo Dominic PROPOSAL
Maisha RulapaughGermanyOnyama Limba NEGOTIATION
Maisha RulapaughJapanStephen Shaw NEW
Leja CaldareraGermanyIoni Bowcher QUALIFIED
Francesco ShinkoItalyAmy Elsner NEW
Ricardo GauchoAustraliaAsiya Javayant PROPOSAL
Juan WieserJapanOnyama Limba NEGOTIATION
Mayumi KolmetzRussiaIoni Bowcher NEW
Munro FerenczSpainElwin Sharvill NEGOTIATION
Nicolas IturbideIndiaAsiya Javayant UNQUALIFIED
Ashley DoeUnited KingdomOnyama Limba NEGOTIATION
Tony FollerItalyBernardo Dominic PROPOSAL
Chavez BriddickUnited KingdomXuxue Feng UNQUALIFIED
Jefferson SchemmerRussiaXuxue Feng NEGOTIATION
Jennifer AmigonArgentinaElwin Sharvill UNQUALIFIED
Maria MarrierAustraliaOnyama Limba PROPOSAL
Cody SaylorsGermanyOnyama Limba RENEWAL
Ricardo GauchoIndiaAsiya Javayant NEGOTIATION
Leon OldroydItalyIoni Bowcher PROPOSAL
Frozen Columns
Name
Morrow Ruta
Mayumi Kolmetz
Jennifer Amigon
Julie Stenseth
Leon Oldroyd
Leon Oldroyd
James Butt
Leon Oldroyd
Kaitlin Ostrosky
Darci Poquette
Wickens Nestle
Claire Tollner
Mayumi Kolmetz
Ivar Paprocki
Aika Inouye
Juan Wieser
Nicolas Iturbide
Arvin Albares
Jefferson Schemmer
Mujtaba Nicka
Sinclair Waycott
Aditya Kusko
Jeanfrancois Venere
Costa Dilliard
Cody Saylors
Johnson Sergi
Antonio Caudy
Johnson Sergi
Jefferson Schemmer
Izzy Garufi
Kadeem Flosi
Isabel Bowley
Sinclair Waycott
Munro Ferencz
Alejandro Perin
Aditya Kusko
David Darakjy
Munro Ferencz
Kaitlin Ostrosky
Julie Stenseth
Salvatore Stockham
Kadeem Flosi
Darci Poquette
Silvio Slusarski
Antonio Caudy
Jefferson Schemmer
Jones Vocelka
Stacey Maclead
Julie Stenseth
Darci Poquette
IdCountryDate
1000Germany2026-05-07
1001Brazil2026-05-20
1002France2026-05-24
1003Australia2026-05-15
1004Russia2026-05-06
1005France2026-05-22
1006Brazil2026-05-19
1007Canada2026-05-18
1008France2026-05-17
1009United Kingdom2026-04-25
1010Australia2026-05-02
1011Italy2026-05-14
1012Italy2026-05-16
1013United Kingdom2026-05-17
1014Germany2026-05-21
1015Argentina2026-05-22
1016Japan2026-05-19
1017India2026-05-08
1018United Kingdom2026-04-30
1019Italy2026-05-13
1020Australia2026-05-05
1021Germany2026-04-30
1022Germany2026-05-18
1023Japan2026-05-10
1024Italy2026-04-29
1025Japan2026-05-18
1026Brazil2026-05-16
1027France2026-04-27
1028Russia2026-05-07
1029Canada2026-05-15
1030Canada2026-05-10
1031Spain2026-05-10
1032Italy2026-04-30
1033Italy2026-05-04
1034Italy2026-05-21
1035Brazil2026-05-21
1036Italy2026-04-25
1037Russia2026-05-21
1038Brazil2026-04-29
1039Japan2026-05-01
1040Australia2026-05-11
1041Canada2026-05-10
1042India2026-05-09
1043Japan2026-04-26
1044Russia2026-05-07
1045Canada2026-05-13
1046Spain2026-05-08
1047India2026-05-17
1048Brazil2026-05-03
1049Germany2026-05-16

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000United Kingdom2026-05-01
Jones Vocelka1001Argentina2026-05-12
Murillo Malet1002France2026-05-20
Adams Morasca1003Italy2026-05-01
Kadeem Flosi1004Germany2026-05-08
Salvatore Stockham1005Spain2026-05-22
Cody Saylors1006United Kingdom2026-05-07
Clifford Rim1007United Kingdom2026-04-27
Mujtaba Nicka1008Brazil2026-05-05
Darci Poquette1009United Kingdom2026-05-07
Antonio Caudy1010India2026-05-06
Murillo Malet1011Japan2026-05-05
Tony Foller1012Australia2026-05-21
Tony Foller1013France2026-05-14
Ashley Doe1014Argentina2026-05-04
Smith Glick1015Brazil2026-04-30
Ashley Doe1016Germany2026-05-14
Salvatore Stockham1017Japan2026-05-07
Murillo Malet1018Brazil2026-05-15
Adams Morasca1019India2026-04-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Adams MorascaUnited KingdomIvan Magalhaes NEGOTIATION
Johnson SergiGermanyIoni Bowcher PROPOSAL
Aditya KuskoUnited KingdomBernardo Dominic UNQUALIFIED
Smith GlickGermanyAnna Fali PROPOSAL
Morrow RutaCanadaIvan Magalhaes PROPOSAL
David DarakjyFranceIoni Bowcher PROPOSAL
Smith GlickGermanyElwin Sharvill UNQUALIFIED
Izzy GarufiSpainIvan Magalhaes PROPOSAL
Rodrigues CampainIndiaIoni Bowcher PROPOSAL
Juan WieserUnited KingdomOnyama Limba NEGOTIATION
Mujtaba NickaArgentinaElwin Sharvill NEW
Morrow RutaJapanElwin Sharvill NEW
Francesco ShinkoJapanAsiya Javayant NEGOTIATION
Chavez BriddickAustraliaOnyama Limba PROPOSAL
Rodrigues CampainItalyStephen Shaw QUALIFIED
Clifford RimItalyAmy Elsner PROPOSAL
Deepesh ChuiArgentinaBernardo Dominic NEW
Murillo MaletCanadaBernardo Dominic RENEWAL
Jefferson SchemmerBrazilStephen Shaw PROPOSAL
Maria MarrierCanadaAmy Elsner UNQUALIFIED
Aditya KuskoFranceOnyama Limba NEGOTIATION
Darci PoquetteRussiaAsiya Javayant QUALIFIED
Wickens NestleSpainBernardo Dominic NEGOTIATION
Jeanfrancois VenereItalyXuxue Feng UNQUALIFIED
Maisha RulapaughItalyXuxue Feng UNQUALIFIED
Jefferson SchemmerSpainIvan Magalhaes UNQUALIFIED
Murillo MaletBrazilIvan Magalhaes UNQUALIFIED
Maria MarrierAustraliaIoni Bowcher PROPOSAL
Mujtaba NickaArgentinaOnyama Limba UNQUALIFIED
Kadeem FlosiCanadaIoni Bowcher PROPOSAL
James ButtJapanAmy Elsner UNQUALIFIED
Aditya KuskoBrazilXuxue Feng QUALIFIED
Arvin AlbaresJapanBernardo Dominic PROPOSAL
Ivar PaprockiAustraliaAsiya Javayant NEW
Jeanfrancois VenereFranceElwin Sharvill QUALIFIED
Sinclair WaycottArgentinaXuxue Feng NEGOTIATION
Murillo MaletUnited KingdomXuxue Feng QUALIFIED
Aditya KuskoItalyIvan Magalhaes PROPOSAL
Murillo MaletArgentinaStephen Shaw QUALIFIED
Clifford RimItalyIvan Magalhaes QUALIFIED

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