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
Cody SaylorsArgentinaOnyama Limba NEGOTIATION
Kaitlin OstroskyRussiaAsiya Javayant UNQUALIFIED
Johnson SergiAustraliaAsiya Javayant NEW
Misaki RoysterCanadaBernardo Dominic PROPOSAL
Smith GlickUnited KingdomAnna Fali UNQUALIFIED
Jones VocelkaAustraliaStephen Shaw UNQUALIFIED
Antonio CaudyIndiaAsiya Javayant RENEWAL
Alejandro PerinRussiaOnyama Limba NEW
Munro FerenczJapanBernardo Dominic NEGOTIATION
David DarakjyGermanyAmy Elsner NEGOTIATION
Smith GlickJapanElwin Sharvill UNQUALIFIED
Maria MarrierSpainStephen Shaw UNQUALIFIED
Emily WhobreyUnited KingdomIoni Bowcher UNQUALIFIED
Aditya KuskoGermanyOnyama Limba QUALIFIED
Misaki RoysterFranceIoni Bowcher PROPOSAL
Kaitlin OstroskySpainStephen Shaw RENEWAL
Claire TollnerSpainAnna Fali RENEWAL
Murillo MaletIndiaIvan Magalhaes PROPOSAL
Emily WhobreyArgentinaXuxue Feng RENEWAL
Julie StensethItalyElwin Sharvill NEGOTIATION
Antonio CaudySpainOnyama Limba QUALIFIED
Cody SaylorsJapanOnyama Limba UNQUALIFIED
Stacey MacleadFranceAsiya Javayant QUALIFIED
Ivar PaprockiItalyAmy Elsner PROPOSAL
Faith GillianCanadaXuxue Feng PROPOSAL
Darci PoquetteItalyIvan Magalhaes NEW
Claire TollnerGermanyIoni Bowcher NEGOTIATION
Kadeem FlosiRussiaOnyama Limba UNQUALIFIED
Alejandro PerinFranceOnyama Limba NEGOTIATION
Aruna FigeroaGermanyXuxue Feng PROPOSAL
Arvin AlbaresArgentinaOnyama Limba UNQUALIFIED
Ricardo GauchoIndiaStephen Shaw UNQUALIFIED
David DarakjyUnited KingdomAnna Fali UNQUALIFIED
Smith GlickBrazilAnna Fali QUALIFIED
Izzy GarufiUnited KingdomAsiya Javayant PROPOSAL
Misaki RoysterJapanElwin Sharvill NEW
Leja CaldareraRussiaIoni Bowcher NEGOTIATION
Arvin AlbaresAustraliaAmy Elsner QUALIFIED
Ashley DoeBrazilAsiya Javayant QUALIFIED
Jefferson SchemmerAustraliaAmy Elsner PROPOSAL
Emily WhobreyArgentinaXuxue Feng RENEWAL
Tony FollerUnited KingdomXuxue Feng QUALIFIED
Aditya KuskoAustraliaIvan Magalhaes UNQUALIFIED
Jones VocelkaRussiaBernardo Dominic RENEWAL
Claire TollnerCanadaAsiya Javayant RENEWAL
Mayumi KolmetzUnited KingdomBernardo Dominic PROPOSAL
Faith GillianSpainXuxue Feng RENEWAL
Murillo MaletRussiaIoni Bowcher NEGOTIATION
Smith GlickIndiaIoni Bowcher PROPOSAL
Misaki RoysterRussiaOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaRussiaIvan Magalhaes QUALIFIED
Morrow RutaItalyXuxue Feng NEGOTIATION
Rodrigues CampainGermanyAnna Fali QUALIFIED
Isabel BowleyFranceIoni Bowcher RENEWAL
Wickens NestleArgentinaIvan Magalhaes UNQUALIFIED
Leja CaldareraAustraliaElwin Sharvill UNQUALIFIED
Ashley DoeAustraliaBernardo Dominic PROPOSAL
Stacey MacleadCanadaIvan Magalhaes UNQUALIFIED
Morrow RutaBrazilBernardo Dominic NEGOTIATION
Ashley DoeArgentinaXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickJapan2025-09-13Benton, John B Jr NEGOTIATION32Ivan Magalhaes
1001Octavia MaletFrance2025-08-31Truhlar And Truhlar Attys NEGOTIATION52Xuxue Feng
1002Jones VocelkaArgentina2025-09-02King, Christopher A Esq NEW71Ivan Magalhaes
1003Greenwood BologniaIndia2025-09-11Feiner Bros NEW80Ioni Bowcher
1004Stacey MacleadBrazil2025-09-09Chanay, Jeffrey A Esq UNQUALIFIED64Anna Fali
1005Kaitlin OstroskyItaly2025-08-21Chanay, Jeffrey A Esq NEGOTIATION6Amy Elsner
1006Arvin AlbaresAustralia2025-09-06Feltz Printing Service UNQUALIFIED87Asiya Javayant
1007Morrow RutaCanada2025-09-08Chanay, Jeffrey A Esq NEGOTIATION51Stephen Shaw
1008Jefferson SchemmerSpain2025-08-25Chemel, James L Cpa NEW90Bernardo Dominic
1009Emily WhobreyFrance2025-09-05Dorl, James J Esq RENEWAL86Amy Elsner
1010Aika InouyeJapan2025-08-24Chemel, James L Cpa NEGOTIATION26Stephen Shaw
1011Greenwood BologniaJapan2025-09-07Rangoni Of Florence RENEWAL23Asiya Javayant
1012Kadeem FlosiBrazil2025-08-23Rousseaux, Michael Esq RENEWAL84Onyama Limba
1013Smith GlickSpain2025-08-26Rangoni Of Florence UNQUALIFIED53Elwin Sharvill
1014Darci PoquetteSpain2025-08-25Printing Dimensions NEGOTIATION93Elwin Sharvill
1015Jeanfrancois VenereArgentina2025-08-24Dorl, James J Esq NEW88Elwin Sharvill
1016Mayumi KolmetzCanada2025-09-17Feiner Bros PROPOSAL88Onyama Limba
1017Costa DilliardJapan2025-08-27Feltz Printing Service QUALIFIED95Onyama Limba
1018Isabel BowleyItaly2025-08-31Rangoni Of Florence QUALIFIED60Xuxue Feng
1019Francesco ShinkoCanada2025-08-25Chanay, Jeffrey A Esq UNQUALIFIED56Anna Fali
1020Leja CaldareraCanada2025-09-06King, Christopher A Esq NEW31Stephen Shaw
1021Jones VocelkaFrance2025-08-27Morlong Associates NEW84Elwin Sharvill
1022Alejandro PerinSpain2025-09-08Commercial Press PROPOSAL21Xuxue Feng
1023Ricardo GauchoIndia2025-08-29Rousseaux, Michael Esq UNQUALIFIED58Asiya Javayant
1024Sinclair WaycottFrance2025-09-02Buckley Miller Wright QUALIFIED23Xuxue Feng
1025Chavez BriddickRussia2025-09-12Feiner Bros NEGOTIATION51Xuxue Feng
1026Salvatore StockhamCanada2025-09-03Chapman, Ross E Esq NEW16Amy Elsner
1027Leon OldroydRussia2025-08-23Feltz Printing Service RENEWAL86Xuxue Feng
1028Maisha RulapaughUnited Kingdom2025-09-12Feiner Bros QUALIFIED10Bernardo Dominic
1029Mayumi KolmetzUnited Kingdom2025-08-19Commercial Press QUALIFIED13Asiya Javayant
1030Maisha RulapaughArgentina2025-08-29Printing Dimensions PROPOSAL45Asiya Javayant
1031Aruna FigeroaArgentina2025-08-20Truhlar And Truhlar Attys PROPOSAL96Bernardo Dominic
1032Antonio CaudySpain2025-08-31Truhlar And Truhlar Attys NEW24Asiya Javayant
1033Antonio CaudyBrazil2025-08-26Benton, John B Jr NEGOTIATION95Onyama Limba
1034Costa DilliardJapan2025-08-31Chemel, James L Cpa NEGOTIATION79Stephen Shaw
1035Izzy GarufiSpain2025-09-13Benton, John B Jr RENEWAL50Asiya Javayant
1036Kadeem FlosiAustralia2025-08-21King, Christopher A Esq NEGOTIATION56Asiya Javayant
1037Deepesh ChuiCanada2025-08-21Feiner Bros UNQUALIFIED3Elwin Sharvill
1038Deepesh ChuiGermany2025-09-05Rousseaux, Michael Esq QUALIFIED45Amy Elsner
1039Stacey MacleadBrazil2025-09-16Printing Dimensions RENEWAL48Xuxue Feng
1040Leon OldroydItaly2025-09-12Commercial Press NEGOTIATION47Amy Elsner
1041Nicolas IturbideCanada2025-09-17Rangoni Of Florence RENEWAL30Anna Fali
1042Mayumi KolmetzArgentina2025-08-24Chapman, Ross E Esq RENEWAL57Amy Elsner
1043Aditya KuskoArgentina2025-09-16Benton, John B Jr RENEWAL7Anna Fali
1044Claire TollnerItaly2025-08-24Chapman, Ross E Esq RENEWAL18Anna Fali
1045Jennifer AmigonArgentina2025-09-13Benton, John B Jr QUALIFIED98Ioni Bowcher
1046Leon OldroydJapan2025-09-03Buckley Miller Wright NEGOTIATION91Ivan Magalhaes
1047Isabel BowleyFrance2025-09-08Dorl, James J Esq PROPOSAL50Amy Elsner
1048Jones VocelkaAustralia2025-09-16Truhlar And Truhlar Attys NEGOTIATION34Xuxue Feng
1049Izzy GarufiRussia2025-08-30Morlong Associates NEW35Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Clifford RimArgentinaStephen Shaw NEW
Tony FollerJapanElwin Sharvill QUALIFIED
Costa DilliardRussiaIvan Magalhaes RENEWAL
David DarakjySpainAmy Elsner PROPOSAL
Izzy GarufiJapanIvan Magalhaes PROPOSAL
Clifford RimSpainBernardo Dominic NEW
Maria MarrierJapanIvan Magalhaes UNQUALIFIED
Sinclair WaycottFranceStephen Shaw NEGOTIATION
Costa DilliardGermanyIoni Bowcher PROPOSAL
Ashley DoeItalyBernardo Dominic UNQUALIFIED
Maria MarrierBrazilAsiya Javayant QUALIFIED
Isabel BowleyRussiaIvan Magalhaes NEGOTIATION
Jones VocelkaSpainIvan Magalhaes QUALIFIED
Cody SaylorsJapanAnna Fali RENEWAL
Salvatore StockhamItalyAmy Elsner QUALIFIED
Greenwood BologniaItalyElwin Sharvill PROPOSAL
Izzy GarufiJapanIoni Bowcher NEGOTIATION
Claire TollnerSpainIvan Magalhaes RENEWAL
Mayumi KolmetzCanadaElwin Sharvill RENEWAL
Deepesh ChuiGermanyXuxue Feng PROPOSAL
Cody SaylorsGermanyAsiya Javayant PROPOSAL
Ricardo GauchoJapanAsiya Javayant NEW
Antonio CaudyRussiaXuxue Feng UNQUALIFIED
Deepesh ChuiJapanAnna Fali UNQUALIFIED
Salvatore StockhamArgentinaAmy Elsner QUALIFIED
Johnson SergiBrazilIvan Magalhaes NEGOTIATION
Faith GillianAustraliaAmy Elsner NEGOTIATION
Emily WhobreyItalyIvan Magalhaes QUALIFIED
Maria MarrierIndiaIoni Bowcher QUALIFIED
Aditya KuskoIndiaOnyama Limba NEGOTIATION
Morrow RutaFranceElwin Sharvill RENEWAL
Ashley DoeRussiaXuxue Feng NEGOTIATION
Mayumi KolmetzSpainAmy Elsner PROPOSAL
Mayumi KolmetzCanadaBernardo Dominic PROPOSAL
Silvio SlusarskiRussiaAsiya Javayant RENEWAL
Munro FerenczJapanAsiya Javayant QUALIFIED
Julie StensethBrazilStephen Shaw NEW
Isabel BowleySpainOnyama Limba UNQUALIFIED
Chavez BriddickSpainAsiya Javayant PROPOSAL
Leja CaldareraBrazilElwin Sharvill NEW
David DarakjyUnited KingdomElwin Sharvill QUALIFIED
Juan WieserBrazilAmy Elsner NEW
Mujtaba NickaAustraliaXuxue Feng PROPOSAL
Izzy GarufiIndiaElwin Sharvill QUALIFIED
Cody SaylorsJapanXuxue Feng QUALIFIED
Wickens NestleItalyBernardo Dominic QUALIFIED
David DarakjyGermanyStephen Shaw UNQUALIFIED
Antonio CaudyJapanElwin Sharvill PROPOSAL
Sinclair WaycottIndiaOnyama Limba NEW
Octavia MaletItalyAmy Elsner RENEWAL
Frozen Columns
Name
Costa Dilliard
Antonio Caudy
Ricardo Gaucho
Francesco Shinko
Morrow Ruta
Costa Dilliard
Silvio Slusarski
Chavez Briddick
Morrow Ruta
Alejandro Perin
Julie Stenseth
Aruna Figeroa
Maria Marrier
Smith Glick
Arvin Albares
Juan Wieser
Morrow Ruta
James Butt
Juan Wieser
Costa Dilliard
Antonio Caudy
James Butt
Aditya Kusko
Darci Poquette
Nicolas Iturbide
Misaki Royster
Emily Whobrey
Misaki Royster
Nicolas Iturbide
Claire Tollner
Leon Oldroyd
Aika Inouye
Mujtaba Nicka
Deepesh Chui
Arvin Albares
Chavez Briddick
Costa Dilliard
Stacey Maclead
Francesco Shinko
Clifford Rim
Wickens Nestle
Munro Ferencz
Wickens Nestle
Rodrigues Campain
Alejandro Perin
Morrow Ruta
Johnson Sergi
Mujtaba Nicka
Rodrigues Campain
Francesco Shinko
IdCountryDate
1000Germany2025-09-11
1001Germany2025-08-22
1002Japan2025-09-04
1003Spain2025-08-30
1004France2025-09-15
1005Russia2025-08-30
1006France2025-09-08
1007United Kingdom2025-08-30
1008France2025-08-19
1009Argentina2025-09-12
1010Canada2025-09-04
1011Brazil2025-09-07
1012Brazil2025-08-31
1013Japan2025-09-07
1014Germany2025-09-12
1015Spain2025-08-28
1016Canada2025-08-19
1017United Kingdom2025-08-27
1018Canada2025-08-30
1019Japan2025-09-14
1020United Kingdom2025-09-13
1021Italy2025-09-10
1022Argentina2025-08-19
1023Spain2025-08-19
1024Japan2025-08-22
1025Brazil2025-08-21
1026Canada2025-08-28
1027Argentina2025-08-20
1028India2025-08-30
1029France2025-09-15
1030Canada2025-09-16
1031Canada2025-09-14
1032Spain2025-09-02
1033Russia2025-09-06
1034Germany2025-08-31
1035Japan2025-08-28
1036United Kingdom2025-09-02
1037Japan2025-08-26
1038Argentina2025-08-27
1039Germany2025-08-26
1040United Kingdom2025-09-14
1041Italy2025-09-08
1042Spain2025-09-01
1043Japan2025-08-31
1044Japan2025-08-27
1045Russia2025-08-27
1046Canada2025-09-14
1047Italy2025-09-14
1048Brazil2025-09-11
1049Italy2025-09-17

