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
Johnson SergiFranceIoni Bowcher RENEWAL
Arvin AlbaresBrazilAmy Elsner RENEWAL
Aditya KuskoItalyXuxue Feng UNQUALIFIED
Maria MarrierItalyXuxue Feng PROPOSAL
Misaki RoysterGermanyIvan Magalhaes QUALIFIED
Aditya KuskoIndiaOnyama Limba NEGOTIATION
Jefferson SchemmerItalyXuxue Feng QUALIFIED
Costa DilliardIndiaElwin Sharvill RENEWAL
Silvio SlusarskiAustraliaAsiya Javayant NEGOTIATION
Claire TollnerArgentinaXuxue Feng PROPOSAL
Adams MorascaGermanyBernardo Dominic QUALIFIED
Jeanfrancois VenereRussiaBernardo Dominic NEGOTIATION
Salvatore StockhamAustraliaIvan Magalhaes QUALIFIED
Isabel BowleyCanadaStephen Shaw RENEWAL
Antonio CaudyJapanIoni Bowcher UNQUALIFIED
Costa DilliardCanadaIoni Bowcher NEGOTIATION
Salvatore StockhamFranceOnyama Limba RENEWAL
Izzy GarufiArgentinaOnyama Limba RENEWAL
Faith GillianCanadaAmy Elsner UNQUALIFIED
Rodrigues CampainJapanElwin Sharvill RENEWAL
Adams MorascaRussiaAsiya Javayant UNQUALIFIED
Claire TollnerIndiaAmy Elsner NEGOTIATION
Claire TollnerBrazilXuxue Feng UNQUALIFIED
Leon OldroydAustraliaStephen Shaw UNQUALIFIED
Adams MorascaItalyAmy Elsner NEGOTIATION
Jennifer AmigonGermanyAmy Elsner UNQUALIFIED
Jefferson SchemmerItalyAsiya Javayant NEGOTIATION
David DarakjyItalyBernardo Dominic NEW
Francesco ShinkoItalyXuxue Feng PROPOSAL
Morrow RutaJapanIoni Bowcher QUALIFIED
Arvin AlbaresSpainAnna Fali NEW
Costa DilliardRussiaIoni Bowcher UNQUALIFIED
Izzy GarufiUnited KingdomXuxue Feng NEGOTIATION
Greenwood BologniaGermanyElwin Sharvill PROPOSAL
Clifford RimFranceAmy Elsner QUALIFIED
Antonio CaudyArgentinaXuxue Feng PROPOSAL
Izzy GarufiIndiaElwin Sharvill QUALIFIED
Arvin AlbaresFranceAmy Elsner PROPOSAL
Antonio CaudyAustraliaElwin Sharvill PROPOSAL
Sinclair WaycottCanadaOnyama Limba PROPOSAL
David DarakjyGermanyIvan Magalhaes QUALIFIED
James ButtCanadaElwin Sharvill NEGOTIATION
Aditya KuskoGermanyAmy Elsner NEGOTIATION
Nicolas IturbideItalyIoni Bowcher NEGOTIATION
Leja CaldareraUnited KingdomStephen Shaw NEW
Darci PoquetteSpainAnna Fali UNQUALIFIED
Faith GillianBrazilAnna Fali RENEWAL
Wickens NestleIndiaAmy Elsner NEW
Alejandro PerinItalyBernardo Dominic RENEWAL
Misaki RoysterBrazilIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Morrow RutaArgentinaIvan Magalhaes RENEWAL
Chavez BriddickArgentinaAnna Fali NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes UNQUALIFIED
Izzy GarufiSpainBernardo Dominic PROPOSAL
Kadeem FlosiCanadaAnna Fali NEW
Greenwood BologniaArgentinaIvan Magalhaes QUALIFIED
Nicolas IturbideGermanyOnyama Limba NEW
Wickens NestleSpainIoni Bowcher UNQUALIFIED
Francesco ShinkoIndiaStephen Shaw NEGOTIATION
Cody SaylorsRussiaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiArgentina2025-08-09Chemel, James L Cpa NEGOTIATION43Amy Elsner
1001Adams MorascaAustralia2025-08-23Rousseaux, Michael Esq RENEWAL32Xuxue Feng
1002Ricardo GauchoFrance2025-08-03Feltz Printing Service NEW97Elwin Sharvill
1003Salvatore StockhamItaly2025-08-18Truhlar And Truhlar Attys UNQUALIFIED21Ioni Bowcher
1004Jeanfrancois VenereCanada2025-08-27Benton, John B Jr RENEWAL63Anna Fali
1005David DarakjyArgentina2025-08-10Chanay, Jeffrey A Esq UNQUALIFIED92Ioni Bowcher
1006Munro FerenczArgentina2025-08-23Truhlar And Truhlar Attys RENEWAL12Elwin Sharvill
1007Johnson SergiItaly2025-08-27Chanay, Jeffrey A Esq PROPOSAL54Amy Elsner
1008Munro FerenczFrance2025-08-12Benton, John B Jr PROPOSAL43Ioni Bowcher
1009Francesco ShinkoFrance2025-08-23Truhlar And Truhlar Attys QUALIFIED66Ivan Magalhaes
1010Jefferson SchemmerBrazil2025-08-06Rangoni Of Florence QUALIFIED46Anna Fali
1011Ashley DoeUnited Kingdom2025-07-30Buckley Miller Wright NEGOTIATION73Xuxue Feng
1012Emily WhobreySpain2025-08-20Chapman, Ross E Esq RENEWAL68Xuxue Feng
1013Misaki RoysterUnited Kingdom2025-08-19Printing Dimensions NEGOTIATION22Ioni Bowcher
1014Salvatore StockhamRussia2025-08-01Truhlar And Truhlar Attys RENEWAL34Stephen Shaw
1015David DarakjyItaly2025-08-06Chemel, James L Cpa PROPOSAL17Onyama Limba
1016Costa DilliardJapan2025-08-04Chapman, Ross E Esq NEGOTIATION5Bernardo Dominic
1017Kadeem FlosiIndia2025-08-23Feiner Bros UNQUALIFIED49Onyama Limba
1018Octavia MaletIndia2025-08-03Chemel, James L Cpa QUALIFIED65Stephen Shaw
1019Julie StensethRussia2025-08-22Feiner Bros NEW21Elwin Sharvill
1020Stacey MacleadRussia2025-08-08Feltz Printing Service QUALIFIED94Amy Elsner
1021Francesco ShinkoAustralia2025-08-07Dorl, James J Esq NEGOTIATION62Onyama Limba
1022Aruna FigeroaItaly2025-08-12Rousseaux, Michael Esq UNQUALIFIED72Anna Fali
1023Alejandro PerinUnited Kingdom2025-08-17Rangoni Of Florence RENEWAL79Elwin Sharvill
1024David DarakjyIndia2025-08-16Feiner Bros QUALIFIED84Asiya Javayant
1025Jefferson SchemmerBrazil2025-07-30King, Christopher A Esq RENEWAL43Amy Elsner
1026Greenwood BologniaJapan2025-08-19Feltz Printing Service NEGOTIATION71Asiya Javayant
1027David DarakjyRussia2025-08-14Feiner Bros NEW66Ioni Bowcher
1028Francesco ShinkoItaly2025-08-10Chemel, James L Cpa NEW75Onyama Limba
1029Jennifer AmigonCanada2025-08-04Printing Dimensions PROPOSAL75Anna Fali
1030Izzy GarufiJapan2025-08-23Feltz Printing Service NEGOTIATION2Stephen Shaw
1031Isabel BowleyBrazil2025-08-22Dorl, James J Esq QUALIFIED76Amy Elsner
1032Maria MarrierAustralia2025-08-04Feltz Printing Service NEGOTIATION25Amy Elsner
1033James ButtIndia2025-08-12Chemel, James L Cpa PROPOSAL85Ioni Bowcher
1034Izzy GarufiArgentina2025-08-24Chapman, Ross E Esq QUALIFIED10Ivan Magalhaes
1035Francesco ShinkoArgentina2025-07-31Chapman, Ross E Esq QUALIFIED64Bernardo Dominic
1036Arvin AlbaresArgentina2025-08-08Truhlar And Truhlar Attys RENEWAL44Bernardo Dominic
1037Ricardo GauchoArgentina2025-08-09Rangoni Of Florence RENEWAL86Bernardo Dominic
1038Maria MarrierGermany2025-08-19Dorl, James J Esq PROPOSAL98Onyama Limba
1039Arvin AlbaresJapan2025-08-11King, Christopher A Esq NEGOTIATION0Ivan Magalhaes
1040Silvio SlusarskiFrance2025-08-08Feiner Bros NEGOTIATION24Amy Elsner
1041Aruna FigeroaIndia2025-08-01Dorl, James J Esq QUALIFIED61Ioni Bowcher
1042Leja CaldareraSpain2025-08-05Rangoni Of Florence NEW84Asiya Javayant
1043Ashley DoeIndia2025-08-07King, Christopher A Esq PROPOSAL69Ioni Bowcher
1044Jennifer AmigonItaly2025-08-04Printing Dimensions NEW23Anna Fali
1045Maisha RulapaughBrazil2025-08-20Chapman, Ross E Esq PROPOSAL20Amy Elsner
1046Arvin AlbaresRussia2025-08-14Printing Dimensions NEGOTIATION81Asiya Javayant
1047Murillo MaletSpain2025-08-02Feltz Printing Service RENEWAL14Asiya Javayant
1048Juan WieserBrazil2025-07-30Truhlar And Truhlar Attys QUALIFIED51Stephen Shaw
1049Isabel BowleyFrance2025-08-02Feiner Bros NEW21Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereItalyAsiya Javayant NEW
Greenwood BologniaRussiaStephen Shaw UNQUALIFIED
Munro FerenczGermanyAmy Elsner QUALIFIED
Salvatore StockhamAustraliaAmy Elsner QUALIFIED
Ricardo GauchoAustraliaAmy Elsner QUALIFIED
Alejandro PerinBrazilIvan Magalhaes PROPOSAL
Arvin AlbaresAustraliaAsiya Javayant NEGOTIATION
Julie StensethUnited KingdomAmy Elsner UNQUALIFIED
Ashley DoeIndiaOnyama Limba QUALIFIED
Misaki RoysterCanadaAmy Elsner NEGOTIATION
Faith GillianGermanyAmy Elsner UNQUALIFIED
Leja CaldareraItalyBernardo Dominic UNQUALIFIED
Munro FerenczArgentinaXuxue Feng UNQUALIFIED
Maria MarrierCanadaStephen Shaw QUALIFIED
Cody SaylorsAustraliaStephen Shaw UNQUALIFIED
Maria MarrierItalyBernardo Dominic NEW
Maria MarrierSpainStephen Shaw NEGOTIATION
Munro FerenczGermanyElwin Sharvill PROPOSAL
Rodrigues CampainGermanyBernardo Dominic QUALIFIED
Leja CaldareraJapanOnyama Limba PROPOSAL
Ivar PaprockiCanadaElwin Sharvill RENEWAL
Ashley DoeUnited KingdomAmy Elsner QUALIFIED
Arvin AlbaresSpainAnna Fali UNQUALIFIED
Julie StensethFranceAsiya Javayant PROPOSAL
Cody SaylorsIndiaXuxue Feng QUALIFIED
Munro FerenczRussiaStephen Shaw QUALIFIED
Maria MarrierJapanAnna Fali QUALIFIED
Izzy GarufiJapanIoni Bowcher PROPOSAL
Ricardo GauchoSpainXuxue Feng RENEWAL
Aika InouyeCanadaOnyama Limba QUALIFIED
Ashley DoeItalyAsiya Javayant NEGOTIATION
Francesco ShinkoArgentinaXuxue Feng NEW
Isabel BowleyIndiaAmy Elsner PROPOSAL
Darci PoquetteBrazilBernardo Dominic QUALIFIED
Leja CaldareraCanadaAnna Fali NEGOTIATION
Sinclair WaycottArgentinaIoni Bowcher RENEWAL
Johnson SergiUnited KingdomAnna Fali PROPOSAL
David DarakjySpainAnna Fali NEGOTIATION
Misaki RoysterItalyStephen Shaw NEGOTIATION
Leon OldroydUnited KingdomXuxue Feng PROPOSAL
Emily WhobreyJapanIvan Magalhaes NEGOTIATION
Misaki RoysterCanadaXuxue Feng RENEWAL
Mayumi KolmetzBrazilAmy Elsner RENEWAL
Darci PoquetteAustraliaAmy Elsner QUALIFIED
Misaki RoysterGermanyOnyama Limba UNQUALIFIED
Jefferson SchemmerCanadaXuxue Feng QUALIFIED
Wickens NestleArgentinaAnna Fali NEGOTIATION
Maisha RulapaughIndiaIvan Magalhaes QUALIFIED
Izzy GarufiBrazilBernardo Dominic NEGOTIATION
Alejandro PerinItalyIvan Magalhaes UNQUALIFIED
Frozen Columns
Name
Leja Caldarera
Adams Morasca
Darci Poquette
Jefferson Schemmer
Murillo Malet
Julie Stenseth
Julie Stenseth
Wickens Nestle
Costa Dilliard
Silvio Slusarski
Antonio Caudy
Darci Poquette
Silvio Slusarski
Nicolas Iturbide
Tony Foller
Smith Glick
Maisha Rulapaugh
Darci Poquette
Leja Caldarera
Aruna Figeroa
Aruna Figeroa
Morrow Ruta
Ricardo Gaucho
Rodrigues Campain
David Darakjy
Munro Ferencz
Mayumi Kolmetz
Maria Marrier
Jeanfrancois Venere
Morrow Ruta
Tony Foller
Juan Wieser
Aditya Kusko
Murillo Malet
Francesco Shinko
Mayumi Kolmetz
Mujtaba Nicka
Aditya Kusko
Ashley Doe
Faith Gillian
Kadeem Flosi
Aditya Kusko
Alejandro Perin
Murillo Malet
Faith Gillian
Emily Whobrey
Claire Tollner
Arvin Albares
Aika Inouye
Isabel Bowley
IdCountryDate
1000Brazil2025-08-09
1001Argentina2025-08-20
1002Spain2025-08-09
1003France2025-08-06
1004India2025-08-28
1005Spain2025-08-27
1006Brazil2025-07-30
1007Germany2025-07-31
1008United Kingdom2025-08-23
1009Russia2025-07-30
1010Russia2025-08-02
1011Australia2025-08-18
1012Spain2025-08-14
1013India2025-07-31
1014Germany2025-08-06
1015Australia2025-08-13
1016Brazil2025-08-10
1017Spain2025-08-22
1018Spain2025-08-10
1019Brazil2025-08-01
1020Brazil2025-08-14
1021Argentina2025-08-10
1022Japan2025-08-10
1023Germany2025-08-04
1024Italy2025-08-25
1025United Kingdom2025-08-15
1026India2025-08-01
1027Spain2025-08-05
1028Brazil2025-07-30
1029India2025-08-14
1030Germany2025-08-15
1031Russia2025-08-04
1032India2025-08-26
1033Brazil2025-08-20
1034Italy2025-08-21
1035Argentina2025-08-01
1036Canada2025-08-18
1037United Kingdom2025-08-02
1038Italy2025-08-05
1039Brazil2025-08-15
1040India2025-08-02
1041Spain2025-08-15
1042Italy2025-08-24
1043France2025-08-14
1044Argentina2025-08-03
1045Canada2025-08-28
1046Australia2025-08-13
1047United Kingdom2025-08-14
1048Brazil2025-08-02
1049Brazil2025-08-28

