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
Maria MarrierItalyAsiya Javayant RENEWAL
Juan WieserAustraliaStephen Shaw RENEWAL
Alejandro PerinGermanyBernardo Dominic UNQUALIFIED
Jefferson SchemmerRussiaAsiya Javayant QUALIFIED
Leon OldroydSpainAmy Elsner QUALIFIED
Morrow RutaJapanAnna Fali UNQUALIFIED
Salvatore StockhamCanadaIoni Bowcher QUALIFIED
Octavia MaletRussiaElwin Sharvill PROPOSAL
Nicolas IturbideBrazilOnyama Limba NEGOTIATION
Emily WhobreyUnited KingdomAsiya Javayant UNQUALIFIED
Ashley DoeCanadaAmy Elsner RENEWAL
Ricardo GauchoArgentinaXuxue Feng RENEWAL
Clifford RimArgentinaOnyama Limba PROPOSAL
Leon OldroydItalyElwin Sharvill NEW
Arvin AlbaresIndiaBernardo Dominic PROPOSAL
Francesco ShinkoBrazilOnyama Limba PROPOSAL
Jones VocelkaItalyAsiya Javayant RENEWAL
Darci PoquetteFranceAsiya Javayant RENEWAL
Arvin AlbaresRussiaIoni Bowcher PROPOSAL
Jefferson SchemmerAustraliaAnna Fali UNQUALIFIED
Jones VocelkaItalyAsiya Javayant RENEWAL
Jennifer AmigonSpainAsiya Javayant NEGOTIATION
Ashley DoeSpainAnna Fali NEW
Nicolas IturbideAustraliaIvan Magalhaes UNQUALIFIED
Smith GlickBrazilStephen Shaw PROPOSAL
Mujtaba NickaItalyXuxue Feng PROPOSAL
Maria MarrierBrazilIvan Magalhaes QUALIFIED
Morrow RutaIndiaXuxue Feng RENEWAL
Ricardo GauchoBrazilElwin Sharvill NEW
Juan WieserFranceStephen Shaw PROPOSAL
Faith GillianGermanyStephen Shaw NEGOTIATION
Chavez BriddickAustraliaXuxue Feng UNQUALIFIED
James ButtGermanyOnyama Limba RENEWAL
Tony FollerUnited KingdomAsiya Javayant PROPOSAL
Salvatore StockhamCanadaAnna Fali NEW
Antonio CaudyJapanStephen Shaw QUALIFIED
Stacey MacleadFranceIvan Magalhaes RENEWAL
Kaitlin OstroskyGermanyIoni Bowcher QUALIFIED
Silvio SlusarskiBrazilAsiya Javayant UNQUALIFIED
Rodrigues CampainSpainAsiya Javayant QUALIFIED
Octavia MaletSpainAsiya Javayant NEGOTIATION
Johnson SergiIndiaOnyama Limba NEW
Alejandro PerinItalyIvan Magalhaes QUALIFIED
Munro FerenczJapanAmy Elsner RENEWAL
Tony FollerIndiaXuxue Feng NEW
Misaki RoysterBrazilIoni Bowcher RENEWAL
Ricardo GauchoCanadaAnna Fali QUALIFIED
Ivar PaprockiGermanyAmy Elsner RENEWAL
Maisha RulapaughSpainOnyama Limba PROPOSAL
Aika InouyeIndiaIoni Bowcher NEW
Horizontal
NameCountryRepresentativeStatus
Isabel BowleyArgentinaBernardo Dominic QUALIFIED
Aika InouyeIndiaOnyama Limba PROPOSAL
Leon OldroydJapanAnna Fali NEGOTIATION
Faith GillianUnited KingdomIvan Magalhaes UNQUALIFIED
Salvatore StockhamUnited KingdomIvan Magalhaes UNQUALIFIED
Mujtaba NickaItalyBernardo Dominic NEW
Rodrigues CampainBrazilAmy Elsner QUALIFIED
Ricardo GauchoIndiaAsiya Javayant UNQUALIFIED
Mujtaba NickaAustraliaElwin Sharvill RENEWAL
Ricardo GauchoFranceElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoItaly2026-06-04Chemel, James L Cpa RENEWAL54Bernardo Dominic
1001Smith GlickSpain2026-05-31Truhlar And Truhlar Attys PROPOSAL40Xuxue Feng
1002Aika InouyeJapan2026-05-11Feltz Printing Service PROPOSAL52Anna Fali
1003Izzy GarufiArgentina2026-05-28Morlong Associates QUALIFIED39Bernardo Dominic
1004Deepesh ChuiFrance2026-05-22Feiner Bros QUALIFIED89Ioni Bowcher
1005Aika InouyeUnited Kingdom2026-05-09Chapman, Ross E Esq NEGOTIATION83Anna Fali
1006Nicolas IturbideUnited Kingdom2026-05-26Rousseaux, Michael Esq QUALIFIED39Ivan Magalhaes
1007Jennifer AmigonCanada2026-05-21Chanay, Jeffrey A Esq RENEWAL24Ivan Magalhaes
1008Morrow RutaArgentina2026-05-27Buckley Miller Wright PROPOSAL35Xuxue Feng
1009Julie StensethItaly2026-05-08Dorl, James J Esq RENEWAL95Anna Fali
1010Aditya KuskoItaly2026-05-20Chapman, Ross E Esq QUALIFIED65Anna Fali
1011Wickens NestleJapan2026-05-22Truhlar And Truhlar Attys NEW42Amy Elsner
1012Jefferson SchemmerIndia2026-05-23Morlong Associates UNQUALIFIED26Ioni Bowcher
1013Costa DilliardFrance2026-06-04Printing Dimensions PROPOSAL11Amy Elsner
1014Ashley DoeCanada2026-05-20Feiner Bros NEW37Asiya Javayant
1015Kaitlin OstroskyBrazil2026-05-09Benton, John B Jr UNQUALIFIED97Elwin Sharvill
1016Faith GillianArgentina2026-06-02Dorl, James J Esq UNQUALIFIED52Xuxue Feng
1017Maisha RulapaughArgentina2026-06-03Chanay, Jeffrey A Esq QUALIFIED78Onyama Limba
1018Emily WhobreyIndia2026-06-06Rousseaux, Michael Esq NEGOTIATION5Stephen Shaw
1019Morrow RutaBrazil2026-05-29Feltz Printing Service NEGOTIATION62Asiya Javayant
1020Sinclair WaycottBrazil2026-05-28Truhlar And Truhlar Attys UNQUALIFIED79Anna Fali
1021Wickens NestleBrazil2026-05-27Printing Dimensions NEW56Xuxue Feng
1022Isabel BowleyItaly2026-05-10Dorl, James J Esq RENEWAL8Stephen Shaw
1023Silvio SlusarskiBrazil2026-05-18Feiner Bros QUALIFIED85Xuxue Feng
1024Adams MorascaBrazil2026-05-18Chanay, Jeffrey A Esq NEGOTIATION40Ivan Magalhaes
1025Mayumi KolmetzCanada2026-05-21Feltz Printing Service PROPOSAL21Amy Elsner
1026Leon OldroydRussia2026-05-10Rousseaux, Michael Esq NEW68Amy Elsner
1027Mujtaba NickaAustralia2026-06-01Dorl, James J Esq UNQUALIFIED34Asiya Javayant
1028Ivar PaprockiCanada2026-06-03King, Christopher A Esq UNQUALIFIED51Asiya Javayant
1029Costa DilliardCanada2026-05-21Feiner Bros NEW36Ivan Magalhaes
1030Isabel BowleyGermany2026-05-23Buckley Miller Wright NEGOTIATION37Ioni Bowcher
1031Octavia MaletIndia2026-06-01King, Christopher A Esq NEW70Xuxue Feng
1032Munro FerenczFrance2026-06-06Chapman, Ross E Esq RENEWAL57Ivan Magalhaes
1033Wickens NestleUnited Kingdom2026-05-14Chemel, James L Cpa PROPOSAL19Elwin Sharvill
1034Faith GillianIndia2026-06-03King, Christopher A Esq NEGOTIATION19Xuxue Feng
1035Aika InouyeIndia2026-05-30Dorl, James J Esq NEGOTIATION14Amy Elsner
1036Wickens NestleCanada2026-05-20Rangoni Of Florence PROPOSAL10Onyama Limba
1037Deepesh ChuiJapan2026-05-30Feltz Printing Service RENEWAL13Ivan Magalhaes
1038Julie StensethJapan2026-05-25Printing Dimensions NEW79Ioni Bowcher
1039Tony FollerAustralia2026-05-25Printing Dimensions QUALIFIED33Onyama Limba
1040Nicolas IturbideUnited Kingdom2026-05-11Truhlar And Truhlar Attys NEW0Ioni Bowcher
1041Deepesh ChuiArgentina2026-05-28Truhlar And Truhlar Attys PROPOSAL64Anna Fali
1042Claire TollnerAustralia2026-05-18Chemel, James L Cpa RENEWAL23Ivan Magalhaes
1043Wickens NestleRussia2026-05-11Chapman, Ross E Esq PROPOSAL39Anna Fali
1044Morrow RutaIndia2026-05-16Dorl, James J Esq NEW12Stephen Shaw
1045Misaki RoysterBrazil2026-05-17Dorl, James J Esq QUALIFIED69Ivan Magalhaes
1046Mujtaba NickaJapan2026-05-11King, Christopher A Esq PROPOSAL0Onyama Limba
1047Antonio CaudyAustralia2026-06-02Rangoni Of Florence QUALIFIED76Amy Elsner
1048Adams MorascaAustralia2026-06-05Rousseaux, Michael Esq UNQUALIFIED65Stephen Shaw
1049Greenwood BologniaArgentina2026-05-12Feiner Bros UNQUALIFIED80Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottSpainStephen Shaw QUALIFIED
Kadeem FlosiArgentinaIoni Bowcher NEGOTIATION
Ivar PaprockiCanadaAsiya Javayant NEW
Deepesh ChuiBrazilIoni Bowcher PROPOSAL
Munro FerenczSpainElwin Sharvill QUALIFIED
Chavez BriddickIndiaStephen Shaw QUALIFIED
Kadeem FlosiBrazilAnna Fali QUALIFIED
Jeanfrancois VenereAustraliaBernardo Dominic PROPOSAL
Mayumi KolmetzFranceOnyama Limba UNQUALIFIED
Wickens NestleGermanyElwin Sharvill NEW
Kadeem FlosiFranceIvan Magalhaes PROPOSAL
Leon OldroydUnited KingdomStephen Shaw NEGOTIATION
Kadeem FlosiBrazilStephen Shaw NEGOTIATION
Aruna FigeroaAustraliaIvan Magalhaes QUALIFIED
Aruna FigeroaBrazilBernardo Dominic NEW
Aditya KuskoUnited KingdomAmy Elsner PROPOSAL
Antonio CaudyFranceIoni Bowcher RENEWAL
Sinclair WaycottGermanyElwin Sharvill QUALIFIED
Kaitlin OstroskyAustraliaStephen Shaw QUALIFIED
Costa DilliardGermanyAsiya Javayant NEGOTIATION
Murillo MaletGermanyElwin Sharvill UNQUALIFIED
David DarakjyUnited KingdomXuxue Feng PROPOSAL
Morrow RutaJapanAnna Fali UNQUALIFIED
Chavez BriddickGermanyOnyama Limba NEGOTIATION
Deepesh ChuiCanadaBernardo Dominic UNQUALIFIED
Morrow RutaArgentinaAsiya Javayant NEW
Misaki RoysterGermanyAmy Elsner NEW
Misaki RoysterRussiaStephen Shaw NEGOTIATION
Greenwood BologniaAustraliaOnyama Limba UNQUALIFIED
Cody SaylorsSpainIoni Bowcher PROPOSAL
Francesco ShinkoSpainAnna Fali NEGOTIATION
Claire TollnerSpainStephen Shaw PROPOSAL
Claire TollnerAustraliaBernardo Dominic RENEWAL
Jeanfrancois VenereIndiaBernardo Dominic NEGOTIATION
Ricardo GauchoJapanOnyama Limba NEW
Octavia MaletArgentinaAsiya Javayant RENEWAL
Aditya KuskoIndiaAnna Fali RENEWAL
Maria MarrierFranceAmy Elsner PROPOSAL
Salvatore StockhamBrazilAnna Fali QUALIFIED
Mujtaba NickaFranceXuxue Feng UNQUALIFIED
Kaitlin OstroskyAustraliaStephen Shaw QUALIFIED
Arvin AlbaresSpainIvan Magalhaes UNQUALIFIED
Darci PoquetteSpainOnyama Limba PROPOSAL
Francesco ShinkoGermanyXuxue Feng PROPOSAL
Munro FerenczRussiaAnna Fali UNQUALIFIED
Deepesh ChuiItalyAmy Elsner NEGOTIATION
Francesco ShinkoFranceAnna Fali NEGOTIATION
Murillo MaletAustraliaElwin Sharvill NEGOTIATION
Johnson SergiFranceXuxue Feng RENEWAL
Morrow RutaCanadaIoni Bowcher NEGOTIATION
Frozen Columns
Name
Leon Oldroyd
Aditya Kusko
Morrow Ruta
Murillo Malet
Jones Vocelka
Munro Ferencz
Izzy Garufi
Jeanfrancois Venere
Salvatore Stockham
Octavia Malet
Rodrigues Campain
James Butt
Juan Wieser
Clifford Rim
Costa Dilliard
Kadeem Flosi
Ashley Doe
Kadeem Flosi
Ivar Paprocki
Greenwood Bolognia
Adams Morasca
Juan Wieser
Wickens Nestle
Julie Stenseth
James Butt
Murillo Malet
David Darakjy
Izzy Garufi
Aika Inouye
Isabel Bowley
Mujtaba Nicka
Aruna Figeroa
Cody Saylors
Mujtaba Nicka
Julie Stenseth
Leon Oldroyd
Aditya Kusko
Rodrigues Campain
Julie Stenseth
Clifford Rim
Maria Marrier
Aruna Figeroa
Aika Inouye
Mayumi Kolmetz
Sinclair Waycott
Mujtaba Nicka
Sinclair Waycott
Ricardo Gaucho
Tony Foller
Kaitlin Ostrosky
IdCountryDate
1000France2026-05-10
1001United Kingdom2026-05-30
1002Russia2026-06-06
1003Argentina2026-05-30
1004Spain2026-06-02
1005Italy2026-05-16
1006Spain2026-06-02
1007Spain2026-06-02
1008United Kingdom2026-05-29
1009Japan2026-06-05
1010Australia2026-05-26
1011United Kingdom2026-06-03
1012Argentina2026-05-12
1013Germany2026-05-18
1014Brazil2026-06-04
1015Germany2026-05-30
1016Russia2026-05-29
1017Japan2026-05-29
1018Spain2026-05-27
1019Germany2026-05-08
1020Spain2026-06-02
1021United Kingdom2026-06-02
1022Japan2026-05-08
1023Canada2026-06-04
1024France2026-05-10
1025United Kingdom2026-06-04
1026United Kingdom2026-05-25
1027Germany2026-05-16
1028Australia2026-05-28
1029United Kingdom2026-05-17
1030Canada2026-05-29
1031Japan2026-05-24
1032France2026-05-11
1033Canada2026-05-13
1034Italy2026-05-24
1035Australia2026-05-12
1036Japan2026-05-28
1037Russia2026-05-10
1038Italy2026-05-11
1039Russia2026-05-23
1040United Kingdom2026-05-15
1041Spain2026-06-03
1042Germany2026-05-10
1043Australia2026-06-02
1044United Kingdom2026-05-13
1045Spain2026-05-28
1046Brazil2026-06-04
1047Spain2026-06-05
1048Russia2026-06-01
1049Italy2026-05-20

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000Spain2026-05-17
David Darakjy1001Spain2026-05-16
Johnson Sergi1002Argentina2026-05-18
Alejandro Perin1003Spain2026-05-13
Stacey Maclead1004France2026-06-02
Greenwood Bolognia1005Spain2026-05-19
Chavez Briddick1006United Kingdom2026-05-13
Maria Marrier1007Japan2026-05-29
Smith Glick1008Brazil2026-05-24
Deepesh Chui1009France2026-05-19
Aika Inouye1010Italy2026-05-11
Kaitlin Ostrosky1011Japan2026-05-26
Izzy Garufi1012Russia2026-06-06
Izzy Garufi1013Brazil2026-05-21
Izzy Garufi1014France2026-05-11
Deepesh Chui1015Russia2026-06-05
Ivar Paprocki1016Germany2026-06-01
Silvio Slusarski1017Spain2026-05-10
Chavez Briddick1018Australia2026-05-30
Sinclair Waycott1019Spain2026-05-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyJapanAmy Elsner NEGOTIATION
Darci PoquetteFranceElwin Sharvill NEGOTIATION
Sinclair WaycottSpainAsiya Javayant PROPOSAL
Ricardo GauchoArgentinaAsiya Javayant PROPOSAL
Rodrigues CampainGermanyOnyama Limba RENEWAL
James ButtJapanXuxue Feng UNQUALIFIED
Chavez BriddickItalyAmy Elsner NEW
Tony FollerFranceIoni Bowcher UNQUALIFIED
Juan WieserAustraliaIvan Magalhaes NEW
Claire TollnerSpainIoni Bowcher UNQUALIFIED
Munro FerenczRussiaBernardo Dominic QUALIFIED
Salvatore StockhamBrazilStephen Shaw QUALIFIED
Morrow RutaRussiaAnna Fali NEW
Octavia MaletJapanStephen Shaw RENEWAL
Smith GlickItalyAnna Fali QUALIFIED
Faith GillianItalyXuxue Feng UNQUALIFIED
Ivar PaprockiIndiaBernardo Dominic QUALIFIED
Francesco ShinkoFranceBernardo Dominic RENEWAL
Maria MarrierArgentinaAmy Elsner RENEWAL
Smith GlickJapanXuxue Feng QUALIFIED
Johnson SergiUnited KingdomAnna Fali PROPOSAL
Juan WieserFranceIvan Magalhaes UNQUALIFIED
Cody SaylorsJapanAmy Elsner NEW
Leja CaldareraAustraliaBernardo Dominic NEW
Sinclair WaycottBrazilAmy Elsner RENEWAL
Julie StensethCanadaIoni Bowcher NEW
Aditya KuskoSpainBernardo Dominic NEGOTIATION
Francesco ShinkoIndiaXuxue Feng RENEWAL
Antonio CaudyIndiaAsiya Javayant NEGOTIATION
Tony FollerFranceBernardo Dominic UNQUALIFIED
Juan WieserSpainIoni Bowcher NEGOTIATION
Emily WhobreyUnited KingdomAsiya Javayant NEW
Chavez BriddickBrazilElwin Sharvill PROPOSAL
Adams MorascaBrazilXuxue Feng QUALIFIED
Mayumi KolmetzAustraliaAsiya Javayant PROPOSAL
David DarakjyArgentinaXuxue Feng QUALIFIED
Francesco ShinkoGermanyBernardo Dominic PROPOSAL
Arvin AlbaresSpainOnyama Limba RENEWAL
Jones VocelkaCanadaBernardo Dominic NEGOTIATION
Morrow RutaBrazilIvan 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>