On-Demand Data

NameIdCountryDate
Claire Tollner1000France2025-09-09
Antonio Caudy1001Russia2025-08-28
James Butt1002India2025-08-24
Maisha Rulapaugh1003India2025-09-12
Misaki Royster1004Russia2025-09-03
Jennifer Amigon1005Australia2025-09-04
Greenwood Bolognia1006Germany2025-09-06
Jefferson Schemmer1007Spain2025-08-30
Octavia Malet1008Italy2025-09-08
Aruna Figeroa1009Japan2025-09-17
Clifford Rim1010Japan2025-09-07
Leon Oldroyd1011Canada2025-08-23
Juan Wieser1012Argentina2025-08-28
Claire Tollner1013Japan2025-09-08
Jones Vocelka1014Russia2025-08-20
Wickens Nestle1015Germany2025-08-27
Morrow Ruta1016France2025-08-20
Juan Wieser1017France2025-09-03
Jeanfrancois Venere1018Canada2025-08-31
Murillo Malet1019United Kingdom2025-08-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyAustraliaElwin Sharvill NEGOTIATION
Ricardo GauchoSpainAsiya Javayant RENEWAL
Smith GlickArgentinaAmy Elsner RENEWAL
Leja CaldareraCanadaIvan Magalhaes NEGOTIATION
Ashley DoeGermanyIvan Magalhaes PROPOSAL
Isabel BowleyRussiaOnyama Limba NEW
Alejandro PerinGermanyStephen Shaw QUALIFIED
Darci PoquetteRussiaAsiya Javayant UNQUALIFIED
Nicolas IturbideGermanyIvan Magalhaes QUALIFIED
Greenwood BologniaFranceOnyama Limba NEGOTIATION
Isabel BowleyIndiaBernardo Dominic PROPOSAL
Emily WhobreyIndiaElwin Sharvill RENEWAL
Isabel BowleyArgentinaAsiya Javayant UNQUALIFIED
Stacey MacleadIndiaIoni Bowcher UNQUALIFIED
Jones VocelkaItalyIoni Bowcher RENEWAL
David DarakjyCanadaOnyama Limba NEW
Ricardo GauchoBrazilElwin Sharvill PROPOSAL
Greenwood BologniaSpainAnna Fali RENEWAL
Aditya KuskoRussiaBernardo Dominic QUALIFIED
Isabel BowleyFranceAsiya Javayant NEW
Claire TollnerUnited KingdomStephen Shaw NEW
Wickens NestleFranceIoni Bowcher PROPOSAL
Cody SaylorsGermanyIvan Magalhaes RENEWAL
Jennifer AmigonSpainAmy Elsner UNQUALIFIED
Maria MarrierFranceIvan Magalhaes UNQUALIFIED
Maisha RulapaughArgentinaAnna Fali RENEWAL
Jefferson SchemmerBrazilXuxue Feng QUALIFIED
Arvin AlbaresFranceAnna Fali QUALIFIED
Mayumi KolmetzGermanyStephen Shaw QUALIFIED
Salvatore StockhamCanadaIvan Magalhaes NEGOTIATION
Arvin AlbaresItalyIvan Magalhaes NEGOTIATION
Mayumi KolmetzCanadaBernardo Dominic QUALIFIED
Jefferson SchemmerIndiaStephen Shaw PROPOSAL
Kaitlin OstroskySpainIoni Bowcher QUALIFIED
Jeanfrancois VenereUnited KingdomOnyama Limba NEW
Arvin AlbaresGermanyAnna Fali QUALIFIED
Jeanfrancois VenereUnited KingdomXuxue Feng NEW
Smith GlickJapanStephen Shaw UNQUALIFIED
Johnson SergiGermanyIvan Magalhaes NEGOTIATION
Costa DilliardRussiaIvan Magalhaes RENEWAL

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