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
Jones VocelkaRussiaAsiya Javayant NEGOTIATION
Ivar PaprockiJapanIvan Magalhaes NEGOTIATION
Smith GlickGermanyStephen Shaw NEGOTIATION
Tony FollerGermanyAsiya Javayant NEW
Francesco ShinkoGermanyAsiya Javayant NEW
Aruna FigeroaJapanBernardo Dominic PROPOSAL
Stacey MacleadCanadaOnyama Limba PROPOSAL
Smith GlickIndiaBernardo Dominic NEW
Johnson SergiUnited KingdomIvan Magalhaes PROPOSAL
Claire TollnerUnited KingdomBernardo Dominic NEGOTIATION
Francesco ShinkoRussiaIvan Magalhaes PROPOSAL
Silvio SlusarskiGermanyAnna Fali QUALIFIED
Tony FollerFranceAsiya Javayant UNQUALIFIED
Aditya KuskoItalyElwin Sharvill UNQUALIFIED
Faith GillianJapanAnna Fali PROPOSAL
Jefferson SchemmerFranceIoni Bowcher NEGOTIATION
Morrow RutaItalyElwin Sharvill PROPOSAL
Izzy GarufiArgentinaAmy Elsner NEW
Faith GillianSpainXuxue Feng UNQUALIFIED
Silvio SlusarskiUnited KingdomOnyama Limba UNQUALIFIED
Leja CaldareraSpainIoni Bowcher PROPOSAL
Misaki RoysterGermanyStephen Shaw NEW
Ricardo GauchoSpainAsiya Javayant UNQUALIFIED
Jefferson SchemmerCanadaXuxue Feng NEGOTIATION
David DarakjyGermanyOnyama Limba PROPOSAL
Murillo MaletArgentinaIvan Magalhaes RENEWAL
Tony FollerFranceBernardo Dominic UNQUALIFIED
Mayumi KolmetzCanadaBernardo Dominic RENEWAL
Aika InouyeGermanyAnna Fali PROPOSAL
Juan WieserAustraliaAnna Fali UNQUALIFIED
Arvin AlbaresJapanAmy Elsner NEW
Cody SaylorsRussiaBernardo Dominic PROPOSAL
Aika InouyeFranceXuxue Feng RENEWAL
Maria MarrierIndiaBernardo Dominic UNQUALIFIED
Izzy GarufiFranceAnna Fali NEGOTIATION
Izzy GarufiCanadaXuxue Feng NEGOTIATION
Leon OldroydGermanyElwin Sharvill NEW
Morrow RutaCanadaXuxue Feng PROPOSAL
David DarakjyIndiaXuxue Feng UNQUALIFIED
Jefferson SchemmerRussiaStephen Shaw RENEWAL
Mayumi KolmetzBrazilStephen Shaw NEGOTIATION
Arvin AlbaresItalyAmy Elsner UNQUALIFIED
Aditya KuskoArgentinaAnna Fali NEGOTIATION
Aruna FigeroaItalyXuxue Feng PROPOSAL
Misaki RoysterIndiaBernardo Dominic RENEWAL
Izzy GarufiSpainElwin Sharvill QUALIFIED
Ivar PaprockiGermanyAsiya Javayant NEGOTIATION
Adams MorascaUnited KingdomIvan Magalhaes QUALIFIED
Mayumi KolmetzJapanElwin Sharvill NEW
Alejandro PerinIndiaStephen Shaw RENEWAL
Horizontal
NameCountryRepresentativeStatus
Cody SaylorsCanadaStephen Shaw NEW
Tony FollerJapanXuxue Feng RENEWAL
Salvatore StockhamBrazilStephen Shaw RENEWAL
Jennifer AmigonJapanStephen Shaw QUALIFIED
Antonio CaudyIndiaAsiya Javayant PROPOSAL
Misaki RoysterAustraliaIvan Magalhaes PROPOSAL
Tony FollerItalyOnyama Limba UNQUALIFIED
Deepesh ChuiGermanyOnyama Limba QUALIFIED
Morrow RutaAustraliaIoni Bowcher PROPOSAL
Morrow RutaBrazilIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Johnson SergiBrazil2026-05-14Chapman, Ross E Esq RENEWAL56Stephen Shaw
1001James ButtFrance2026-06-06Rangoni Of Florence QUALIFIED13Stephen Shaw
1002Jones VocelkaCanada2026-05-12Feiner Bros RENEWAL24Elwin Sharvill
1003Wickens NestleUnited Kingdom2026-05-28Rangoni Of Florence RENEWAL41Onyama Limba
1004Costa DilliardBrazil2026-05-29Printing Dimensions NEGOTIATION33Anna Fali
1005James ButtJapan2026-05-22Chapman, Ross E Esq NEGOTIATION54Amy Elsner
1006Leja CaldareraAustralia2026-06-06King, Christopher A Esq UNQUALIFIED68Onyama Limba
1007Francesco ShinkoJapan2026-06-03Benton, John B Jr QUALIFIED48Onyama Limba
1008Ricardo GauchoGermany2026-06-10Feltz Printing Service RENEWAL92Stephen Shaw
1009Maria MarrierIndia2026-06-10Feiner Bros PROPOSAL28Asiya Javayant
1010Kaitlin OstroskyArgentina2026-06-04Chemel, James L Cpa UNQUALIFIED67Amy Elsner
1011Mujtaba NickaItaly2026-05-22Chapman, Ross E Esq NEW69Ioni Bowcher
1012Smith GlickIndia2026-05-29Chapman, Ross E Esq QUALIFIED56Asiya Javayant
1013Juan WieserItaly2026-05-15Dorl, James J Esq UNQUALIFIED24Xuxue Feng
1014Tony FollerArgentina2026-05-20Commercial Press QUALIFIED56Xuxue Feng
1015David DarakjyRussia2026-06-08Truhlar And Truhlar Attys RENEWAL54Stephen Shaw
1016James ButtItaly2026-06-01Truhlar And Truhlar Attys NEW31Anna Fali
1017Munro FerenczUnited Kingdom2026-05-18Benton, John B Jr QUALIFIED63Asiya Javayant
1018Smith GlickItaly2026-05-12Chanay, Jeffrey A Esq NEGOTIATION56Xuxue Feng
1019Jeanfrancois VenereArgentina2026-06-02Benton, John B Jr QUALIFIED96Asiya Javayant
1020James ButtJapan2026-05-17Commercial Press PROPOSAL31Bernardo Dominic
1021Munro FerenczSpain2026-06-05King, Christopher A Esq UNQUALIFIED16Bernardo Dominic
1022David DarakjySpain2026-05-13Chemel, James L Cpa RENEWAL59Onyama Limba
1023Arvin AlbaresUnited Kingdom2026-05-29Commercial Press RENEWAL16Anna Fali
1024Faith GillianArgentina2026-05-29Truhlar And Truhlar Attys UNQUALIFIED40Ivan Magalhaes
1025Francesco ShinkoArgentina2026-05-18Feiner Bros QUALIFIED89Ivan Magalhaes
1026Sinclair WaycottCanada2026-05-23Commercial Press UNQUALIFIED69Xuxue Feng
1027Isabel BowleyIndia2026-05-18King, Christopher A Esq NEW23Elwin Sharvill
1028Ashley DoeCanada2026-05-26Chapman, Ross E Esq UNQUALIFIED43Onyama Limba
1029Antonio CaudyRussia2026-05-28Chemel, James L Cpa NEW59Amy Elsner
1030Mayumi KolmetzUnited Kingdom2026-05-27Chapman, Ross E Esq PROPOSAL4Stephen Shaw
1031James ButtGermany2026-06-10Chapman, Ross E Esq NEW50Xuxue Feng
1032Greenwood BologniaGermany2026-05-23Chemel, James L Cpa UNQUALIFIED57Amy Elsner
1033Faith GillianUnited Kingdom2026-06-07Benton, John B Jr NEW1Ivan Magalhaes
1034Francesco ShinkoJapan2026-06-07Commercial Press QUALIFIED83Ivan Magalhaes
1035Claire TollnerJapan2026-05-18Feiner Bros PROPOSAL24Bernardo Dominic
1036Maria MarrierJapan2026-05-27Feltz Printing Service RENEWAL35Asiya Javayant
1037Costa DilliardUnited Kingdom2026-05-14Rousseaux, Michael Esq NEGOTIATION65Ioni Bowcher
1038Costa DilliardJapan2026-05-18Buckley Miller Wright PROPOSAL67Xuxue Feng
1039Jones VocelkaArgentina2026-05-30Dorl, James J Esq NEW99Anna Fali
1040Antonio CaudyJapan2026-05-15Benton, John B Jr UNQUALIFIED14Xuxue Feng
1041Leon OldroydUnited Kingdom2026-05-30King, Christopher A Esq PROPOSAL77Stephen Shaw
1042Jefferson SchemmerFrance2026-06-07Rousseaux, Michael Esq QUALIFIED72Xuxue Feng
1043Emily WhobreyJapan2026-05-14Rangoni Of Florence NEGOTIATION72Ioni Bowcher
1044Jefferson SchemmerIndia2026-05-24Morlong Associates RENEWAL39Amy Elsner
1045Kadeem FlosiRussia2026-05-16Rousseaux, Michael Esq PROPOSAL89Elwin Sharvill
1046Sinclair WaycottAustralia2026-06-08Chapman, Ross E Esq NEGOTIATION66Anna Fali
1047Leon OldroydIndia2026-05-20Rousseaux, Michael Esq RENEWAL67Bernardo Dominic
1048Darci PoquetteItaly2026-05-22Printing Dimensions NEW83Stephen Shaw
1049Misaki RoysterItaly2026-05-31Morlong Associates NEW12Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Ashley DoeItalyAsiya Javayant UNQUALIFIED
Octavia MaletUnited KingdomAnna Fali NEW
Greenwood BologniaCanadaStephen Shaw PROPOSAL
James ButtJapanBernardo Dominic QUALIFIED
Nicolas IturbideAustraliaAsiya Javayant RENEWAL
Silvio SlusarskiSpainAnna Fali PROPOSAL
Izzy GarufiSpainBernardo Dominic PROPOSAL
Claire TollnerArgentinaIoni Bowcher RENEWAL
Alejandro PerinArgentinaStephen Shaw NEW
Silvio SlusarskiGermanyAmy Elsner RENEWAL
Greenwood BologniaSpainXuxue Feng UNQUALIFIED
Stacey MacleadUnited KingdomXuxue Feng UNQUALIFIED
David DarakjyUnited KingdomXuxue Feng UNQUALIFIED
Juan WieserBrazilIoni Bowcher NEGOTIATION
Stacey MacleadJapanStephen Shaw RENEWAL
Claire TollnerIndiaXuxue Feng UNQUALIFIED
Izzy GarufiBrazilXuxue Feng UNQUALIFIED
Chavez BriddickIndiaIoni Bowcher UNQUALIFIED
Darci PoquetteSpainIvan Magalhaes UNQUALIFIED
Greenwood BologniaRussiaOnyama Limba UNQUALIFIED
Ricardo GauchoBrazilAnna Fali NEW
Wickens NestleItalyOnyama Limba UNQUALIFIED
Arvin AlbaresIndiaOnyama Limba UNQUALIFIED
David DarakjyGermanyElwin Sharvill UNQUALIFIED
Arvin AlbaresBrazilElwin Sharvill NEGOTIATION
Aruna FigeroaUnited KingdomBernardo Dominic UNQUALIFIED
Leja CaldareraCanadaAmy Elsner UNQUALIFIED
Salvatore StockhamUnited KingdomIvan Magalhaes RENEWAL
Izzy GarufiBrazilIoni Bowcher PROPOSAL
Nicolas IturbideFranceAmy Elsner RENEWAL
Antonio CaudyUnited KingdomElwin Sharvill PROPOSAL
Wickens NestleBrazilIoni Bowcher UNQUALIFIED
Ivar PaprockiUnited KingdomXuxue Feng PROPOSAL
Darci PoquetteItalyBernardo Dominic NEGOTIATION
Julie StensethSpainXuxue Feng NEW
Wickens NestleJapanAnna Fali NEW
Mayumi KolmetzSpainBernardo Dominic UNQUALIFIED
Sinclair WaycottGermanyOnyama Limba UNQUALIFIED
Leja CaldareraItalyElwin Sharvill NEW
Stacey MacleadIndiaIoni Bowcher QUALIFIED
Adams MorascaItalyAmy Elsner NEGOTIATION
James ButtFranceBernardo Dominic RENEWAL
Kaitlin OstroskyUnited KingdomXuxue Feng QUALIFIED
Juan WieserCanadaElwin Sharvill RENEWAL
Alejandro PerinItalyIvan Magalhaes RENEWAL
Kaitlin OstroskyArgentinaBernardo Dominic NEGOTIATION
Francesco ShinkoRussiaAnna Fali NEGOTIATION
Ricardo GauchoSpainOnyama Limba PROPOSAL
Misaki RoysterArgentinaIvan Magalhaes QUALIFIED
Leon OldroydUnited KingdomIvan Magalhaes NEW
Frozen Columns
Name
Leon Oldroyd
Smith Glick
Isabel Bowley
Jones Vocelka
Alejandro Perin
Greenwood Bolognia
Cody Saylors
Aruna Figeroa
Octavia Malet
Smith Glick
Ivar Paprocki
Isabel Bowley
Morrow Ruta
Octavia Malet
Jeanfrancois Venere
Claire Tollner
Emily Whobrey
Jefferson Schemmer
Greenwood Bolognia
Aruna Figeroa
Leja Caldarera
Isabel Bowley
Mujtaba Nicka
Octavia Malet
Francesco Shinko
Izzy Garufi
David Darakjy
Ashley Doe
Leja Caldarera
Clifford Rim
Wickens Nestle
Stacey Maclead
Ashley Doe
Darci Poquette
Leja Caldarera
Wickens Nestle
Maria Marrier
Adams Morasca
Smith Glick
Maria Marrier
Isabel Bowley
Maisha Rulapaugh
Cody Saylors
Misaki Royster
Nicolas Iturbide
Sinclair Waycott
Greenwood Bolognia
Misaki Royster
Ashley Doe
Salvatore Stockham
IdCountryDate
1000United Kingdom2026-05-17
1001India2026-05-29
1002Australia2026-06-04
1003France2026-05-13
1004Argentina2026-05-31
1005Brazil2026-05-16
1006Australia2026-05-19
1007United Kingdom2026-06-04
1008Russia2026-05-21
1009Japan2026-05-17
1010United Kingdom2026-05-13
1011Spain2026-05-28
1012Spain2026-05-29
1013Brazil2026-05-24
1014Japan2026-05-27
1015United Kingdom2026-05-30
1016France2026-06-04
1017Argentina2026-06-03
1018Canada2026-06-09
1019United Kingdom2026-06-04
1020Russia2026-05-14
1021Brazil2026-05-28
1022United Kingdom2026-05-12
1023Canada2026-06-06
1024Germany2026-05-28
1025United Kingdom2026-06-09
1026Canada2026-05-29
1027Brazil2026-06-03
1028Argentina2026-05-13
1029Argentina2026-05-17
1030Germany2026-05-20
1031United Kingdom2026-05-19
1032Germany2026-06-06
1033Italy2026-05-24
1034Brazil2026-05-14
1035Italy2026-06-06
1036Australia2026-05-20
1037India2026-05-30
1038Argentina2026-05-29
1039Canada2026-05-14
1040United Kingdom2026-05-24
1041Germany2026-06-10
1042Canada2026-05-27
1043France2026-05-29
1044France2026-05-22
1045Germany2026-05-31
1046Australia2026-05-30
1047Japan2026-05-13
1048India2026-05-14
1049Argentina2026-06-03

