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 MarrierFranceAnna Fali PROPOSAL
Ricardo GauchoSpainOnyama Limba RENEWAL
Aika InouyeCanadaIvan Magalhaes QUALIFIED
Maisha RulapaughJapanAmy Elsner NEW
Francesco ShinkoAustraliaAmy Elsner RENEWAL
Aruna FigeroaArgentinaStephen Shaw NEGOTIATION
James ButtArgentinaXuxue Feng PROPOSAL
Nicolas IturbideUnited KingdomIoni Bowcher NEW
Greenwood BologniaUnited KingdomBernardo Dominic NEW
Smith GlickAustraliaIvan Magalhaes NEGOTIATION
Leja CaldareraArgentinaXuxue Feng RENEWAL
Misaki RoysterArgentinaAnna Fali NEGOTIATION
Stacey MacleadBrazilIoni Bowcher NEGOTIATION
Johnson SergiIndiaOnyama Limba UNQUALIFIED
Ivar PaprockiFranceAmy Elsner NEGOTIATION
Greenwood BologniaArgentinaIvan Magalhaes RENEWAL
Costa DilliardIndiaIvan Magalhaes UNQUALIFIED
Salvatore StockhamRussiaXuxue Feng NEGOTIATION
Misaki RoysterFranceAnna Fali UNQUALIFIED
Deepesh ChuiFranceXuxue Feng RENEWAL
Silvio SlusarskiJapanStephen Shaw PROPOSAL
Munro FerenczSpainAmy Elsner NEW
Smith GlickItalyXuxue Feng PROPOSAL
Maria MarrierCanadaStephen Shaw PROPOSAL
Claire TollnerSpainAmy Elsner PROPOSAL
Ivar PaprockiBrazilXuxue Feng UNQUALIFIED
Izzy GarufiFranceAmy Elsner NEW
Munro FerenczJapanXuxue Feng NEW
David DarakjyItalyStephen Shaw QUALIFIED
Jones VocelkaCanadaIoni Bowcher RENEWAL
David DarakjyGermanyAmy Elsner NEGOTIATION
Arvin AlbaresAustraliaBernardo Dominic QUALIFIED
Silvio SlusarskiUnited KingdomAsiya Javayant RENEWAL
Ashley DoeItalyAmy Elsner QUALIFIED
Izzy GarufiCanadaOnyama Limba NEGOTIATION
Costa DilliardItalyOnyama Limba PROPOSAL
Kadeem FlosiIndiaStephen Shaw NEW
Adams MorascaSpainXuxue Feng NEGOTIATION
Salvatore StockhamSpainBernardo Dominic NEGOTIATION
Nicolas IturbideSpainAsiya Javayant QUALIFIED
Aditya KuskoItalyXuxue Feng NEGOTIATION
Greenwood BologniaFranceAnna Fali PROPOSAL
Rodrigues CampainUnited KingdomIoni Bowcher NEW
Ivar PaprockiSpainXuxue Feng UNQUALIFIED
Stacey MacleadArgentinaBernardo Dominic QUALIFIED
Arvin AlbaresIndiaOnyama Limba NEW
Jones VocelkaAustraliaElwin Sharvill RENEWAL
Emily WhobreyIndiaStephen Shaw RENEWAL
Greenwood BologniaSpainStephen Shaw NEGOTIATION
Mayumi KolmetzBrazilOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Ricardo GauchoJapanAmy Elsner PROPOSAL
Ricardo GauchoJapanStephen Shaw RENEWAL
Jennifer AmigonItalyOnyama Limba PROPOSAL
Ricardo GauchoRussiaIoni Bowcher NEW
Deepesh ChuiItalyIoni Bowcher UNQUALIFIED
Ricardo GauchoRussiaStephen Shaw RENEWAL
Julie StensethJapanOnyama Limba QUALIFIED
Maria MarrierCanadaOnyama Limba RENEWAL
Stacey MacleadBrazilBernardo Dominic RENEWAL
Isabel BowleyIndiaElwin Sharvill NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaRussia2025-09-23Chemel, James L Cpa UNQUALIFIED57Amy Elsner
1001Costa DilliardSpain2025-10-14Feiner Bros QUALIFIED31Xuxue Feng
1002Alejandro PerinSpain2025-10-06Benton, John B Jr UNQUALIFIED11Stephen Shaw
1003David DarakjyFrance2025-10-06Rousseaux, Michael Esq UNQUALIFIED72Anna Fali
1004Chavez BriddickFrance2025-10-02Morlong Associates PROPOSAL83Stephen Shaw
1005Stacey MacleadFrance2025-09-27Feltz Printing Service RENEWAL83Ioni Bowcher
1006Isabel BowleyArgentina2025-10-22Rousseaux, Michael Esq PROPOSAL61Onyama Limba
1007Ivar PaprockiAustralia2025-10-12Chapman, Ross E Esq PROPOSAL9Ioni Bowcher
1008Juan WieserSpain2025-10-12Chanay, Jeffrey A Esq PROPOSAL75Stephen Shaw
1009Juan WieserIndia2025-10-09Feltz Printing Service NEW39Onyama Limba
1010Francesco ShinkoIndia2025-10-18Chapman, Ross E Esq PROPOSAL22Anna Fali
1011Murillo MaletFrance2025-09-28Rousseaux, Michael Esq NEGOTIATION12Stephen Shaw
1012James ButtArgentina2025-10-17King, Christopher A Esq RENEWAL85Anna Fali
1013Claire TollnerBrazil2025-10-18Chanay, Jeffrey A Esq UNQUALIFIED84Ioni Bowcher
1014Salvatore StockhamCanada2025-10-01Benton, John B Jr PROPOSAL12Bernardo Dominic
1015Maria MarrierAustralia2025-10-06Chemel, James L Cpa UNQUALIFIED20Ivan Magalhaes
1016Munro FerenczRussia2025-10-20Feiner Bros NEW13Ivan Magalhaes
1017Faith GillianCanada2025-10-10Printing Dimensions RENEWAL79Xuxue Feng
1018Greenwood BologniaRussia2025-10-12Rangoni Of Florence RENEWAL76Bernardo Dominic
1019Jefferson SchemmerIndia2025-09-27King, Christopher A Esq RENEWAL60Asiya Javayant
1020Kadeem FlosiItaly2025-10-04King, Christopher A Esq NEW95Ivan Magalhaes
1021Sinclair WaycottIndia2025-10-20Truhlar And Truhlar Attys PROPOSAL94Stephen Shaw
1022Misaki RoysterAustralia2025-09-25Rousseaux, Michael Esq QUALIFIED56Onyama Limba
1023Ivar PaprockiUnited Kingdom2025-10-07Buckley Miller Wright UNQUALIFIED14Ioni Bowcher
1024Darci PoquetteUnited Kingdom2025-10-15Printing Dimensions NEGOTIATION98Bernardo Dominic
1025Claire TollnerCanada2025-10-06Commercial Press NEGOTIATION94Elwin Sharvill
1026Murillo MaletCanada2025-09-25Chanay, Jeffrey A Esq NEW9Elwin Sharvill
1027Octavia MaletJapan2025-09-28Buckley Miller Wright PROPOSAL65Anna Fali
1028Izzy GarufiArgentina2025-10-04Rangoni Of Florence RENEWAL42Amy Elsner
1029Adams MorascaSpain2025-10-19Rangoni Of Florence QUALIFIED50Ioni Bowcher
1030Jennifer AmigonIndia2025-10-19Rangoni Of Florence QUALIFIED99Onyama Limba
1031David DarakjySpain2025-10-05Buckley Miller Wright QUALIFIED79Anna Fali
1032Aruna FigeroaIndia2025-10-08Dorl, James J Esq UNQUALIFIED4Asiya Javayant
1033Maisha RulapaughArgentina2025-09-28Feiner Bros UNQUALIFIED35Ioni Bowcher
1034Salvatore StockhamGermany2025-10-07Commercial Press PROPOSAL51Anna Fali
1035Darci PoquetteSpain2025-10-17Morlong Associates UNQUALIFIED85Asiya Javayant
1036Stacey MacleadSpain2025-10-03Commercial Press UNQUALIFIED77Anna Fali
1037Greenwood BologniaSpain2025-10-15Dorl, James J Esq NEGOTIATION24Stephen Shaw
1038Emily WhobreySpain2025-09-29Rousseaux, Michael Esq NEW43Bernardo Dominic
1039Isabel BowleyBrazil2025-10-01Feiner Bros RENEWAL52Amy Elsner
1040Munro FerenczGermany2025-09-25Feiner Bros PROPOSAL59Asiya Javayant
1041Sinclair WaycottRussia2025-10-12King, Christopher A Esq QUALIFIED5Amy Elsner
1042Ivar PaprockiArgentina2025-09-29Truhlar And Truhlar Attys RENEWAL68Ivan Magalhaes
1043Julie StensethCanada2025-09-30Feltz Printing Service NEGOTIATION12Asiya Javayant
1044Misaki RoysterGermany2025-10-19Benton, John B Jr RENEWAL38Anna Fali
1045Cody SaylorsJapan2025-10-21Feiner Bros NEW63Stephen Shaw
1046Nicolas IturbideJapan2025-10-11King, Christopher A Esq UNQUALIFIED20Amy Elsner
1047Murillo MaletAustralia2025-10-21Feltz Printing Service PROPOSAL17Bernardo Dominic
1048Kadeem FlosiBrazil2025-10-07Feltz Printing Service NEGOTIATION87Ivan Magalhaes
1049Aruna FigeroaJapan2025-10-21Morlong Associates NEGOTIATION6Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Murillo MaletJapanXuxue Feng NEGOTIATION
Morrow RutaRussiaXuxue Feng UNQUALIFIED
Silvio SlusarskiJapanElwin Sharvill PROPOSAL
Julie StensethCanadaIvan Magalhaes RENEWAL
Johnson SergiCanadaAmy Elsner NEGOTIATION
Ivar PaprockiRussiaXuxue Feng PROPOSAL
Mujtaba NickaSpainOnyama Limba QUALIFIED
Ashley DoeSpainAmy Elsner PROPOSAL
Wickens NestleAustraliaIoni Bowcher RENEWAL
Alejandro PerinRussiaAmy Elsner QUALIFIED
Antonio CaudyIndiaAnna Fali UNQUALIFIED
Munro FerenczItalyIvan Magalhaes QUALIFIED
Jones VocelkaBrazilIoni Bowcher UNQUALIFIED
David DarakjyGermanyAsiya Javayant NEW
Adams MorascaItalyOnyama Limba UNQUALIFIED
Aruna FigeroaJapanStephen Shaw RENEWAL
Salvatore StockhamRussiaXuxue Feng NEW
James ButtIndiaAsiya Javayant RENEWAL
Wickens NestleIndiaXuxue Feng RENEWAL
Julie StensethGermanyAmy Elsner RENEWAL
Salvatore StockhamRussiaAnna Fali UNQUALIFIED
Deepesh ChuiAustraliaAsiya Javayant PROPOSAL
Clifford RimArgentinaIvan Magalhaes UNQUALIFIED
Chavez BriddickRussiaBernardo Dominic QUALIFIED
Tony FollerAustraliaAnna Fali UNQUALIFIED
Maria MarrierSpainOnyama Limba PROPOSAL
Ricardo GauchoJapanAsiya Javayant UNQUALIFIED
Rodrigues CampainUnited KingdomStephen Shaw PROPOSAL
Chavez BriddickIndiaIvan Magalhaes PROPOSAL
Tony FollerBrazilBernardo Dominic PROPOSAL
Maisha RulapaughGermanyXuxue Feng UNQUALIFIED
Salvatore StockhamGermanyOnyama Limba UNQUALIFIED
Morrow RutaIndiaStephen Shaw UNQUALIFIED
Deepesh ChuiIndiaIoni Bowcher RENEWAL
Jefferson SchemmerArgentinaAsiya Javayant QUALIFIED
Aruna FigeroaGermanyIvan Magalhaes UNQUALIFIED
Aditya KuskoJapanAsiya Javayant PROPOSAL
Silvio SlusarskiItalyAsiya Javayant PROPOSAL
Salvatore StockhamCanadaElwin Sharvill QUALIFIED
Maria MarrierAustraliaAmy Elsner NEGOTIATION
Faith GillianArgentinaBernardo Dominic PROPOSAL
Aruna FigeroaArgentinaElwin Sharvill RENEWAL
Leja CaldareraSpainAnna Fali PROPOSAL
Isabel BowleyFranceXuxue Feng NEGOTIATION
Alejandro PerinRussiaBernardo Dominic NEGOTIATION
Murillo MaletSpainAmy Elsner PROPOSAL
Jeanfrancois VenereArgentinaBernardo Dominic RENEWAL
Cody SaylorsArgentinaAsiya Javayant RENEWAL
Deepesh ChuiUnited KingdomXuxue Feng QUALIFIED
Smith GlickCanadaOnyama Limba QUALIFIED
Frozen Columns
Name
Alejandro Perin
Jennifer Amigon
Aditya Kusko
Mujtaba Nicka
Ricardo Gaucho
Antonio Caudy
Clifford Rim
Leja Caldarera
Murillo Malet
Jennifer Amigon
Clifford Rim
Deepesh Chui
Nicolas Iturbide
Sinclair Waycott
Rodrigues Campain
Ashley Doe
Aika Inouye
Ashley Doe
Leja Caldarera
Morrow Ruta
Murillo Malet
Mujtaba Nicka
James Butt
Ashley Doe
Morrow Ruta
Kaitlin Ostrosky
Leon Oldroyd
Leja Caldarera
Tony Foller
Jeanfrancois Venere
Kadeem Flosi
Cody Saylors
Kadeem Flosi
Murillo Malet
Johnson Sergi
Juan Wieser
Sinclair Waycott
Salvatore Stockham
Deepesh Chui
Leja Caldarera
Claire Tollner
Kaitlin Ostrosky
Ricardo Gaucho
Ivar Paprocki
Faith Gillian
Ashley Doe
David Darakjy
Stacey Maclead
Isabel Bowley
Aditya Kusko
IdCountryDate
1000Japan2025-10-03
1001Russia2025-10-19
1002Australia2025-10-05
1003Brazil2025-10-02
1004Japan2025-10-04
1005Italy2025-10-03
1006France2025-10-02
1007Brazil2025-09-29
1008Brazil2025-09-29
1009Germany2025-10-11
1010United Kingdom2025-10-20
1011Canada2025-09-26
1012India2025-10-15
1013Canada2025-09-27
1014Russia2025-09-26
1015Japan2025-10-20
1016Australia2025-10-09
1017Brazil2025-09-30
1018Japan2025-09-25
1019Italy2025-10-06
1020Italy2025-10-07
1021Brazil2025-09-30
1022Spain2025-09-23
1023Italy2025-10-21
1024France2025-10-10
1025United Kingdom2025-10-09
1026Russia2025-10-15
1027Russia2025-10-17
1028Brazil2025-10-18
1029Germany2025-10-21
1030Germany2025-10-14
1031Germany2025-10-08
1032United Kingdom2025-10-19
1033Russia2025-09-30
1034United Kingdom2025-10-20
1035Russia2025-10-18
1036Spain2025-10-02
1037Spain2025-10-22
1038Germany2025-10-02
1039Germany2025-09-28
1040Italy2025-10-15
1041Canada2025-10-15
1042Germany2025-10-18
1043United Kingdom2025-10-16
1044Russia2025-10-07
1045Germany2025-09-27
1046Australia2025-10-04
1047France2025-10-17
1048India2025-10-16
1049France2025-10-11

