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
Francesco ShinkoItalyBernardo Dominic NEGOTIATION
Isabel BowleyFranceXuxue Feng PROPOSAL
Juan WieserArgentinaElwin Sharvill RENEWAL
Leon OldroydGermanyStephen Shaw RENEWAL
Misaki RoysterArgentinaOnyama Limba NEW
Aruna FigeroaIndiaXuxue Feng PROPOSAL
Salvatore StockhamGermanyStephen Shaw NEW
Stacey MacleadItalyIvan Magalhaes RENEWAL
Isabel BowleyArgentinaElwin Sharvill PROPOSAL
Clifford RimIndiaOnyama Limba NEW
Aditya KuskoJapanBernardo Dominic NEW
Alejandro PerinItalyAsiya Javayant QUALIFIED
Rodrigues CampainItalyElwin Sharvill UNQUALIFIED
Ivar PaprockiIndiaAnna Fali NEGOTIATION
Cody SaylorsArgentinaBernardo Dominic NEGOTIATION
Kadeem FlosiItalyStephen Shaw PROPOSAL
Antonio CaudyArgentinaXuxue Feng NEW
David DarakjyArgentinaAmy Elsner UNQUALIFIED
Nicolas IturbideGermanyIoni Bowcher PROPOSAL
Rodrigues CampainRussiaOnyama Limba PROPOSAL
Darci PoquetteFranceStephen Shaw NEW
Sinclair WaycottUnited KingdomAmy Elsner RENEWAL
Isabel BowleyArgentinaElwin Sharvill QUALIFIED
Faith GillianRussiaIvan Magalhaes NEGOTIATION
Rodrigues CampainUnited KingdomAsiya Javayant NEGOTIATION
Francesco ShinkoItalyOnyama Limba NEW
Rodrigues CampainFranceXuxue Feng QUALIFIED
Costa DilliardRussiaElwin Sharvill UNQUALIFIED
Ashley DoeIndiaAmy Elsner RENEWAL
Mujtaba NickaRussiaOnyama Limba PROPOSAL
Kadeem FlosiFranceAsiya Javayant QUALIFIED
Arvin AlbaresSpainIvan Magalhaes PROPOSAL
Aika InouyeIndiaAnna Fali NEW
Murillo MaletRussiaAsiya Javayant QUALIFIED
Silvio SlusarskiAustraliaOnyama Limba RENEWAL
Wickens NestleJapanBernardo Dominic UNQUALIFIED
Clifford RimIndiaAmy Elsner QUALIFIED
Sinclair WaycottArgentinaIvan Magalhaes QUALIFIED
Silvio SlusarskiCanadaXuxue Feng QUALIFIED
Aruna FigeroaGermanyAsiya Javayant PROPOSAL
James ButtSpainAnna Fali NEGOTIATION
Darci PoquetteRussiaAsiya Javayant UNQUALIFIED
Leja CaldareraJapanIvan Magalhaes PROPOSAL
Darci PoquetteUnited KingdomAsiya Javayant RENEWAL
Greenwood BologniaBrazilIoni Bowcher UNQUALIFIED
Greenwood BologniaBrazilElwin Sharvill NEGOTIATION
Kadeem FlosiFranceXuxue Feng PROPOSAL
Tony FollerIndiaElwin Sharvill NEGOTIATION
Jennifer AmigonArgentinaIvan Magalhaes QUALIFIED
Jennifer AmigonIndiaOnyama Limba RENEWAL
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaArgentinaOnyama Limba UNQUALIFIED
Nicolas IturbideUnited KingdomIoni Bowcher RENEWAL
Aika InouyeArgentinaXuxue Feng RENEWAL
Julie StensethCanadaIoni Bowcher PROPOSAL
Julie StensethItalyStephen Shaw QUALIFIED
Jefferson SchemmerItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinUnited KingdomAnna Fali RENEWAL
Arvin AlbaresItalyAsiya Javayant NEW
Costa DilliardFranceIoni Bowcher RENEWAL
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Emily WhobreyIndia2026-04-17Commercial Press RENEWAL70Ioni Bowcher
1001Chavez BriddickItaly2026-05-03Feltz Printing Service QUALIFIED92Amy Elsner
1002Kaitlin OstroskySpain2026-04-15Morlong Associates UNQUALIFIED73Elwin Sharvill
1003Alejandro PerinArgentina2026-04-13Printing Dimensions UNQUALIFIED58Stephen Shaw
1004Francesco ShinkoItaly2026-04-24Benton, John B Jr RENEWAL71Ioni Bowcher
1005Aditya KuskoFrance2026-04-21Commercial Press PROPOSAL85Anna Fali
1006Octavia MaletCanada2026-04-25Benton, John B Jr QUALIFIED15Stephen Shaw
1007Ivar PaprockiAustralia2026-04-25Chapman, Ross E Esq PROPOSAL30Ivan Magalhaes
1008Ivar PaprockiBrazil2026-05-06Chapman, Ross E Esq RENEWAL72Anna Fali
1009Maria MarrierGermany2026-05-02King, Christopher A Esq UNQUALIFIED62Elwin Sharvill
1010Murillo MaletFrance2026-04-27Buckley Miller Wright QUALIFIED83Onyama Limba
1011Izzy GarufiItaly2026-04-25Benton, John B Jr PROPOSAL38Asiya Javayant
1012Greenwood BologniaUnited Kingdom2026-04-27Rousseaux, Michael Esq PROPOSAL26Asiya Javayant
1013Julie StensethArgentina2026-04-22King, Christopher A Esq NEW97Onyama Limba
1014Arvin AlbaresUnited Kingdom2026-04-21Buckley Miller Wright QUALIFIED71Ivan Magalhaes
1015Misaki RoysterJapan2026-04-17Benton, John B Jr QUALIFIED54Anna Fali
1016Sinclair WaycottRussia2026-05-03Chapman, Ross E Esq NEGOTIATION60Bernardo Dominic
1017Deepesh ChuiJapan2026-05-03Buckley Miller Wright PROPOSAL76Ioni Bowcher
1018Chavez BriddickFrance2026-05-06Truhlar And Truhlar Attys NEGOTIATION21Bernardo Dominic
1019Greenwood BologniaRussia2026-04-22Commercial Press UNQUALIFIED9Bernardo Dominic
1020Clifford RimArgentina2026-05-10Buckley Miller Wright UNQUALIFIED87Anna Fali
1021Jones VocelkaArgentina2026-05-06Rangoni Of Florence NEGOTIATION64Bernardo Dominic
1022Silvio SlusarskiGermany2026-04-13Feltz Printing Service NEGOTIATION92Onyama Limba
1023Aruna FigeroaSpain2026-05-03Feiner Bros PROPOSAL24Elwin Sharvill
1024Francesco ShinkoCanada2026-04-14Chapman, Ross E Esq UNQUALIFIED36Ioni Bowcher
1025Kadeem FlosiRussia2026-05-03Truhlar And Truhlar Attys RENEWAL30Stephen Shaw
1026Jefferson SchemmerSpain2026-05-05Truhlar And Truhlar Attys UNQUALIFIED53Bernardo Dominic
1027Greenwood BologniaAustralia2026-05-01Buckley Miller Wright NEW74Amy Elsner
1028Morrow RutaIndia2026-05-03Commercial Press QUALIFIED18Asiya Javayant
1029Leja CaldareraUnited Kingdom2026-04-21Truhlar And Truhlar Attys UNQUALIFIED13Ivan Magalhaes
1030Ivar PaprockiCanada2026-04-24Morlong Associates NEGOTIATION51Bernardo Dominic
1031Juan WieserAustralia2026-04-30Chanay, Jeffrey A Esq QUALIFIED16Ioni Bowcher
1032Maisha RulapaughBrazil2026-04-30Chanay, Jeffrey A Esq NEW12Anna Fali
1033Francesco ShinkoGermany2026-04-23Rangoni Of Florence QUALIFIED21Ivan Magalhaes
1034Emily WhobreyBrazil2026-04-14Feltz Printing Service UNQUALIFIED99Anna Fali
1035Mujtaba NickaIndia2026-04-30Buckley Miller Wright UNQUALIFIED41Bernardo Dominic
1036Greenwood BologniaIndia2026-05-08Benton, John B Jr PROPOSAL45Elwin Sharvill
1037Ricardo GauchoSpain2026-04-16Chemel, James L Cpa RENEWAL48Amy Elsner
1038Francesco ShinkoUnited Kingdom2026-05-11Chapman, Ross E Esq UNQUALIFIED2Elwin Sharvill
1039Sinclair WaycottItaly2026-05-04Benton, John B Jr QUALIFIED11Stephen Shaw
1040Darci PoquetteRussia2026-04-16Buckley Miller Wright NEW63Stephen Shaw
1041Ricardo GauchoIndia2026-04-24Dorl, James J Esq QUALIFIED78Amy Elsner
1042Aika InouyeGermany2026-04-13Chanay, Jeffrey A Esq UNQUALIFIED8Xuxue Feng
1043Tony FollerGermany2026-05-08Chapman, Ross E Esq PROPOSAL51Ioni Bowcher
1044Darci PoquetteSpain2026-04-23Rangoni Of Florence PROPOSAL40Bernardo Dominic
1045Ricardo GauchoItaly2026-04-25Commercial Press PROPOSAL54Anna Fali
1046Emily WhobreyBrazil2026-05-03Dorl, James J Esq NEGOTIATION59Elwin Sharvill
1047David DarakjyGermany2026-05-10Rousseaux, Michael Esq PROPOSAL71Bernardo Dominic
1048Jennifer AmigonSpain2026-04-20Morlong Associates NEW57Stephen Shaw
1049Deepesh ChuiAustralia2026-04-12Rousseaux, Michael Esq QUALIFIED97Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Claire TollnerUnited KingdomOnyama Limba PROPOSAL
Sinclair WaycottJapanStephen Shaw NEGOTIATION
Mujtaba NickaFranceOnyama Limba QUALIFIED
Jeanfrancois VenereIndiaOnyama Limba NEW
Octavia MaletJapanXuxue Feng NEGOTIATION
Maisha RulapaughUnited KingdomIoni Bowcher NEW
Izzy GarufiItalyAsiya Javayant NEGOTIATION
Darci PoquetteGermanyOnyama Limba UNQUALIFIED
Maria MarrierRussiaIoni Bowcher QUALIFIED
Ashley DoeSpainOnyama Limba PROPOSAL
Francesco ShinkoSpainIoni Bowcher RENEWAL
Rodrigues CampainGermanyAnna Fali NEW
Julie StensethGermanyIoni Bowcher UNQUALIFIED
Murillo MaletIndiaAmy Elsner UNQUALIFIED
Leja CaldareraAustraliaAnna Fali NEGOTIATION
Isabel BowleyBrazilIoni Bowcher NEW
Costa DilliardArgentinaStephen Shaw UNQUALIFIED
Munro FerenczUnited KingdomStephen Shaw NEW
Jones VocelkaRussiaAnna Fali RENEWAL
Greenwood BologniaRussiaStephen Shaw NEGOTIATION
Mayumi KolmetzCanadaElwin Sharvill NEGOTIATION
Murillo MaletAustraliaAsiya Javayant PROPOSAL
Chavez BriddickAustraliaAmy Elsner NEGOTIATION
Chavez BriddickIndiaAnna Fali QUALIFIED
Aika InouyeAustraliaXuxue Feng NEW
Kadeem FlosiCanadaStephen Shaw QUALIFIED
Smith GlickCanadaXuxue Feng NEW
Morrow RutaFranceAnna Fali UNQUALIFIED
Silvio SlusarskiUnited KingdomIoni Bowcher RENEWAL
Julie StensethIndiaBernardo Dominic QUALIFIED
Juan WieserArgentinaAmy Elsner NEW
Claire TollnerArgentinaAnna Fali NEW
Claire TollnerUnited KingdomAsiya Javayant UNQUALIFIED
Greenwood BologniaAustraliaAsiya Javayant NEGOTIATION
Cody SaylorsUnited KingdomAsiya Javayant NEW
Leja CaldareraGermanyAmy Elsner NEGOTIATION
James ButtBrazilAmy Elsner NEGOTIATION
Mayumi KolmetzFranceXuxue Feng UNQUALIFIED
David DarakjyArgentinaElwin Sharvill NEW
Ricardo GauchoArgentinaStephen Shaw PROPOSAL
Morrow RutaCanadaOnyama Limba UNQUALIFIED
Costa DilliardItalyAsiya Javayant PROPOSAL
Morrow RutaSpainAmy Elsner RENEWAL
Ricardo GauchoGermanyAsiya Javayant RENEWAL
Juan WieserBrazilBernardo Dominic UNQUALIFIED
Cody SaylorsFranceOnyama Limba UNQUALIFIED
Darci PoquetteFranceAsiya Javayant NEGOTIATION
Ivar PaprockiArgentinaBernardo Dominic QUALIFIED
Izzy GarufiBrazilIoni Bowcher UNQUALIFIED
Ivar PaprockiAustraliaStephen Shaw QUALIFIED
Frozen Columns
Name
David Darakjy
Isabel Bowley
Murillo Malet
Munro Ferencz
James Butt
Ashley Doe
Izzy Garufi
Mayumi Kolmetz
Chavez Briddick
Ivar Paprocki
Octavia Malet
Mujtaba Nicka
Munro Ferencz
Costa Dilliard
Mayumi Kolmetz
Maisha Rulapaugh
Izzy Garufi
Ashley Doe
Arvin Albares
Jefferson Schemmer
Cody Saylors
Costa Dilliard
Leja Caldarera
Octavia Malet
Wickens Nestle
Claire Tollner
Ricardo Gaucho
Ashley Doe
Silvio Slusarski
David Darakjy
Jefferson Schemmer
Juan Wieser
Francesco Shinko
Julie Stenseth
Arvin Albares
Kaitlin Ostrosky
Claire Tollner
Leon Oldroyd
Maria Marrier
Nicolas Iturbide
Faith Gillian
Maisha Rulapaugh
Leon Oldroyd
Ashley Doe
Deepesh Chui
Faith Gillian
Claire Tollner
Alejandro Perin
Isabel Bowley
Jennifer Amigon
IdCountryDate
1000France2026-04-25
1001Brazil2026-05-11
1002Argentina2026-04-20
1003France2026-04-14
1004United Kingdom2026-05-09
1005Japan2026-05-07
1006Spain2026-04-17
1007Brazil2026-04-17
1008Italy2026-04-13
1009Brazil2026-05-03
1010United Kingdom2026-04-23
1011United Kingdom2026-04-12
1012Japan2026-04-24
1013Japan2026-04-27
1014France2026-04-17
1015Australia2026-05-06
1016Brazil2026-04-30
1017Spain2026-04-25
1018Canada2026-04-30
1019Italy2026-05-09
1020Japan2026-05-02
1021United Kingdom2026-04-19
1022India2026-04-27
1023Spain2026-05-03
1024Argentina2026-04-27
1025Spain2026-05-09
1026Italy2026-04-26
1027Spain2026-04-20
1028Italy2026-04-29
1029United Kingdom2026-04-19
1030Spain2026-05-02
1031Russia2026-05-05
1032Germany2026-04-16
1033Brazil2026-04-14
1034Italy2026-05-08
1035Germany2026-04-17
1036India2026-05-03
1037France2026-04-23
1038Argentina2026-05-04
1039Italy2026-04-14
1040Spain2026-04-20
1041Italy2026-04-22
1042Australia2026-04-15
1043Argentina2026-05-04
1044Germany2026-04-28
1045Italy2026-04-25
1046Australia2026-04-29
1047Russia2026-04-13
1048Argentina2026-04-30
1049Canada2026-05-06

