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 GauchoIndiaAmy Elsner PROPOSAL
Adams MorascaGermanyBernardo Dominic NEW
Rodrigues CampainBrazilIvan Magalhaes PROPOSAL
Aruna FigeroaCanadaAnna Fali UNQUALIFIED
Darci PoquetteArgentinaIoni Bowcher UNQUALIFIED
Tony FollerBrazilOnyama Limba NEW
Francesco ShinkoGermanyElwin Sharvill QUALIFIED
Salvatore StockhamIndiaStephen Shaw RENEWAL
Claire TollnerCanadaStephen Shaw QUALIFIED
Alejandro PerinRussiaIvan Magalhaes PROPOSAL
Tony FollerItalyIvan Magalhaes QUALIFIED
Jennifer AmigonAustraliaAnna Fali QUALIFIED
Johnson SergiArgentinaAnna Fali NEGOTIATION
Mayumi KolmetzBrazilAnna Fali NEGOTIATION
James ButtBrazilXuxue Feng UNQUALIFIED
Isabel BowleyGermanyIoni Bowcher QUALIFIED
Jefferson SchemmerArgentinaIvan Magalhaes PROPOSAL
Deepesh ChuiRussiaXuxue Feng PROPOSAL
Julie StensethArgentinaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiGermanyIvan Magalhaes PROPOSAL
Greenwood BologniaFranceElwin Sharvill QUALIFIED
Munro FerenczFranceStephen Shaw NEW
Alejandro PerinBrazilIvan Magalhaes QUALIFIED
Jefferson SchemmerAustraliaXuxue Feng RENEWAL
Mujtaba NickaSpainStephen Shaw UNQUALIFIED
Isabel BowleyAustraliaAsiya Javayant UNQUALIFIED
Ricardo GauchoBrazilAnna Fali PROPOSAL
Faith GillianJapanBernardo Dominic UNQUALIFIED
Aika InouyeRussiaIoni Bowcher RENEWAL
Rodrigues CampainGermanyAnna Fali UNQUALIFIED
Isabel BowleyFranceBernardo Dominic PROPOSAL
Kadeem FlosiGermanyIvan Magalhaes PROPOSAL
Faith GillianFranceAsiya Javayant RENEWAL
Mujtaba NickaItalyAsiya Javayant RENEWAL
Jones VocelkaAustraliaStephen Shaw NEGOTIATION
Isabel BowleyBrazilAsiya Javayant QUALIFIED
Claire TollnerRussiaIvan Magalhaes RENEWAL
Ricardo GauchoBrazilStephen Shaw UNQUALIFIED
Chavez BriddickAustraliaElwin Sharvill RENEWAL
Ashley DoeArgentinaIvan Magalhaes UNQUALIFIED
Cody SaylorsIndiaStephen Shaw RENEWAL
Izzy GarufiJapanStephen Shaw NEW
David DarakjyCanadaIvan Magalhaes QUALIFIED
Murillo MaletSpainAnna Fali RENEWAL
Jeanfrancois VenereCanadaIoni Bowcher RENEWAL
Silvio SlusarskiItalyIvan Magalhaes NEW
Misaki RoysterArgentinaXuxue Feng RENEWAL
Antonio CaudySpainAsiya Javayant NEW
Wickens NestleRussiaOnyama Limba RENEWAL
Adams MorascaGermanyElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Morrow RutaItalyAmy Elsner NEGOTIATION
Isabel BowleyIndiaAsiya Javayant PROPOSAL
Jeanfrancois VenereArgentinaIvan Magalhaes RENEWAL
Octavia MaletSpainStephen Shaw UNQUALIFIED
Juan WieserUnited KingdomXuxue Feng QUALIFIED
Nicolas IturbideArgentinaIvan Magalhaes NEW
Faith GillianArgentinaAmy Elsner RENEWAL
Ivar PaprockiBrazilStephen Shaw UNQUALIFIED
Chavez BriddickCanadaAmy Elsner PROPOSAL
Deepesh ChuiJapanAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoIndia2025-09-30Dorl, James J Esq NEW92Ioni Bowcher
1001Octavia MaletArgentina2025-09-22Rangoni Of Florence QUALIFIED54Asiya Javayant
1002Kaitlin OstroskyItaly2025-10-06Benton, John B Jr PROPOSAL17Ivan Magalhaes
1003Jeanfrancois VenereRussia2025-09-27Benton, John B Jr UNQUALIFIED19Elwin Sharvill
1004Aika InouyeRussia2025-09-21Dorl, James J Esq NEW32Asiya Javayant
1005Jennifer AmigonBrazil2025-10-12Rangoni Of Florence QUALIFIED30Ioni Bowcher
1006Murillo MaletSpain2025-10-09Chemel, James L Cpa UNQUALIFIED62Bernardo Dominic
1007Arvin AlbaresSpain2025-09-28Printing Dimensions QUALIFIED36Ioni Bowcher
1008Isabel BowleyItaly2025-10-12Chanay, Jeffrey A Esq NEW63Asiya Javayant
1009Juan WieserJapan2025-10-03Commercial Press PROPOSAL83Elwin Sharvill
1010Chavez BriddickRussia2025-10-07Chemel, James L Cpa NEGOTIATION16Onyama Limba
1011Jones VocelkaRussia2025-10-19Dorl, James J Esq UNQUALIFIED77Stephen Shaw
1012Murillo MaletUnited Kingdom2025-10-08Feltz Printing Service QUALIFIED38Amy Elsner
1013Aruna FigeroaJapan2025-10-04Feltz Printing Service UNQUALIFIED93Amy Elsner
1014Misaki RoysterUnited Kingdom2025-10-08Morlong Associates NEW23Anna Fali
1015Aika InouyeItaly2025-09-20Dorl, James J Esq PROPOSAL42Anna Fali
1016Emily WhobreyJapan2025-10-06Chanay, Jeffrey A Esq RENEWAL70Asiya Javayant
1017Maisha RulapaughCanada2025-10-15Dorl, James J Esq NEW75Elwin Sharvill
1018David DarakjyGermany2025-10-13Rangoni Of Florence PROPOSAL36Stephen Shaw
1019Octavia MaletAustralia2025-10-03Buckley Miller Wright NEGOTIATION33Ioni Bowcher
1020Munro FerenczSpain2025-10-09Commercial Press UNQUALIFIED27Ivan Magalhaes
1021Adams MorascaBrazil2025-10-10Buckley Miller Wright QUALIFIED66Anna Fali
1022Jeanfrancois VenereJapan2025-10-17Printing Dimensions NEW99Anna Fali
1023Mujtaba NickaItaly2025-09-28Chapman, Ross E Esq PROPOSAL63Asiya Javayant
1024Emily WhobreyGermany2025-09-20Feiner Bros QUALIFIED29Ioni Bowcher
1025Juan WieserFrance2025-09-24Chemel, James L Cpa UNQUALIFIED74Amy Elsner
1026Ricardo GauchoRussia2025-10-05Chemel, James L Cpa NEGOTIATION35Ioni Bowcher
1027James ButtItaly2025-10-19King, Christopher A Esq PROPOSAL0Onyama Limba
1028Maisha RulapaughUnited Kingdom2025-10-16King, Christopher A Esq NEW86Xuxue Feng
1029Ivar PaprockiIndia2025-09-24Feiner Bros NEGOTIATION53Xuxue Feng
1030Adams MorascaItaly2025-09-22Printing Dimensions UNQUALIFIED80Ioni Bowcher
1031Arvin AlbaresArgentina2025-09-27Chanay, Jeffrey A Esq UNQUALIFIED31Bernardo Dominic
1032Silvio SlusarskiBrazil2025-10-14Commercial Press PROPOSAL52Asiya Javayant
1033Tony FollerArgentina2025-10-10Rousseaux, Michael Esq QUALIFIED26Onyama Limba
1034Cody SaylorsJapan2025-10-16Dorl, James J Esq PROPOSAL73Bernardo Dominic
1035Juan WieserJapan2025-10-02Rousseaux, Michael Esq NEGOTIATION27Bernardo Dominic
1036Aditya KuskoBrazil2025-09-27Morlong Associates NEGOTIATION95Amy Elsner
1037Leon OldroydJapan2025-09-28King, Christopher A Esq RENEWAL69Ioni Bowcher
1038Darci PoquetteRussia2025-10-15Chanay, Jeffrey A Esq NEW27Xuxue Feng
1039Smith GlickAustralia2025-10-03Chanay, Jeffrey A Esq NEW39Anna Fali
1040Arvin AlbaresAustralia2025-10-06Chemel, James L Cpa NEGOTIATION96Amy Elsner
1041Jennifer AmigonGermany2025-10-12Truhlar And Truhlar Attys PROPOSAL4Elwin Sharvill
1042Ashley DoeItaly2025-10-14Chanay, Jeffrey A Esq QUALIFIED2Ivan Magalhaes
1043Faith GillianRussia2025-10-14Benton, John B Jr UNQUALIFIED3Anna Fali
1044Jones VocelkaItaly2025-09-20Printing Dimensions RENEWAL46Anna Fali
1045Aruna FigeroaIndia2025-10-14King, Christopher A Esq NEGOTIATION85Anna Fali
1046Maisha RulapaughAustralia2025-10-15Rousseaux, Michael Esq QUALIFIED88Ioni Bowcher
1047Cody SaylorsBrazil2025-09-27Benton, John B Jr QUALIFIED47Stephen Shaw
1048Isabel BowleyItaly2025-10-13Truhlar And Truhlar Attys PROPOSAL96Bernardo Dominic
1049Mayumi KolmetzBrazil2025-10-07Benton, John B Jr QUALIFIED72Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyArgentinaAsiya Javayant RENEWAL
Jones VocelkaGermanyIoni Bowcher PROPOSAL
Cody SaylorsFranceIoni Bowcher RENEWAL
Alejandro PerinItalyElwin Sharvill NEGOTIATION
Jones VocelkaSpainAsiya Javayant RENEWAL
Misaki RoysterUnited KingdomElwin Sharvill PROPOSAL
Claire TollnerArgentinaAnna Fali NEW
Johnson SergiJapanAsiya Javayant NEW
Jefferson SchemmerIndiaXuxue Feng NEGOTIATION
Leon OldroydJapanXuxue Feng NEGOTIATION
Ivar PaprockiIndiaIoni Bowcher UNQUALIFIED
Mayumi KolmetzItalyIvan Magalhaes RENEWAL
Leon OldroydCanadaXuxue Feng RENEWAL
Nicolas IturbideSpainIoni Bowcher NEW
Juan WieserAustraliaStephen Shaw QUALIFIED
Jeanfrancois VenereJapanAmy Elsner NEW
Mayumi KolmetzIndiaAmy Elsner NEGOTIATION
Claire TollnerBrazilBernardo Dominic PROPOSAL
Morrow RutaRussiaXuxue Feng PROPOSAL
Aditya KuskoArgentinaStephen Shaw RENEWAL
Ashley DoeFranceAnna Fali NEGOTIATION
Smith GlickArgentinaBernardo Dominic NEGOTIATION
Aditya KuskoRussiaXuxue Feng UNQUALIFIED
Morrow RutaFranceBernardo Dominic UNQUALIFIED
Maisha RulapaughJapanIvan Magalhaes RENEWAL
Octavia MaletJapanAnna Fali QUALIFIED
Cody SaylorsCanadaOnyama Limba RENEWAL
James ButtFranceAmy Elsner QUALIFIED
Kadeem FlosiIndiaOnyama Limba RENEWAL
Aika InouyeCanadaBernardo Dominic QUALIFIED
Ashley DoeJapanAmy Elsner UNQUALIFIED
Chavez BriddickIndiaAsiya Javayant QUALIFIED
Johnson SergiJapanIvan Magalhaes NEW
Leon OldroydAustraliaAmy Elsner QUALIFIED
Antonio CaudyJapanElwin Sharvill PROPOSAL
Johnson SergiItalyAmy Elsner QUALIFIED
Emily WhobreyJapanIoni Bowcher UNQUALIFIED
Maisha RulapaughFranceAmy Elsner PROPOSAL
Smith GlickGermanyBernardo Dominic NEGOTIATION
Jefferson SchemmerIndiaBernardo Dominic UNQUALIFIED
Leon OldroydUnited KingdomElwin Sharvill NEW
Darci PoquetteRussiaStephen Shaw NEW
Julie StensethJapanAsiya Javayant NEGOTIATION
Juan WieserGermanyIoni Bowcher PROPOSAL
Julie StensethArgentinaOnyama Limba UNQUALIFIED
Izzy GarufiFranceStephen Shaw UNQUALIFIED
Ricardo GauchoSpainAnna Fali NEW
Darci PoquetteItalyAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaAsiya Javayant NEGOTIATION
Costa DilliardFranceAmy Elsner RENEWAL
Frozen Columns
Name
Silvio Slusarski
Misaki Royster
Adams Morasca
Sinclair Waycott
Morrow Ruta
Maisha Rulapaugh
David Darakjy
Rodrigues Campain
Jennifer Amigon
Octavia Malet
Alejandro Perin
Salvatore Stockham
Izzy Garufi
Adams Morasca
Kadeem Flosi
Alejandro Perin
Julie Stenseth
Claire Tollner
Kadeem Flosi
Isabel Bowley
Izzy Garufi
Tony Foller
Jones Vocelka
Jones Vocelka
Aditya Kusko
Munro Ferencz
Murillo Malet
Silvio Slusarski
Silvio Slusarski
Mayumi Kolmetz
Misaki Royster
James Butt
Johnson Sergi
Emily Whobrey
Faith Gillian
Mujtaba Nicka
Sinclair Waycott
Clifford Rim
Octavia Malet
Jennifer Amigon
Adams Morasca
Deepesh Chui
Ricardo Gaucho
Mayumi Kolmetz
Mujtaba Nicka
Murillo Malet
Clifford Rim
Mayumi Kolmetz
Jones Vocelka
Isabel Bowley
IdCountryDate
1000India2025-09-26
1001Russia2025-10-12
1002Germany2025-09-23
1003Canada2025-10-03
1004Japan2025-10-06
1005Italy2025-10-15
1006Brazil2025-09-23
1007Italy2025-10-04
1008Spain2025-09-21
1009Russia2025-10-15
1010Russia2025-10-16
1011Brazil2025-10-11
1012Argentina2025-10-13
1013Spain2025-09-27
1014India2025-10-10
1015Australia2025-09-26
1016Germany2025-10-07
1017Russia2025-09-24
1018Russia2025-10-11
1019Russia2025-09-30
1020Brazil2025-10-15
1021India2025-10-14
1022Germany2025-09-25
1023India2025-09-26
1024Brazil2025-10-09
1025Spain2025-10-12
1026United Kingdom2025-09-21
1027United Kingdom2025-10-08
1028Russia2025-10-02
1029Australia2025-09-25
1030United Kingdom2025-09-28
1031Brazil2025-10-09
1032Spain2025-10-11
1033India2025-10-06
1034France2025-10-10
1035India2025-09-23
1036Brazil2025-10-11
1037Spain2025-10-02
1038United Kingdom2025-10-03
1039France2025-10-01
1040Spain2025-09-21
1041United Kingdom2025-10-04
1042United Kingdom2025-10-09
1043Brazil2025-09-22
1044France2025-10-16
1045Canada2025-10-19
1046Australia2025-10-11
1047Germany2025-09-28
1048Germany2025-10-09
1049Italy2025-09-24

