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
Aika InouyeCanadaIoni Bowcher NEGOTIATION
Kadeem FlosiUnited KingdomAmy Elsner UNQUALIFIED
Stacey MacleadUnited KingdomAnna Fali QUALIFIED
Ashley DoeGermanyOnyama Limba NEW
Nicolas IturbideItalyXuxue Feng UNQUALIFIED
Munro FerenczArgentinaAmy Elsner NEGOTIATION
Faith GillianBrazilAmy Elsner PROPOSAL
Alejandro PerinCanadaXuxue Feng NEW
Morrow RutaGermanyIoni Bowcher PROPOSAL
Deepesh ChuiRussiaIvan Magalhaes QUALIFIED
Claire TollnerItalyIoni Bowcher RENEWAL
Aika InouyeBrazilIvan Magalhaes RENEWAL
Deepesh ChuiArgentinaElwin Sharvill UNQUALIFIED
Ashley DoeRussiaIoni Bowcher NEGOTIATION
Salvatore StockhamFranceIvan Magalhaes NEW
Ivar PaprockiGermanyAnna Fali NEGOTIATION
Izzy GarufiCanadaBernardo Dominic NEW
Ashley DoeArgentinaXuxue Feng UNQUALIFIED
Aruna FigeroaIndiaElwin Sharvill NEW
Tony FollerFranceAnna Fali NEGOTIATION
Faith GillianArgentinaIvan Magalhaes RENEWAL
Aruna FigeroaRussiaAmy Elsner QUALIFIED
Aika InouyeIndiaBernardo Dominic NEGOTIATION
Costa DilliardIndiaAmy Elsner QUALIFIED
Silvio SlusarskiSpainElwin Sharvill NEGOTIATION
Jones VocelkaSpainOnyama Limba PROPOSAL
Kaitlin OstroskyFranceAmy Elsner UNQUALIFIED
Wickens NestleUnited KingdomBernardo Dominic PROPOSAL
Smith GlickItalyAsiya Javayant NEW
Claire TollnerGermanyAnna Fali QUALIFIED
Clifford RimJapanOnyama Limba QUALIFIED
Ashley DoeItalyXuxue Feng NEGOTIATION
Morrow RutaGermanyAmy Elsner NEW
Juan WieserFranceOnyama Limba RENEWAL
Emily WhobreySpainOnyama Limba RENEWAL
Tony FollerFranceStephen Shaw NEGOTIATION
Aika InouyeSpainAnna Fali QUALIFIED
Arvin AlbaresCanadaElwin Sharvill RENEWAL
Aika InouyeArgentinaBernardo Dominic NEW
Aika InouyeBrazilXuxue Feng NEW
Morrow RutaUnited KingdomOnyama Limba PROPOSAL
Morrow RutaCanadaAnna Fali RENEWAL
Ivar PaprockiJapanAsiya Javayant QUALIFIED
Nicolas IturbideRussiaIoni Bowcher UNQUALIFIED
Ivar PaprockiAustraliaElwin Sharvill RENEWAL
Adams MorascaUnited KingdomIvan Magalhaes NEGOTIATION
Adams MorascaJapanStephen Shaw RENEWAL
Darci PoquetteJapanAsiya Javayant NEW
David DarakjyAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottUnited KingdomAnna Fali PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Alejandro PerinBrazilIoni Bowcher QUALIFIED
Claire TollnerIndiaIvan Magalhaes UNQUALIFIED
Sinclair WaycottRussiaStephen Shaw PROPOSAL
Julie StensethIndiaIvan Magalhaes UNQUALIFIED
Aditya KuskoAustraliaIoni Bowcher PROPOSAL
Costa DilliardCanadaAsiya Javayant NEW
Cody SaylorsFranceStephen Shaw NEW
Arvin AlbaresItalyAmy Elsner QUALIFIED
Adams MorascaArgentinaAmy Elsner UNQUALIFIED
Izzy GarufiBrazilBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyItaly2026-05-11Dorl, James J Esq UNQUALIFIED80Bernardo Dominic
1001Mayumi KolmetzBrazil2026-05-13Feiner Bros QUALIFIED78Xuxue Feng
1002Aruna FigeroaUnited Kingdom2026-05-22Commercial Press QUALIFIED35Elwin Sharvill
1003Deepesh ChuiIndia2026-05-21Printing Dimensions PROPOSAL18Ioni Bowcher
1004Emily WhobreyRussia2026-05-16Feiner Bros RENEWAL73Bernardo Dominic
1005Cody SaylorsSpain2026-04-26Dorl, James J Esq NEW78Bernardo Dominic
1006Jennifer AmigonIndia2026-05-10Feltz Printing Service NEW26Ivan Magalhaes
1007Jefferson SchemmerAustralia2026-05-12Printing Dimensions QUALIFIED49Asiya Javayant
1008Claire TollnerArgentina2026-05-02Truhlar And Truhlar Attys RENEWAL38Xuxue Feng
1009Greenwood BologniaUnited Kingdom2026-05-04Chanay, Jeffrey A Esq NEGOTIATION16Stephen Shaw
1010Stacey MacleadIndia2026-05-08Feiner Bros NEGOTIATION9Bernardo Dominic
1011Julie StensethFrance2026-05-22Chemel, James L Cpa UNQUALIFIED65Bernardo Dominic
1012Jennifer AmigonGermany2026-05-11Feiner Bros UNQUALIFIED11Bernardo Dominic
1013Deepesh ChuiSpain2026-05-05Buckley Miller Wright PROPOSAL67Xuxue Feng
1014Costa DilliardSpain2026-04-30Rousseaux, Michael Esq PROPOSAL5Bernardo Dominic
1015Antonio CaudyArgentina2026-05-25Printing Dimensions QUALIFIED11Amy Elsner
1016Ashley DoeIndia2026-04-28Dorl, James J Esq QUALIFIED64Bernardo Dominic
1017Misaki RoysterAustralia2026-05-23Feltz Printing Service QUALIFIED16Ioni Bowcher
1018Wickens NestleRussia2026-05-05Rangoni Of Florence PROPOSAL91Elwin Sharvill
1019Wickens NestleArgentina2026-04-26Dorl, James J Esq RENEWAL57Ivan Magalhaes
1020Costa DilliardSpain2026-05-07Feiner Bros NEW66Asiya Javayant
1021Chavez BriddickArgentina2026-04-28Buckley Miller Wright RENEWAL94Elwin Sharvill
1022Jennifer AmigonFrance2026-05-21King, Christopher A Esq RENEWAL90Asiya Javayant
1023Stacey MacleadRussia2026-05-05Feiner Bros NEW34Ivan Magalhaes
1024Nicolas IturbideItaly2026-05-11Rousseaux, Michael Esq RENEWAL32Ioni Bowcher
1025Arvin AlbaresArgentina2026-05-16Benton, John B Jr NEGOTIATION11Onyama Limba
1026Jennifer AmigonRussia2026-05-05Chapman, Ross E Esq UNQUALIFIED68Ivan Magalhaes
1027Cody SaylorsUnited Kingdom2026-05-09Rangoni Of Florence UNQUALIFIED8Xuxue Feng
1028Maria MarrierFrance2026-05-04Commercial Press NEGOTIATION70Onyama Limba
1029Rodrigues CampainRussia2026-05-18Dorl, James J Esq RENEWAL90Ioni Bowcher
1030Cody SaylorsFrance2026-05-01Chanay, Jeffrey A Esq QUALIFIED21Asiya Javayant
1031Misaki RoysterFrance2026-05-02Rangoni Of Florence NEGOTIATION93Amy Elsner
1032Alejandro PerinArgentina2026-05-17Dorl, James J Esq RENEWAL30Ioni Bowcher
1033Francesco ShinkoFrance2026-05-23Benton, John B Jr UNQUALIFIED28Anna Fali
1034Greenwood BologniaUnited Kingdom2026-04-30Rangoni Of Florence NEGOTIATION56Asiya Javayant
1035Munro FerenczRussia2026-05-01Feiner Bros QUALIFIED57Amy Elsner
1036Munro FerenczIndia2026-04-29Rousseaux, Michael Esq NEGOTIATION48Bernardo Dominic
1037Clifford RimUnited Kingdom2026-04-28Chanay, Jeffrey A Esq RENEWAL71Ioni Bowcher
1038Ricardo GauchoIndia2026-04-26Dorl, James J Esq NEW17Asiya Javayant
1039Darci PoquetteJapan2026-05-18Chemel, James L Cpa NEGOTIATION18Anna Fali
1040Deepesh ChuiItaly2026-05-19Feltz Printing Service RENEWAL95Onyama Limba
1041Juan WieserItaly2026-05-23Truhlar And Truhlar Attys PROPOSAL27Xuxue Feng
1042Johnson SergiGermany2026-05-15Truhlar And Truhlar Attys NEGOTIATION96Stephen Shaw
1043Stacey MacleadSpain2026-05-19Morlong Associates PROPOSAL40Bernardo Dominic
1044Arvin AlbaresArgentina2026-04-30Chapman, Ross E Esq PROPOSAL40Anna Fali
1045Octavia MaletFrance2026-05-09Buckley Miller Wright NEGOTIATION27Asiya Javayant
1046Nicolas IturbideRussia2026-05-23Benton, John B Jr RENEWAL83Bernardo Dominic
1047Adams MorascaGermany2026-05-08Chemel, James L Cpa NEGOTIATION48Asiya Javayant
1048Aruna FigeroaArgentina2026-05-07Chemel, James L Cpa PROPOSAL64Ivan Magalhaes
1049Aditya KuskoItaly2026-05-11Feltz Printing Service PROPOSAL66Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletArgentinaBernardo Dominic QUALIFIED
Clifford RimArgentinaOnyama Limba RENEWAL
Silvio SlusarskiFranceAmy Elsner RENEWAL
Darci PoquetteBrazilAmy Elsner NEW
Izzy GarufiArgentinaStephen Shaw RENEWAL
Ricardo GauchoFranceAsiya Javayant PROPOSAL
Kaitlin OstroskyRussiaIoni Bowcher QUALIFIED
Julie StensethRussiaBernardo Dominic PROPOSAL
Greenwood BologniaAustraliaAmy Elsner PROPOSAL
Ricardo GauchoRussiaXuxue Feng NEGOTIATION
Claire TollnerBrazilIoni Bowcher RENEWAL
Greenwood BologniaRussiaAnna Fali UNQUALIFIED
Aika InouyeAustraliaAsiya Javayant RENEWAL
Cody SaylorsArgentinaIoni Bowcher PROPOSAL
Morrow RutaBrazilXuxue Feng RENEWAL
Misaki RoysterAustraliaOnyama Limba PROPOSAL
Faith GillianJapanXuxue Feng UNQUALIFIED
Jones VocelkaUnited KingdomStephen Shaw NEW
David DarakjyCanadaIvan Magalhaes RENEWAL
Mayumi KolmetzGermanyStephen Shaw NEGOTIATION
Aditya KuskoGermanyAsiya Javayant NEGOTIATION
Murillo MaletJapanXuxue Feng QUALIFIED
Izzy GarufiRussiaElwin Sharvill UNQUALIFIED
Ashley DoeRussiaIoni Bowcher NEW
Juan WieserGermanyAmy Elsner RENEWAL
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Julie StensethUnited KingdomIvan Magalhaes RENEWAL
Mujtaba NickaIndiaIoni Bowcher NEGOTIATION
Faith GillianJapanAmy Elsner UNQUALIFIED
Maria MarrierSpainBernardo Dominic UNQUALIFIED
Maria MarrierAustraliaAmy Elsner PROPOSAL
Munro FerenczBrazilStephen Shaw RENEWAL
Aruna FigeroaAustraliaAsiya Javayant QUALIFIED
Maria MarrierSpainBernardo Dominic UNQUALIFIED
Jennifer AmigonUnited KingdomStephen Shaw UNQUALIFIED
Wickens NestleGermanyAmy Elsner UNQUALIFIED
Kadeem FlosiItalyXuxue Feng NEGOTIATION
Jefferson SchemmerArgentinaXuxue Feng UNQUALIFIED
Emily WhobreyJapanOnyama Limba UNQUALIFIED
Faith GillianRussiaAnna Fali PROPOSAL
Octavia MaletArgentinaBernardo Dominic NEW
Misaki RoysterCanadaAnna Fali PROPOSAL
Kaitlin OstroskyCanadaAsiya Javayant NEGOTIATION
Mayumi KolmetzBrazilStephen Shaw PROPOSAL
Claire TollnerAustraliaXuxue Feng RENEWAL
Rodrigues CampainRussiaAmy Elsner NEW
Jennifer AmigonArgentinaAnna Fali NEGOTIATION
Mujtaba NickaGermanyAsiya Javayant QUALIFIED
Deepesh ChuiGermanyIvan Magalhaes RENEWAL
Silvio SlusarskiCanadaIoni Bowcher RENEWAL
Frozen Columns
Name
Antonio Caudy
Ricardo Gaucho
Aditya Kusko
Greenwood Bolognia
Jones Vocelka
Juan Wieser
Juan Wieser
Deepesh Chui
Isabel Bowley
Mayumi Kolmetz
Darci Poquette
Silvio Slusarski
Alejandro Perin
Isabel Bowley
Darci Poquette
Octavia Malet
Maria Marrier
Nicolas Iturbide
Nicolas Iturbide
Cody Saylors
Emily Whobrey
Jennifer Amigon
Clifford Rim
Juan Wieser
Nicolas Iturbide
Darci Poquette
Ivar Paprocki
Aditya Kusko
James Butt
Faith Gillian
Tony Foller
Rodrigues Campain
Murillo Malet
Aruna Figeroa
Kaitlin Ostrosky
Ivar Paprocki
Chavez Briddick
Jeanfrancois Venere
Morrow Ruta
Alejandro Perin
Darci Poquette
Costa Dilliard
Morrow Ruta
Claire Tollner
Chavez Briddick
Sinclair Waycott
Mujtaba Nicka
David Darakjy
Faith Gillian
Maisha Rulapaugh
IdCountryDate
1000Australia2026-04-30
1001Germany2026-05-17
1002Brazil2026-05-23
1003India2026-05-04
1004Russia2026-05-12
1005Brazil2026-05-22
1006Japan2026-05-25
1007Australia2026-05-03
1008Argentina2026-05-13
1009Japan2026-05-16
1010Spain2026-05-14
1011Germany2026-05-23
1012Brazil2026-05-06
1013Japan2026-04-28
1014Spain2026-05-14
1015Germany2026-04-29
1016Australia2026-05-01
1017Canada2026-05-03
1018Australia2026-05-10
1019Australia2026-05-25
1020India2026-05-06
1021Italy2026-05-23
1022France2026-05-19
1023United Kingdom2026-05-16
1024Germany2026-05-19
1025Italy2026-05-10
1026Germany2026-04-27
1027Spain2026-05-09
1028United Kingdom2026-05-03
1029Australia2026-05-04
1030India2026-05-22
1031Japan2026-04-28
1032Brazil2026-05-07
1033Germany2026-05-20
1034Germany2026-05-21
1035Russia2026-05-10
1036Japan2026-05-19
1037Australia2026-05-14
1038United Kingdom2026-05-05
1039Japan2026-05-23
1040Argentina2026-04-27
1041Brazil2026-05-23
1042France2026-05-10
1043Italy2026-04-30
1044India2026-05-25
1045Russia2026-05-12
1046Japan2026-05-25
1047Brazil2026-05-01
1048Japan2026-05-21
1049Italy2026-05-20

