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
Faith GillianFranceAnna Fali NEGOTIATION
Leon OldroydAustraliaOnyama Limba NEW
Mujtaba NickaAustraliaAsiya Javayant QUALIFIED
Aditya KuskoRussiaXuxue Feng QUALIFIED
Claire TollnerIndiaAmy Elsner QUALIFIED
Munro FerenczAustraliaElwin Sharvill QUALIFIED
Deepesh ChuiArgentinaElwin Sharvill RENEWAL
Ivar PaprockiRussiaIoni Bowcher QUALIFIED
Isabel BowleyUnited KingdomAmy Elsner PROPOSAL
Misaki RoysterCanadaAsiya Javayant QUALIFIED
Aruna FigeroaBrazilAmy Elsner RENEWAL
Jeanfrancois VenereJapanXuxue Feng RENEWAL
Stacey MacleadAustraliaIvan Magalhaes NEW
Deepesh ChuiRussiaBernardo Dominic NEGOTIATION
Murillo MaletItalyXuxue Feng NEGOTIATION
Nicolas IturbideArgentinaOnyama Limba UNQUALIFIED
Arvin AlbaresIndiaBernardo Dominic PROPOSAL
Octavia MaletUnited KingdomIoni Bowcher NEGOTIATION
Morrow RutaBrazilOnyama Limba RENEWAL
Mayumi KolmetzUnited KingdomAsiya Javayant PROPOSAL
Mujtaba NickaRussiaBernardo Dominic RENEWAL
Nicolas IturbideRussiaAsiya Javayant NEGOTIATION
Wickens NestleJapanIvan Magalhaes NEGOTIATION
Murillo MaletSpainElwin Sharvill UNQUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant UNQUALIFIED
Stacey MacleadArgentinaBernardo Dominic QUALIFIED
Sinclair WaycottItalyStephen Shaw PROPOSAL
Aika InouyeBrazilAmy Elsner UNQUALIFIED
Antonio CaudyUnited KingdomStephen Shaw QUALIFIED
Greenwood BologniaFranceAmy Elsner QUALIFIED
Claire TollnerJapanAsiya Javayant NEGOTIATION
Ashley DoeFranceBernardo Dominic UNQUALIFIED
Greenwood BologniaItalyAmy Elsner NEGOTIATION
Johnson SergiJapanOnyama Limba NEGOTIATION
Nicolas IturbideItalyAnna Fali UNQUALIFIED
Wickens NestleUnited KingdomIvan Magalhaes RENEWAL
James ButtUnited KingdomIoni Bowcher NEGOTIATION
Chavez BriddickRussiaAmy Elsner QUALIFIED
Greenwood BologniaJapanBernardo Dominic QUALIFIED
Leja CaldareraRussiaOnyama Limba NEGOTIATION
Maisha RulapaughBrazilAmy Elsner NEGOTIATION
Stacey MacleadRussiaBernardo Dominic PROPOSAL
Clifford RimBrazilXuxue Feng NEW
Chavez BriddickCanadaStephen Shaw NEW
Mayumi KolmetzUnited KingdomStephen Shaw RENEWAL
Alejandro PerinCanadaElwin Sharvill UNQUALIFIED
James ButtBrazilAsiya Javayant RENEWAL
Darci PoquetteGermanyStephen Shaw QUALIFIED
Wickens NestleSpainElwin Sharvill RENEWAL
Adams MorascaSpainStephen Shaw NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterIndiaAmy Elsner RENEWAL
Munro FerenczSpainAmy Elsner QUALIFIED
Francesco ShinkoRussiaXuxue Feng PROPOSAL
Clifford RimItalyXuxue Feng UNQUALIFIED
Smith GlickUnited KingdomElwin Sharvill PROPOSAL
Ivar PaprockiAustraliaStephen Shaw NEW
Morrow RutaAustraliaBernardo Dominic UNQUALIFIED
Jennifer AmigonJapanIvan Magalhaes NEGOTIATION
Juan WieserRussiaAsiya Javayant NEGOTIATION
Octavia MaletItalyAmy Elsner QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Adams MorascaSpain2025-08-28Feltz Printing Service NEW35Amy Elsner
1001Wickens NestleGermany2025-08-23Commercial Press UNQUALIFIED33Ioni Bowcher
1002Emily WhobreyBrazil2025-08-31Morlong Associates QUALIFIED5Stephen Shaw
1003Morrow RutaBrazil2025-09-02Rousseaux, Michael Esq QUALIFIED30Asiya Javayant
1004Sinclair WaycottArgentina2025-09-03Rousseaux, Michael Esq RENEWAL9Xuxue Feng
1005Greenwood BologniaJapan2025-08-22Feltz Printing Service NEW90Elwin Sharvill
1006Jones VocelkaBrazil2025-09-05Dorl, James J Esq PROPOSAL62Onyama Limba
1007Silvio SlusarskiArgentina2025-09-13Printing Dimensions RENEWAL10Ivan Magalhaes
1008Aruna FigeroaArgentina2025-09-04Morlong Associates NEW96Bernardo Dominic
1009Jeanfrancois VenereArgentina2025-08-22Morlong Associates RENEWAL86Onyama Limba
1010Alejandro PerinSpain2025-09-14Buckley Miller Wright NEGOTIATION0Asiya Javayant
1011Maria MarrierSpain2025-08-31Rangoni Of Florence PROPOSAL24Ivan Magalhaes
1012Claire TollnerItaly2025-08-30King, Christopher A Esq NEW34Anna Fali
1013Mayumi KolmetzAustralia2025-08-25Feiner Bros RENEWAL51Xuxue Feng
1014Rodrigues CampainBrazil2025-08-26Feiner Bros NEW87Onyama Limba
1015Jones VocelkaSpain2025-09-11Dorl, James J Esq NEGOTIATION48Ivan Magalhaes
1016Maria MarrierGermany2025-09-05Truhlar And Truhlar Attys NEW4Stephen Shaw
1017Aditya KuskoBrazil2025-08-21Rousseaux, Michael Esq UNQUALIFIED31Stephen Shaw
1018Jefferson SchemmerSpain2025-08-31Feltz Printing Service RENEWAL61Xuxue Feng
1019Isabel BowleyIndia2025-08-27Chemel, James L Cpa PROPOSAL17Ivan Magalhaes
1020Deepesh ChuiGermany2025-08-28Benton, John B Jr NEW87Ioni Bowcher
1021David DarakjyBrazil2025-08-16Dorl, James J Esq UNQUALIFIED68Bernardo Dominic
1022Maisha RulapaughAustralia2025-08-23Chemel, James L Cpa PROPOSAL30Xuxue Feng
1023Deepesh ChuiUnited Kingdom2025-09-04Rousseaux, Michael Esq PROPOSAL41Bernardo Dominic
1024Emily WhobreyGermany2025-09-06Chemel, James L Cpa UNQUALIFIED95Xuxue Feng
1025Aditya KuskoGermany2025-09-05Feltz Printing Service UNQUALIFIED73Xuxue Feng
1026Sinclair WaycottCanada2025-09-02Rousseaux, Michael Esq RENEWAL66Xuxue Feng
1027Murillo MaletSpain2025-08-22Commercial Press NEGOTIATION50Amy Elsner
1028Darci PoquetteJapan2025-09-05Commercial Press QUALIFIED33Amy Elsner
1029Morrow RutaBrazil2025-09-08Truhlar And Truhlar Attys PROPOSAL46Stephen Shaw
1030Mayumi KolmetzFrance2025-09-11Rousseaux, Michael Esq PROPOSAL91Xuxue Feng
1031Arvin AlbaresSpain2025-08-20Rousseaux, Michael Esq NEGOTIATION37Bernardo Dominic
1032Darci PoquetteIndia2025-09-13Rangoni Of Florence PROPOSAL85Bernardo Dominic
1033Alejandro PerinRussia2025-08-22Rangoni Of Florence PROPOSAL50Ioni Bowcher
1034Salvatore StockhamGermany2025-09-03Morlong Associates UNQUALIFIED26Xuxue Feng
1035Octavia MaletItaly2025-09-06Benton, John B Jr NEW46Amy Elsner
1036Octavia MaletJapan2025-09-08Truhlar And Truhlar Attys QUALIFIED54Amy Elsner
1037Munro FerenczUnited Kingdom2025-08-27Chemel, James L Cpa RENEWAL8Bernardo Dominic
1038Ashley DoeAustralia2025-09-11Chanay, Jeffrey A Esq NEW31Stephen Shaw
1039Alejandro PerinItaly2025-09-09Chanay, Jeffrey A Esq RENEWAL21Anna Fali
1040Chavez BriddickUnited Kingdom2025-09-06Dorl, James J Esq PROPOSAL38Bernardo Dominic
1041Julie StensethAustralia2025-09-01Commercial Press RENEWAL83Ioni Bowcher
1042Costa DilliardIndia2025-09-05Chapman, Ross E Esq NEW18Onyama Limba
1043Mujtaba NickaIndia2025-08-24Commercial Press PROPOSAL89Ioni Bowcher
1044Chavez BriddickJapan2025-09-12Chapman, Ross E Esq RENEWAL64Elwin Sharvill
1045Salvatore StockhamItaly2025-08-30Dorl, James J Esq NEW38Amy Elsner
1046Maria MarrierCanada2025-09-01Dorl, James J Esq NEW60Elwin Sharvill
1047Leja CaldareraRussia2025-08-29Benton, John B Jr UNQUALIFIED75Onyama Limba
1048Darci PoquetteIndia2025-08-19Rousseaux, Michael Esq NEW40Xuxue Feng
1049Cody SaylorsUnited Kingdom2025-08-18Rangoni Of Florence NEGOTIATION16Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Clifford RimBrazilIoni Bowcher PROPOSAL
Izzy GarufiBrazilStephen Shaw UNQUALIFIED
Ashley DoeArgentinaBernardo Dominic PROPOSAL
Aruna FigeroaJapanBernardo Dominic RENEWAL
Adams MorascaUnited KingdomAsiya Javayant NEW
Munro FerenczArgentinaAmy Elsner PROPOSAL
James ButtBrazilElwin Sharvill PROPOSAL
Emily WhobreyFranceElwin Sharvill NEGOTIATION
Costa DilliardCanadaAmy Elsner UNQUALIFIED
Sinclair WaycottIndiaXuxue Feng RENEWAL
Kaitlin OstroskyFranceIoni Bowcher PROPOSAL
Rodrigues CampainArgentinaElwin Sharvill NEGOTIATION
Isabel BowleyItalyAnna Fali NEGOTIATION
Clifford RimRussiaBernardo Dominic PROPOSAL
Costa DilliardJapanXuxue Feng PROPOSAL
Antonio CaudyBrazilIvan Magalhaes PROPOSAL
Aditya KuskoRussiaElwin Sharvill NEW
Ivar PaprockiBrazilAsiya Javayant UNQUALIFIED
Emily WhobreyAustraliaIoni Bowcher QUALIFIED
Chavez BriddickCanadaXuxue Feng UNQUALIFIED
Clifford RimCanadaIoni Bowcher RENEWAL
Clifford RimIndiaXuxue Feng QUALIFIED
Murillo MaletGermanyAnna Fali QUALIFIED
Julie StensethCanadaStephen Shaw NEGOTIATION
Ricardo GauchoUnited KingdomElwin Sharvill PROPOSAL
Francesco ShinkoRussiaAmy Elsner UNQUALIFIED
Morrow RutaGermanyOnyama Limba UNQUALIFIED
Costa DilliardFranceAmy Elsner PROPOSAL
Jeanfrancois VenereCanadaIvan Magalhaes QUALIFIED
Clifford RimFranceAsiya Javayant QUALIFIED
Ashley DoeSpainXuxue Feng NEGOTIATION
Greenwood BologniaUnited KingdomXuxue Feng UNQUALIFIED
Stacey MacleadUnited KingdomOnyama Limba QUALIFIED
Octavia MaletUnited KingdomAsiya Javayant NEW
Maria MarrierItalyXuxue Feng QUALIFIED
Greenwood BologniaJapanIvan Magalhaes RENEWAL
Isabel BowleyAustraliaIoni Bowcher RENEWAL
Costa DilliardItalyIvan Magalhaes QUALIFIED
Jeanfrancois VenereUnited KingdomOnyama Limba QUALIFIED
Aika InouyeFranceAnna Fali PROPOSAL
Deepesh ChuiFranceIvan Magalhaes RENEWAL
Tony FollerUnited KingdomIvan Magalhaes RENEWAL
Jones VocelkaIndiaAnna Fali PROPOSAL
Salvatore StockhamFranceIoni Bowcher NEGOTIATION
Adams MorascaSpainElwin Sharvill NEW
Nicolas IturbideJapanAsiya Javayant NEGOTIATION
Kaitlin OstroskyBrazilOnyama Limba NEGOTIATION
Salvatore StockhamRussiaAmy Elsner RENEWAL
Adams MorascaUnited KingdomIoni Bowcher PROPOSAL
Claire TollnerCanadaBernardo Dominic UNQUALIFIED
Frozen Columns
Name
Julie Stenseth
Francesco Shinko
Alejandro Perin
Greenwood Bolognia
Jennifer Amigon
Cody Saylors
Ashley Doe
Sinclair Waycott
Deepesh Chui
Ashley Doe
Leon Oldroyd
Kaitlin Ostrosky
Antonio Caudy
Octavia Malet
Costa Dilliard
Morrow Ruta
Johnson Sergi
Leon Oldroyd
Silvio Slusarski
Smith Glick
Ashley Doe
Costa Dilliard
Maria Marrier
Greenwood Bolognia
Leja Caldarera
Ashley Doe
Ivar Paprocki
Wickens Nestle
Clifford Rim
Faith Gillian
Chavez Briddick
Maria Marrier
Aruna Figeroa
Clifford Rim
Nicolas Iturbide
Darci Poquette
David Darakjy
Munro Ferencz
Wickens Nestle
Leja Caldarera
Francesco Shinko
Leon Oldroyd
Tony Foller
Aika Inouye
David Darakjy
Ricardo Gaucho
Jones Vocelka
Isabel Bowley
Julie Stenseth
Jennifer Amigon
IdCountryDate
1000Spain2025-08-19
1001Australia2025-08-30
1002Russia2025-08-21
1003Spain2025-09-02
1004Japan2025-08-31
1005Japan2025-08-21
1006Japan2025-08-16
1007Germany2025-09-10
1008Canada2025-09-09
1009Russia2025-08-24
1010Canada2025-09-02
1011Germany2025-09-07
1012United Kingdom2025-08-17
1013Canada2025-09-14
1014Russia2025-08-17
1015Argentina2025-09-14
1016Spain2025-08-19
1017Russia2025-08-19
1018Japan2025-09-13
1019Spain2025-08-29
1020France2025-08-29
1021United Kingdom2025-08-27
1022Australia2025-08-16
1023Germany2025-08-27
1024Spain2025-08-23
1025United Kingdom2025-09-10
1026Australia2025-09-05
1027Australia2025-08-21
1028Australia2025-09-01
1029Japan2025-09-04
1030United Kingdom2025-08-27
1031United Kingdom2025-09-10
1032Argentina2025-08-31
1033Spain2025-08-27
1034Argentina2025-08-25
1035Germany2025-09-08
1036Italy2025-09-05
1037Germany2025-09-04
1038Argentina2025-08-25
1039Brazil2025-08-24
1040United Kingdom2025-08-30
1041Germany2025-08-18
1042Spain2025-09-04
1043Brazil2025-09-12
1044Italy2025-08-30
1045Russia2025-08-29
1046India2025-09-11
1047United Kingdom2025-09-03
1048United Kingdom2025-08-28
1049Canada2025-08-27