On-Demand Data

NameIdCountryDate
James Butt1000France2025-08-24
Munro Ferencz1001Canada2025-08-24
Francesco Shinko1002India2025-08-18
Deepesh Chui1003Japan2025-08-15
Misaki Royster1004Germany2025-08-22
Salvatore Stockham1005Spain2025-08-26
David Darakjy1006Brazil2025-08-20
Leja Caldarera1007Germany2025-08-15
Antonio Caudy1008Japan2025-08-01
Greenwood Bolognia1009Argentina2025-08-26
Morrow Ruta1010Australia2025-08-19
Misaki Royster1011Italy2025-08-23
Nicolas Iturbide1012Brazil2025-08-07
Silvio Slusarski1013Canada2025-08-12
Isabel Bowley1014Argentina2025-08-04
Mujtaba Nicka1015France2025-08-20
Claire Tollner1016Germany2025-08-25
Rodrigues Campain1017Canada2025-08-27
Antonio Caudy1018France2025-08-21
Johnson Sergi1019Canada2025-08-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiItalyOnyama Limba NEGOTIATION
Mayumi KolmetzCanadaIvan Magalhaes PROPOSAL
Maria MarrierCanadaAmy Elsner QUALIFIED
Chavez BriddickItalyBernardo Dominic RENEWAL
Silvio SlusarskiGermanyIoni Bowcher QUALIFIED
Stacey MacleadJapanStephen Shaw RENEWAL
Misaki RoysterSpainIvan Magalhaes UNQUALIFIED
Aika InouyeArgentinaBernardo Dominic QUALIFIED
Leja CaldareraRussiaElwin Sharvill UNQUALIFIED
Kaitlin OstroskyCanadaOnyama Limba PROPOSAL
Salvatore StockhamFranceXuxue Feng NEW
Octavia MaletJapanAsiya Javayant NEGOTIATION
Rodrigues CampainFranceOnyama Limba NEGOTIATION
Jefferson SchemmerFranceBernardo Dominic PROPOSAL
Mujtaba NickaBrazilAnna Fali NEGOTIATION
Darci PoquetteBrazilAmy Elsner UNQUALIFIED
Claire TollnerBrazilElwin Sharvill QUALIFIED
Aika InouyeBrazilStephen Shaw NEGOTIATION
Izzy GarufiUnited KingdomAsiya Javayant UNQUALIFIED
Kadeem FlosiSpainStephen Shaw NEW
Arvin AlbaresJapanIoni Bowcher PROPOSAL
Ivar PaprockiSpainAnna Fali QUALIFIED
Julie StensethUnited KingdomStephen Shaw NEW
Aditya KuskoIndiaIoni Bowcher NEGOTIATION
Alejandro PerinFranceElwin Sharvill NEW
Salvatore StockhamCanadaAmy Elsner PROPOSAL
Aika InouyeCanadaAnna Fali NEW
Clifford RimIndiaXuxue Feng RENEWAL
Octavia MaletSpainIoni Bowcher UNQUALIFIED
Aika InouyeIndiaAmy Elsner PROPOSAL
Darci PoquetteFranceAsiya Javayant PROPOSAL
Mujtaba NickaArgentinaAsiya Javayant RENEWAL
Adams MorascaJapanIoni Bowcher NEGOTIATION
Leja CaldareraRussiaStephen Shaw RENEWAL
Munro FerenczIndiaXuxue Feng UNQUALIFIED
Rodrigues CampainCanadaOnyama Limba RENEWAL
Smith GlickFranceIoni Bowcher NEGOTIATION
Johnson SergiJapanAsiya Javayant NEGOTIATION
Octavia MaletFranceOnyama Limba UNQUALIFIED
Aruna FigeroaGermanyXuxue Feng 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>