On-Demand Data

NameIdCountryDate
Isabel Bowley1000Brazil2025-09-22
Faith Gillian1001India2025-10-17
Morrow Ruta1002Germany2025-09-20
Sinclair Waycott1003Argentina2025-09-28
Nicolas Iturbide1004United Kingdom2025-09-21
Octavia Malet1005Russia2025-09-20
Faith Gillian1006United Kingdom2025-09-27
David Darakjy1007Argentina2025-09-30
Juan Wieser1008Spain2025-10-09
Rodrigues Campain1009Japan2025-10-19
David Darakjy1010France2025-10-17
Alejandro Perin1011India2025-09-23
Ashley Doe1012Japan2025-10-14
Claire Tollner1013Italy2025-10-14
Greenwood Bolognia1014Russia2025-10-03
Alejandro Perin1015Italy2025-10-01
Ricardo Gaucho1016Canada2025-09-27
Darci Poquette1017India2025-10-06
Wickens Nestle1018Brazil2025-09-29
Murillo Malet1019Canada2025-10-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottJapanStephen Shaw NEGOTIATION
Stacey MacleadJapanIvan Magalhaes RENEWAL
Adams MorascaCanadaElwin Sharvill PROPOSAL
Aika InouyeGermanyXuxue Feng UNQUALIFIED
Greenwood BologniaCanadaAmy Elsner RENEWAL
Clifford RimUnited KingdomElwin Sharvill UNQUALIFIED
Morrow RutaGermanyAnna Fali UNQUALIFIED
Jefferson SchemmerIndiaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyFranceStephen Shaw NEGOTIATION
Kaitlin OstroskyArgentinaAsiya Javayant RENEWAL
Murillo MaletCanadaElwin Sharvill QUALIFIED
Aika InouyeSpainIoni Bowcher NEW
Juan WieserUnited KingdomStephen Shaw QUALIFIED
Stacey MacleadCanadaIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher NEGOTIATION
Ashley DoeIndiaAnna Fali PROPOSAL
Mujtaba NickaJapanAnna Fali UNQUALIFIED
Leja CaldareraUnited KingdomBernardo Dominic NEGOTIATION
Mayumi KolmetzFranceElwin Sharvill QUALIFIED
Jones VocelkaCanadaIvan Magalhaes NEGOTIATION
Julie StensethFranceStephen Shaw UNQUALIFIED
Francesco ShinkoRussiaAnna Fali UNQUALIFIED
Emily WhobreyFranceOnyama Limba RENEWAL
Leja CaldareraBrazilStephen Shaw NEW
Aruna FigeroaUnited KingdomOnyama Limba NEGOTIATION
Claire TollnerFranceElwin Sharvill PROPOSAL
Stacey MacleadUnited KingdomStephen Shaw PROPOSAL
Jones VocelkaFranceIoni Bowcher RENEWAL
Jefferson SchemmerAustraliaBernardo Dominic PROPOSAL
Cody SaylorsSpainIvan Magalhaes UNQUALIFIED
Aika InouyeBrazilIvan Magalhaes NEW
Faith GillianBrazilIoni Bowcher PROPOSAL
Ricardo GauchoGermanyAsiya Javayant PROPOSAL
Maisha RulapaughItalyStephen Shaw UNQUALIFIED
Cody SaylorsSpainIoni Bowcher UNQUALIFIED
David DarakjyItalyAmy Elsner UNQUALIFIED
Maria MarrierFranceXuxue Feng PROPOSAL
Adams MorascaRussiaAsiya Javayant NEGOTIATION
Greenwood BologniaUnited KingdomXuxue Feng NEGOTIATION
Aika InouyeArgentinaAmy Elsner NEGOTIATION

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