On-Demand Data

NameIdCountryDate
Ricardo Gaucho1000Canada2025-09-10
Ashley Doe1001Russia2025-09-03
Deepesh Chui1002India2025-09-06
Mayumi Kolmetz1003Japan2025-08-20
Greenwood Bolognia1004Germany2025-08-27
James Butt1005United Kingdom2025-09-09
Deepesh Chui1006United Kingdom2025-09-08
Adams Morasca1007Spain2025-09-11
Jones Vocelka1008Russia2025-08-28
Jones Vocelka1009Russia2025-08-31
Darci Poquette1010Italy2025-08-27
Morrow Ruta1011Russia2025-08-18
Francesco Shinko1012Italy2025-08-29
Aruna Figeroa1013Spain2025-08-27
Clifford Rim1014Russia2025-09-01
Deepesh Chui1015Australia2025-09-06
Tony Foller1016Japan2025-08-19
Stacey Maclead1017India2025-08-25
Julie Stenseth1018France2025-09-04
Tony Foller1019Japan2025-08-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Julie StensethIndiaOnyama Limba NEGOTIATION
Maria MarrierRussiaIoni Bowcher PROPOSAL
Alejandro PerinBrazilAsiya Javayant PROPOSAL
Isabel BowleyAustraliaAmy Elsner QUALIFIED
Ricardo GauchoItalyAsiya Javayant RENEWAL
Greenwood BologniaSpainXuxue Feng QUALIFIED
Aditya KuskoJapanBernardo Dominic QUALIFIED
Isabel BowleyItalyIvan Magalhaes NEW
Claire TollnerItalyBernardo Dominic PROPOSAL
Octavia MaletGermanyOnyama Limba UNQUALIFIED
Mayumi KolmetzBrazilAsiya Javayant PROPOSAL
Tony FollerCanadaIoni Bowcher NEGOTIATION
Adams MorascaRussiaElwin Sharvill NEGOTIATION
Silvio SlusarskiCanadaXuxue Feng NEGOTIATION
Costa DilliardItalyStephen Shaw QUALIFIED
Sinclair WaycottFranceStephen Shaw UNQUALIFIED
Isabel BowleyBrazilAnna Fali PROPOSAL
Maisha RulapaughIndiaAnna Fali PROPOSAL
Smith GlickUnited KingdomAmy Elsner PROPOSAL
Antonio CaudyArgentinaElwin Sharvill RENEWAL
Cody SaylorsJapanAsiya Javayant UNQUALIFIED
James ButtRussiaIoni Bowcher NEW
Isabel BowleyCanadaAsiya Javayant NEW
Jeanfrancois VenereCanadaXuxue Feng UNQUALIFIED
Mayumi KolmetzItalyOnyama Limba NEGOTIATION
Aika InouyeCanadaOnyama Limba QUALIFIED
Costa DilliardJapanAnna Fali NEGOTIATION
Nicolas IturbideIndiaIoni Bowcher NEGOTIATION
Smith GlickAustraliaAmy Elsner UNQUALIFIED
Leja CaldareraIndiaIoni Bowcher NEW
Jeanfrancois VenereJapanElwin Sharvill RENEWAL
Ricardo GauchoGermanyOnyama Limba UNQUALIFIED
Cody SaylorsArgentinaIvan Magalhaes QUALIFIED
Emily WhobreyCanadaAsiya Javayant UNQUALIFIED
Deepesh ChuiIndiaStephen Shaw QUALIFIED
Jeanfrancois VenereBrazilIoni Bowcher QUALIFIED
Juan WieserArgentinaAsiya Javayant UNQUALIFIED
Morrow RutaItalyIoni Bowcher RENEWAL
Jones VocelkaUnited KingdomElwin Sharvill UNQUALIFIED
Murillo MaletAustraliaIvan Magalhaes 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>