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
Costa DilliardGermanyAmy Elsner NEGOTIATION
Kadeem FlosiFranceOnyama Limba UNQUALIFIED
Murillo MaletAustraliaBernardo Dominic NEW
Antonio CaudyUnited KingdomIvan Magalhaes PROPOSAL
Sinclair WaycottIndiaAnna Fali RENEWAL
Mujtaba NickaGermanyXuxue Feng UNQUALIFIED
Smith GlickCanadaBernardo Dominic RENEWAL
Darci PoquetteRussiaAsiya Javayant NEW
Misaki RoysterArgentinaStephen Shaw QUALIFIED
Emily WhobreyArgentinaAnna Fali QUALIFIED
Aruna FigeroaCanadaElwin Sharvill NEGOTIATION
Rodrigues CampainCanadaStephen Shaw NEW
Stacey MacleadAustraliaAmy Elsner PROPOSAL
Kadeem FlosiUnited KingdomAmy Elsner NEW
Mujtaba NickaIndiaElwin Sharvill NEW
Claire TollnerFranceAmy Elsner UNQUALIFIED
Johnson SergiAustraliaAnna Fali NEGOTIATION
Clifford RimRussiaIvan Magalhaes NEW
Deepesh ChuiFranceBernardo Dominic NEW
Jeanfrancois VenereJapanBernardo Dominic NEW
Smith GlickRussiaOnyama Limba PROPOSAL
Rodrigues CampainAustraliaBernardo Dominic QUALIFIED
Arvin AlbaresGermanyIvan Magalhaes UNQUALIFIED
Smith GlickAustraliaElwin Sharvill QUALIFIED
Deepesh ChuiGermanyIvan Magalhaes QUALIFIED
Misaki RoysterRussiaAmy Elsner PROPOSAL
Kadeem FlosiUnited KingdomBernardo Dominic NEGOTIATION
Greenwood BologniaAustraliaBernardo Dominic QUALIFIED
Aika InouyeJapanOnyama Limba NEW
Maria MarrierUnited KingdomXuxue Feng QUALIFIED
Isabel BowleyRussiaXuxue Feng NEGOTIATION
Sinclair WaycottIndiaAmy Elsner NEGOTIATION
Ivar PaprockiJapanElwin Sharvill PROPOSAL
Tony FollerFranceAnna Fali NEGOTIATION
Aruna FigeroaRussiaOnyama Limba QUALIFIED
Deepesh ChuiCanadaAsiya Javayant NEW
Smith GlickRussiaElwin Sharvill NEW
Chavez BriddickIndiaAsiya Javayant NEGOTIATION
Morrow RutaCanadaXuxue Feng NEGOTIATION
Antonio CaudyJapanIoni Bowcher PROPOSAL
Izzy GarufiArgentinaOnyama Limba NEGOTIATION
Isabel BowleyJapanStephen Shaw UNQUALIFIED
Octavia MaletRussiaAsiya Javayant NEW
David DarakjyGermanyStephen Shaw UNQUALIFIED
Leon OldroydUnited KingdomStephen Shaw PROPOSAL
Costa DilliardUnited KingdomAnna Fali QUALIFIED
Aika InouyeGermanyXuxue Feng PROPOSAL
Costa DilliardBrazilAnna Fali RENEWAL
Ivar PaprockiCanadaBernardo Dominic PROPOSAL
Leon OldroydGermanyAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiJapanStephen Shaw NEW
Smith GlickBrazilIvan Magalhaes RENEWAL
Leon OldroydArgentinaAsiya Javayant PROPOSAL
Isabel BowleyArgentinaIvan Magalhaes QUALIFIED
Jennifer AmigonCanadaElwin Sharvill UNQUALIFIED
Greenwood BologniaIndiaXuxue Feng NEGOTIATION
Claire TollnerJapanXuxue Feng NEGOTIATION
Juan WieserUnited KingdomAmy Elsner NEW
James ButtArgentinaXuxue Feng RENEWAL
Isabel BowleySpainElwin Sharvill NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyCanada2025-09-23Dorl, James J Esq UNQUALIFIED94Stephen Shaw
1001Ricardo GauchoRussia2025-09-22Commercial Press QUALIFIED15Stephen Shaw
1002Claire TollnerItaly2025-10-01Rousseaux, Michael Esq QUALIFIED31Amy Elsner
1003Leja CaldareraRussia2025-09-28Morlong Associates NEW30Ivan Magalhaes
1004Mujtaba NickaCanada2025-09-24King, Christopher A Esq NEW60Asiya Javayant
1005Izzy GarufiArgentina2025-09-21Chemel, James L Cpa PROPOSAL61Onyama Limba
1006Juan WieserSpain2025-09-18Morlong Associates UNQUALIFIED92Onyama Limba
1007Octavia MaletCanada2025-10-06Chanay, Jeffrey A Esq QUALIFIED24Asiya Javayant
1008Izzy GarufiGermany2025-09-30Feiner Bros NEW38Amy Elsner
1009Claire TollnerJapan2025-09-21Benton, John B Jr RENEWAL77Elwin Sharvill
1010Mujtaba NickaUnited Kingdom2025-10-07Commercial Press PROPOSAL40Elwin Sharvill
1011Isabel BowleyRussia2025-09-10Truhlar And Truhlar Attys QUALIFIED51Elwin Sharvill
1012Deepesh ChuiItaly2025-09-24Commercial Press NEGOTIATION99Stephen Shaw
1013Stacey MacleadAustralia2025-09-30Truhlar And Truhlar Attys RENEWAL3Asiya Javayant
1014Antonio CaudySpain2025-09-26Feiner Bros PROPOSAL41Amy Elsner
1015Munro FerenczBrazil2025-09-20Rousseaux, Michael Esq RENEWAL21Onyama Limba
1016Julie StensethAustralia2025-10-02Chemel, James L Cpa QUALIFIED21Ioni Bowcher
1017Mujtaba NickaGermany2025-10-03Benton, John B Jr PROPOSAL28Xuxue Feng
1018Adams MorascaSpain2025-09-26Truhlar And Truhlar Attys PROPOSAL91Asiya Javayant
1019Maria MarrierRussia2025-09-27Rangoni Of Florence RENEWAL58Xuxue Feng
1020Alejandro PerinSpain2025-09-11Truhlar And Truhlar Attys RENEWAL68Onyama Limba
1021Clifford RimBrazil2025-09-13Truhlar And Truhlar Attys PROPOSAL49Xuxue Feng
1022Costa DilliardFrance2025-09-27Printing Dimensions PROPOSAL45Onyama Limba
1023Aditya KuskoSpain2025-09-15Buckley Miller Wright RENEWAL51Xuxue Feng
1024Antonio CaudyGermany2025-10-03Chapman, Ross E Esq NEGOTIATION30Anna Fali
1025Arvin AlbaresJapan2025-09-22Truhlar And Truhlar Attys PROPOSAL70Elwin Sharvill
1026Clifford RimFrance2025-10-07Rousseaux, Michael Esq PROPOSAL6Bernardo Dominic
1027Wickens NestleIndia2025-10-01Benton, John B Jr RENEWAL11Onyama Limba
1028Ivar PaprockiGermany2025-09-30King, Christopher A Esq UNQUALIFIED71Bernardo Dominic
1029Kadeem FlosiArgentina2025-10-06Morlong Associates UNQUALIFIED66Amy Elsner
1030Chavez BriddickAustralia2025-10-05Feltz Printing Service PROPOSAL86Xuxue Feng
1031Emily WhobreyCanada2025-09-29Chapman, Ross E Esq NEW71Xuxue Feng
1032Cody SaylorsUnited Kingdom2025-10-02Benton, John B Jr QUALIFIED97Ivan Magalhaes
1033Munro FerenczFrance2025-10-04Rangoni Of Florence PROPOSAL33Elwin Sharvill
1034Aditya KuskoRussia2025-09-24Rangoni Of Florence NEGOTIATION9Amy Elsner
1035Sinclair WaycottAustralia2025-09-17Printing Dimensions NEGOTIATION13Xuxue Feng
1036Aditya KuskoAustralia2025-10-06Benton, John B Jr NEGOTIATION18Onyama Limba
1037Rodrigues CampainUnited Kingdom2025-10-07Chapman, Ross E Esq RENEWAL64Xuxue Feng
1038Julie StensethArgentina2025-09-22Buckley Miller Wright NEGOTIATION4Asiya Javayant
1039Francesco ShinkoAustralia2025-09-16Chanay, Jeffrey A Esq NEGOTIATION69Ivan Magalhaes
1040Isabel BowleyIndia2025-10-06Chemel, James L Cpa RENEWAL34Xuxue Feng
1041Leon OldroydBrazil2025-10-01Feltz Printing Service PROPOSAL89Xuxue Feng
1042Chavez BriddickAustralia2025-10-04Chapman, Ross E Esq UNQUALIFIED78Ioni Bowcher
1043Clifford RimGermany2025-09-28Dorl, James J Esq UNQUALIFIED37Stephen Shaw
1044Nicolas IturbideArgentina2025-09-10Chanay, Jeffrey A Esq QUALIFIED61Ivan Magalhaes
1045Johnson SergiCanada2025-09-20Commercial Press PROPOSAL55Amy Elsner
1046Nicolas IturbideFrance2025-10-01Commercial Press UNQUALIFIED59Elwin Sharvill
1047Maisha RulapaughIndia2025-09-17King, Christopher A Esq UNQUALIFIED35Ivan Magalhaes
1048Misaki RoysterBrazil2025-10-07Feltz Printing Service NEW50Xuxue Feng
1049Claire TollnerBrazil2025-09-13Dorl, James J Esq NEW3Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonArgentinaAsiya Javayant NEW
Sinclair WaycottRussiaOnyama Limba NEW
Cody SaylorsSpainElwin Sharvill NEW
Maria MarrierAustraliaIoni Bowcher RENEWAL
Chavez BriddickItalyElwin Sharvill UNQUALIFIED
Silvio SlusarskiArgentinaIoni Bowcher NEGOTIATION
Munro FerenczBrazilIoni Bowcher PROPOSAL
Chavez BriddickUnited KingdomOnyama Limba UNQUALIFIED
Jefferson SchemmerItalyAsiya Javayant UNQUALIFIED
Morrow RutaCanadaXuxue Feng NEW
Francesco ShinkoSpainAsiya Javayant PROPOSAL
Juan WieserBrazilIvan Magalhaes QUALIFIED
Antonio CaudyGermanyStephen Shaw QUALIFIED
Leon OldroydAustraliaStephen Shaw NEGOTIATION
Antonio CaudyRussiaElwin Sharvill NEGOTIATION
Juan WieserGermanyOnyama Limba PROPOSAL
Ashley DoeBrazilAmy Elsner RENEWAL
Munro FerenczUnited KingdomElwin Sharvill UNQUALIFIED
Greenwood BologniaRussiaIoni Bowcher NEW
Aruna FigeroaCanadaAmy Elsner NEGOTIATION
Munro FerenczRussiaAsiya Javayant NEGOTIATION
Nicolas IturbideIndiaAsiya Javayant NEGOTIATION
Nicolas IturbideUnited KingdomIvan Magalhaes PROPOSAL
Aruna FigeroaAustraliaElwin Sharvill NEW
Wickens NestleUnited KingdomAsiya Javayant QUALIFIED
Kaitlin OstroskyAustraliaAmy Elsner NEW
Greenwood BologniaGermanyIvan Magalhaes QUALIFIED
Salvatore StockhamUnited KingdomElwin Sharvill NEW
Mayumi KolmetzUnited KingdomOnyama Limba PROPOSAL
Jennifer AmigonGermanyXuxue Feng NEGOTIATION
Juan WieserFranceIvan Magalhaes UNQUALIFIED
Smith GlickUnited KingdomAsiya Javayant UNQUALIFIED
Jeanfrancois VenereItalyAsiya Javayant NEW
Emily WhobreyIndiaIoni Bowcher QUALIFIED
Morrow RutaFranceOnyama Limba UNQUALIFIED
Clifford RimSpainAsiya Javayant NEW
Sinclair WaycottAustraliaIvan Magalhaes NEGOTIATION
Greenwood BologniaFranceBernardo Dominic NEW
Kadeem FlosiGermanyOnyama Limba PROPOSAL
Silvio SlusarskiIndiaOnyama Limba NEW
Tony FollerGermanyIvan Magalhaes NEW
Leon OldroydFranceIoni Bowcher NEGOTIATION
Claire TollnerCanadaIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyAmy Elsner RENEWAL
Claire TollnerItalyOnyama Limba UNQUALIFIED
Maisha RulapaughCanadaElwin Sharvill QUALIFIED
Ricardo GauchoSpainAsiya Javayant NEGOTIATION
Deepesh ChuiRussiaStephen Shaw NEW
Jefferson SchemmerRussiaAmy Elsner QUALIFIED
Adams MorascaAustraliaElwin Sharvill PROPOSAL
Frozen Columns
Name
Greenwood Bolognia
Aditya Kusko
Tony Foller
Jones Vocelka
Costa Dilliard
Morrow Ruta
Nicolas Iturbide
Jeanfrancois Venere
Isabel Bowley
Wickens Nestle
Aruna Figeroa
Emily Whobrey
Stacey Maclead
Faith Gillian
Jennifer Amigon
Faith Gillian
Leon Oldroyd
Ivar Paprocki
Alejandro Perin
Salvatore Stockham
Octavia Malet
Morrow Ruta
Isabel Bowley
Munro Ferencz
Wickens Nestle
Ricardo Gaucho
Stacey Maclead
Silvio Slusarski
Stacey Maclead
Johnson Sergi
Alejandro Perin
Ivar Paprocki
Juan Wieser
Mujtaba Nicka
Johnson Sergi
Izzy Garufi
Ivar Paprocki
Aditya Kusko
Nicolas Iturbide
Stacey Maclead
Julie Stenseth
Aika Inouye
James Butt
Leja Caldarera
Cody Saylors
James Butt
Juan Wieser
Rodrigues Campain
Salvatore Stockham
Morrow Ruta
IdCountryDate
1000Argentina2025-09-22
1001Germany2025-09-18
1002Japan2025-09-23
1003Russia2025-09-21
1004Japan2025-10-02
1005Spain2025-09-23
1006Spain2025-09-18
1007France2025-09-10
1008France2025-10-05
1009Canada2025-10-04
1010Japan2025-09-19
1011Italy2025-10-07
1012Brazil2025-09-13
1013Italy2025-10-08
1014Argentina2025-09-20
1015Canada2025-09-23
1016Australia2025-09-17
1017Russia2025-10-04
1018Spain2025-09-11
1019Italy2025-09-20
1020Argentina2025-10-01
1021Spain2025-09-17
1022Canada2025-10-09
1023Italy2025-09-30
1024Argentina2025-09-21
1025United Kingdom2025-09-20
1026Germany2025-10-07
1027Argentina2025-09-16
1028Russia2025-10-09
1029Argentina2025-10-04
1030Spain2025-10-06
1031Argentina2025-09-25
1032Spain2025-09-27
1033France2025-09-18
1034Australia2025-09-12
1035Italy2025-10-04
1036Japan2025-10-07
1037United Kingdom2025-09-10
1038Canada2025-09-28
1039India2025-09-23
1040India2025-10-05
1041Argentina2025-09-29
1042United Kingdom2025-09-23
1043Argentina2025-09-20
1044Japan2025-09-22
1045Australia2025-09-25
1046Russia2025-09-13
1047India2025-09-12
1048Canada2025-10-07
1049Italy2025-09-11