On-Demand Data

NameIdCountryDate
Costa Dilliard1000Australia2026-05-02
Smith Glick1001Canada2026-05-07
Mujtaba Nicka1002Australia2026-04-26
Chavez Briddick1003United Kingdom2026-04-30
Murillo Malet1004Russia2026-04-22
Greenwood Bolognia1005Canada2026-04-15
Aruna Figeroa1006Argentina2026-05-01
Nicolas Iturbide1007Germany2026-05-06
Leon Oldroyd1008Argentina2026-05-07
Arvin Albares1009Canada2026-04-21
Aditya Kusko1010Japan2026-04-16
Juan Wieser1011France2026-05-11
Clifford Rim1012United Kingdom2026-04-22
Kadeem Flosi1013France2026-05-07
Francesco Shinko1014Canada2026-04-17
Alejandro Perin1015France2026-05-07
Chavez Briddick1016Germany2026-04-25
Claire Tollner1017Canada2026-04-21
Nicolas Iturbide1018United Kingdom2026-04-26
Johnson Sergi1019Spain2026-04-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraCanadaXuxue Feng NEW
Rodrigues CampainJapanAnna Fali NEGOTIATION
Tony FollerAustraliaStephen Shaw PROPOSAL
Adams MorascaRussiaAsiya Javayant PROPOSAL
Mujtaba NickaFranceAmy Elsner UNQUALIFIED
Aruna FigeroaArgentinaOnyama Limba NEW
Stacey MacleadCanadaAmy Elsner PROPOSAL
Murillo MaletJapanAsiya Javayant QUALIFIED
Salvatore StockhamSpainStephen Shaw PROPOSAL
David DarakjyIndiaStephen Shaw RENEWAL
Alejandro PerinBrazilIoni Bowcher NEW
Silvio SlusarskiGermanyIoni Bowcher RENEWAL
Johnson SergiItalyAmy Elsner RENEWAL
James ButtArgentinaElwin Sharvill NEGOTIATION
Francesco ShinkoRussiaXuxue Feng QUALIFIED
Jennifer AmigonFranceIoni Bowcher NEGOTIATION
Murillo MaletCanadaBernardo Dominic PROPOSAL
Clifford RimJapanAmy Elsner NEW
Tony FollerItalyAsiya Javayant RENEWAL
Octavia MaletItalyElwin Sharvill UNQUALIFIED
Greenwood BologniaAustraliaAsiya Javayant NEGOTIATION
David DarakjyArgentinaOnyama Limba NEW
Emily WhobreyCanadaStephen Shaw NEGOTIATION
Johnson SergiIndiaIvan Magalhaes RENEWAL
Mayumi KolmetzArgentinaAmy Elsner QUALIFIED
Izzy GarufiSpainBernardo Dominic RENEWAL
Jones VocelkaRussiaOnyama Limba NEW
Wickens NestleAustraliaAmy Elsner QUALIFIED
Kaitlin OstroskyArgentinaAnna Fali NEW
Octavia MaletBrazilAsiya Javayant NEW
Leja CaldareraJapanBernardo Dominic QUALIFIED
Rodrigues CampainCanadaStephen Shaw NEGOTIATION
Jefferson SchemmerJapanAmy Elsner PROPOSAL
Aruna FigeroaFranceAnna Fali PROPOSAL
Leja CaldareraItalyStephen Shaw NEGOTIATION
Kaitlin OstroskyBrazilIoni Bowcher NEW
Ivar PaprockiUnited KingdomIoni Bowcher PROPOSAL
Aika InouyeRussiaStephen Shaw RENEWAL
Wickens NestleBrazilElwin Sharvill PROPOSAL
Deepesh ChuiFranceXuxue Feng 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>