On-Demand Data

NameIdCountryDate
Claire Tollner1000United Kingdom2026-05-15
Ashley Doe1001Argentina2026-05-12
Maria Marrier1002Canada2026-06-06
Rodrigues Campain1003Russia2026-05-29
Greenwood Bolognia1004Germany2026-05-21
Misaki Royster1005Russia2026-05-20
Aika Inouye1006Canada2026-05-12
Jefferson Schemmer1007Italy2026-05-29
Sinclair Waycott1008Japan2026-05-27
Stacey Maclead1009Japan2026-05-13
Leja Caldarera1010Russia2026-06-08
Darci Poquette1011Argentina2026-05-12
Maisha Rulapaugh1012India2026-05-25
Silvio Slusarski1013Spain2026-05-12
Maria Marrier1014Argentina2026-05-20
Nicolas Iturbide1015Russia2026-05-31
Smith Glick1016Canada2026-05-24
Kadeem Flosi1017Russia2026-05-15
Jennifer Amigon1018Japan2026-05-18
Mayumi Kolmetz1019India2026-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jefferson SchemmerGermanyIoni Bowcher QUALIFIED
Arvin AlbaresArgentinaIvan Magalhaes NEGOTIATION
Isabel BowleyAustraliaAmy Elsner PROPOSAL
Morrow RutaBrazilIvan Magalhaes QUALIFIED
David DarakjyArgentinaBernardo Dominic UNQUALIFIED
Emily WhobreyGermanyOnyama Limba RENEWAL
Mujtaba NickaArgentinaXuxue Feng RENEWAL
Aruna FigeroaRussiaAmy Elsner NEGOTIATION
Juan WieserItalyAnna Fali QUALIFIED
Murillo MaletIndiaXuxue Feng PROPOSAL
Clifford RimSpainAnna Fali NEW
Ricardo GauchoBrazilBernardo Dominic RENEWAL
Emily WhobreyItalyOnyama Limba UNQUALIFIED
Antonio CaudyGermanyIoni Bowcher PROPOSAL
Jefferson SchemmerIndiaAnna Fali NEW
Maria MarrierSpainXuxue Feng UNQUALIFIED
Clifford RimItalyBernardo Dominic PROPOSAL
James ButtItalyOnyama Limba NEGOTIATION
Aika InouyeArgentinaAnna Fali UNQUALIFIED
Munro FerenczFranceBernardo Dominic PROPOSAL
Ashley DoeIndiaAmy Elsner UNQUALIFIED
Stacey MacleadSpainStephen Shaw PROPOSAL
Isabel BowleyJapanXuxue Feng UNQUALIFIED
Aruna FigeroaUnited KingdomIoni Bowcher NEGOTIATION
Costa DilliardAustraliaBernardo Dominic PROPOSAL
Clifford RimUnited KingdomXuxue Feng NEGOTIATION
Silvio SlusarskiItalyStephen Shaw QUALIFIED
Jones VocelkaUnited KingdomXuxue Feng NEGOTIATION
Kaitlin OstroskyJapanStephen Shaw RENEWAL
Francesco ShinkoGermanyElwin Sharvill UNQUALIFIED
Salvatore StockhamJapanElwin Sharvill NEW
Morrow RutaIndiaBernardo Dominic RENEWAL
Munro FerenczArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresRussiaBernardo Dominic QUALIFIED
Emily WhobreyAustraliaIoni Bowcher QUALIFIED
Juan WieserIndiaElwin Sharvill NEGOTIATION
Costa DilliardArgentinaIvan Magalhaes QUALIFIED
Ashley DoeFranceAsiya Javayant UNQUALIFIED
Maria MarrierItalyOnyama Limba QUALIFIED
Johnson SergiCanadaAsiya Javayant PROPOSAL

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