On-Demand Data

NameIdCountryDate
Jeanfrancois Venere1000India2026-05-03
Jeanfrancois Venere1001Brazil2026-05-12
Claire Tollner1002Germany2026-05-02
Rodrigues Campain1003France2026-04-28
Antonio Caudy1004Argentina2026-05-23
Maria Marrier1005Canada2026-05-11
Maria Marrier1006France2026-05-02
Munro Ferencz1007Germany2026-05-07
Mujtaba Nicka1008Japan2026-05-15
Francesco Shinko1009Germany2026-05-06
Ivar Paprocki1010Spain2026-05-02
Darci Poquette1011Japan2026-05-09
Smith Glick1012Japan2026-05-12
Deepesh Chui1013Brazil2026-05-09
Kadeem Flosi1014Russia2026-05-19
Ricardo Gaucho1015Italy2026-05-15
Juan Wieser1016United Kingdom2026-05-20
Ashley Doe1017Argentina2026-05-23
Stacey Maclead1018Brazil2026-05-21
David Darakjy1019Australia2026-05-15
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczArgentinaOnyama Limba UNQUALIFIED
Johnson SergiAustraliaAnna Fali NEGOTIATION
Claire TollnerItalyIoni Bowcher QUALIFIED
Ivar PaprockiSpainAmy Elsner NEGOTIATION
James ButtSpainAsiya Javayant RENEWAL
Nicolas IturbideSpainBernardo Dominic NEGOTIATION
Deepesh ChuiItalyOnyama Limba PROPOSAL
Rodrigues CampainSpainXuxue Feng UNQUALIFIED
Leja CaldareraCanadaAnna Fali RENEWAL
Kadeem FlosiFranceOnyama Limba NEGOTIATION
Tony FollerJapanIoni Bowcher UNQUALIFIED
Leja CaldareraSpainBernardo Dominic UNQUALIFIED
Octavia MaletBrazilIvan Magalhaes QUALIFIED
Francesco ShinkoGermanyAsiya Javayant RENEWAL
James ButtAustraliaOnyama Limba UNQUALIFIED
Ricardo GauchoRussiaIvan Magalhaes QUALIFIED
Ashley DoeCanadaAmy Elsner PROPOSAL
Costa DilliardAustraliaAsiya Javayant RENEWAL
Ashley DoeItalyAmy Elsner UNQUALIFIED
Cody SaylorsUnited KingdomAmy Elsner NEGOTIATION
Adams MorascaCanadaIvan Magalhaes RENEWAL
Octavia MaletCanadaElwin Sharvill NEW
Ricardo GauchoFranceElwin Sharvill NEGOTIATION
Smith GlickArgentinaOnyama Limba PROPOSAL
James ButtItalyAnna Fali UNQUALIFIED
Jennifer AmigonFranceIvan Magalhaes UNQUALIFIED
Aditya KuskoGermanyAsiya Javayant QUALIFIED
Deepesh ChuiItalyAnna Fali UNQUALIFIED
Nicolas IturbideCanadaIvan Magalhaes UNQUALIFIED
Leja CaldareraFranceOnyama Limba RENEWAL
Jennifer AmigonJapanOnyama Limba RENEWAL
Jeanfrancois VenereAustraliaStephen Shaw RENEWAL
Kadeem FlosiGermanyAnna Fali QUALIFIED
Deepesh ChuiArgentinaBernardo Dominic NEW
Emily WhobreyIndiaAsiya Javayant NEW
Misaki RoysterFranceAmy Elsner UNQUALIFIED
Costa DilliardJapanAnna Fali RENEWAL
Ashley DoeBrazilIvan Magalhaes NEW
Jones VocelkaItalyElwin Sharvill RENEWAL
Arvin AlbaresFranceAmy Elsner 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>