On-Demand Data

NameIdCountryDate
Tony Foller1000Australia2025-10-08
Adams Morasca1001Brazil2025-10-20
James Butt1002Argentina2025-09-27
Maria Marrier1003France2025-10-12
Munro Ferencz1004Spain2025-10-14
Cody Saylors1005Brazil2025-10-09
Mayumi Kolmetz1006Argentina2025-09-29
Munro Ferencz1007Brazil2025-10-18
Misaki Royster1008Argentina2025-10-15
Tony Foller1009Canada2025-10-01
Clifford Rim1010Argentina2025-09-23
Julie Stenseth1011Spain2025-09-23
Wickens Nestle1012Italy2025-09-29
Rodrigues Campain1013Russia2025-10-12
Deepesh Chui1014India2025-10-06
James Butt1015Germany2025-09-26
Ivar Paprocki1016Russia2025-09-29
Jennifer Amigon1017Italy2025-10-01
Aditya Kusko1018Brazil2025-10-19
Francesco Shinko1019France2025-09-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoBrazilAsiya Javayant QUALIFIED
Adams MorascaUnited KingdomStephen Shaw UNQUALIFIED
Chavez BriddickJapanStephen Shaw PROPOSAL
Mujtaba NickaSpainOnyama Limba QUALIFIED
Octavia MaletItalyElwin Sharvill RENEWAL
Cody SaylorsJapanXuxue Feng QUALIFIED
Ricardo GauchoSpainBernardo Dominic UNQUALIFIED
Smith GlickRussiaStephen Shaw UNQUALIFIED
Kadeem FlosiItalyStephen Shaw RENEWAL
Ivar PaprockiAustraliaIoni Bowcher RENEWAL
Jeanfrancois VenereSpainStephen Shaw UNQUALIFIED
Greenwood BologniaItalyAnna Fali NEW
Ashley DoeItalyStephen Shaw NEGOTIATION
Arvin AlbaresIndiaAsiya Javayant PROPOSAL
Silvio SlusarskiCanadaAsiya Javayant QUALIFIED
Clifford RimArgentinaIoni Bowcher UNQUALIFIED
Leja CaldareraItalyElwin Sharvill NEGOTIATION
Wickens NestleFranceIoni Bowcher UNQUALIFIED
Ivar PaprockiAustraliaIoni Bowcher NEW
Francesco ShinkoItalyAnna Fali UNQUALIFIED
Jennifer AmigonItalyBernardo Dominic PROPOSAL
Darci PoquetteCanadaXuxue Feng RENEWAL
Munro FerenczRussiaStephen Shaw NEW
Smith GlickFranceBernardo Dominic RENEWAL
Aditya KuskoIndiaIvan Magalhaes RENEWAL
Adams MorascaIndiaElwin Sharvill PROPOSAL
Antonio CaudyJapanOnyama Limba QUALIFIED
Morrow RutaItalyIoni Bowcher QUALIFIED
Ashley DoeItalyBernardo Dominic NEGOTIATION
Clifford RimFranceAsiya Javayant RENEWAL
Aruna FigeroaUnited KingdomOnyama Limba NEGOTIATION
Munro FerenczGermanyXuxue Feng NEW
Mujtaba NickaIndiaElwin Sharvill NEGOTIATION
Deepesh ChuiItalyAsiya Javayant PROPOSAL
Aika InouyeItalyAsiya Javayant PROPOSAL
Jefferson SchemmerArgentinaOnyama Limba UNQUALIFIED
Clifford RimBrazilIoni Bowcher UNQUALIFIED
Chavez BriddickGermanyAnna Fali NEW
Emily WhobreySpainElwin Sharvill UNQUALIFIED
Alejandro PerinUnited KingdomOnyama Limba 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>