On-Demand Data

NameIdCountryDate
Faith Gillian1000Argentina2025-09-18
Wickens Nestle1001India2025-09-28
Leja Caldarera1002Italy2025-09-29
Izzy Garufi1003United Kingdom2025-10-02
Clifford Rim1004India2025-10-06
Maria Marrier1005Brazil2025-09-17
Leon Oldroyd1006Russia2025-09-23
Kaitlin Ostrosky1007Germany2025-09-30
Jefferson Schemmer1008Germany2025-10-08
Francesco Shinko1009Japan2025-09-22
James Butt1010Russia2025-10-07
Salvatore Stockham1011Russia2025-09-29
Jennifer Amigon1012Brazil2025-10-08
Johnson Sergi1013Germany2025-10-02
Alejandro Perin1014Argentina2025-09-16
Kaitlin Ostrosky1015Italy2025-09-10
Misaki Royster1016United Kingdom2025-10-03
Clifford Rim1017Canada2025-10-09
Jeanfrancois Venere1018Germany2025-09-30
Silvio Slusarski1019Japan2025-09-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aruna FigeroaUnited KingdomBernardo Dominic QUALIFIED
Smith GlickFranceXuxue Feng RENEWAL
Silvio SlusarskiArgentinaBernardo Dominic UNQUALIFIED
Leja CaldareraGermanyAnna Fali NEW
Claire TollnerJapanAnna Fali NEGOTIATION
Leja CaldareraCanadaIvan Magalhaes NEGOTIATION
Jefferson SchemmerAustraliaBernardo Dominic PROPOSAL
Misaki RoysterFranceIvan Magalhaes PROPOSAL
Julie StensethGermanyStephen Shaw NEGOTIATION
Leja CaldareraIndiaIvan Magalhaes NEW
Deepesh ChuiItalyXuxue Feng QUALIFIED
Wickens NestleUnited KingdomStephen Shaw NEW
Alejandro PerinUnited KingdomIvan Magalhaes RENEWAL
Murillo MaletItalyElwin Sharvill QUALIFIED
Cody SaylorsItalyIoni Bowcher RENEWAL
Chavez BriddickGermanyXuxue Feng PROPOSAL
Mujtaba NickaAustraliaIvan Magalhaes NEGOTIATION
Antonio CaudyAustraliaBernardo Dominic QUALIFIED
Jefferson SchemmerAustraliaAsiya Javayant QUALIFIED
Francesco ShinkoGermanyXuxue Feng RENEWAL
Silvio SlusarskiUnited KingdomAmy Elsner UNQUALIFIED
Francesco ShinkoCanadaAnna Fali PROPOSAL
Chavez BriddickItalyAnna Fali RENEWAL
Ricardo GauchoFranceAmy Elsner QUALIFIED
Murillo MaletFranceIvan Magalhaes RENEWAL
Arvin AlbaresFranceStephen Shaw QUALIFIED
Stacey MacleadCanadaElwin Sharvill PROPOSAL
Deepesh ChuiUnited KingdomIoni Bowcher PROPOSAL
Aruna FigeroaJapanAsiya Javayant NEW
Greenwood BologniaFranceIvan Magalhaes QUALIFIED
Arvin AlbaresIndiaAmy Elsner PROPOSAL
Murillo MaletArgentinaAmy Elsner NEGOTIATION
Maisha RulapaughFranceXuxue Feng PROPOSAL
Alejandro PerinAustraliaAsiya Javayant PROPOSAL
Juan WieserCanadaElwin Sharvill NEGOTIATION
Aika InouyeBrazilAmy Elsner RENEWAL
Stacey MacleadAustraliaAmy Elsner PROPOSAL
Julie StensethRussiaIoni Bowcher NEGOTIATION
Nicolas IturbideJapanIoni Bowcher PROPOSAL
Claire TollnerUnited KingdomXuxue Feng 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>