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
Stacey MacleadSpainXuxue Feng RENEWAL
Rodrigues CampainItalyIoni Bowcher QUALIFIED
Faith GillianRussiaStephen Shaw RENEWAL
Aika InouyeSpainAsiya Javayant UNQUALIFIED
Deepesh ChuiItalyAmy Elsner RENEWAL
Greenwood BologniaIndiaIvan Magalhaes QUALIFIED
Maria MarrierBrazilBernardo Dominic PROPOSAL
Juan WieserGermanyAsiya Javayant NEGOTIATION
Deepesh ChuiJapanAmy Elsner UNQUALIFIED
Silvio SlusarskiIndiaElwin Sharvill NEGOTIATION
Isabel BowleyArgentinaIoni Bowcher NEW
Rodrigues CampainFranceBernardo Dominic NEW
James ButtIndiaAsiya Javayant NEGOTIATION
Darci PoquetteFranceAnna Fali QUALIFIED
Rodrigues CampainSpainIvan Magalhaes QUALIFIED
Ivar PaprockiIndiaElwin Sharvill QUALIFIED
Kadeem FlosiRussiaElwin Sharvill RENEWAL
Adams MorascaItalyOnyama Limba PROPOSAL
Costa DilliardGermanyAnna Fali UNQUALIFIED
Ivar PaprockiUnited KingdomIoni Bowcher NEW
Aditya KuskoJapanAnna Fali PROPOSAL
Greenwood BologniaJapanAmy Elsner NEW
Kadeem FlosiCanadaOnyama Limba PROPOSAL
Johnson SergiGermanyIoni Bowcher PROPOSAL
James ButtItalyIvan Magalhaes NEGOTIATION
Clifford RimRussiaAmy Elsner NEGOTIATION
Darci PoquetteSpainAmy Elsner NEW
Leja CaldareraSpainIvan Magalhaes RENEWAL
Greenwood BologniaBrazilAnna Fali UNQUALIFIED
Jones VocelkaAustraliaElwin Sharvill NEGOTIATION
Julie StensethBrazilIoni Bowcher QUALIFIED
Misaki RoysterRussiaAmy Elsner PROPOSAL
Johnson SergiBrazilAmy Elsner QUALIFIED
Jefferson SchemmerSpainBernardo Dominic NEGOTIATION
Octavia MaletArgentinaBernardo Dominic PROPOSAL
Kadeem FlosiSpainOnyama Limba PROPOSAL
Ashley DoeRussiaOnyama Limba PROPOSAL
Kadeem FlosiSpainStephen Shaw QUALIFIED
Kaitlin OstroskyIndiaAsiya Javayant PROPOSAL
Aditya KuskoJapanIvan Magalhaes UNQUALIFIED
Jones VocelkaAustraliaBernardo Dominic QUALIFIED
Antonio CaudyBrazilStephen Shaw PROPOSAL
Silvio SlusarskiFranceBernardo Dominic NEGOTIATION
Mayumi KolmetzJapanXuxue Feng QUALIFIED
Ricardo GauchoIndiaAmy Elsner PROPOSAL
Salvatore StockhamAustraliaBernardo Dominic NEGOTIATION
Adams MorascaSpainAmy Elsner RENEWAL
Nicolas IturbideRussiaElwin Sharvill PROPOSAL
James ButtGermanyStephen Shaw PROPOSAL
Nicolas IturbideGermanyIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterArgentinaAsiya Javayant PROPOSAL
Cody SaylorsItalyElwin Sharvill RENEWAL
Aditya KuskoIndiaAnna Fali NEW
Francesco ShinkoIndiaBernardo Dominic PROPOSAL
Ashley DoeGermanyOnyama Limba UNQUALIFIED
Ashley DoeRussiaAnna Fali QUALIFIED
Maria MarrierArgentinaIvan Magalhaes NEW
Johnson SergiIndiaBernardo Dominic NEW
Nicolas IturbideCanadaIvan Magalhaes NEGOTIATION
Cody SaylorsRussiaAnna Fali UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000David DarakjyItaly2026-05-01Feltz Printing Service NEW25Xuxue Feng
1001Leja CaldareraArgentina2026-05-23Chanay, Jeffrey A Esq RENEWAL6Amy Elsner
1002Jeanfrancois VenereUnited Kingdom2026-05-02Feltz Printing Service UNQUALIFIED58Stephen Shaw
1003Isabel BowleyIndia2026-05-16Truhlar And Truhlar Attys UNQUALIFIED10Bernardo Dominic
1004Salvatore StockhamArgentina2026-05-15Chanay, Jeffrey A Esq RENEWAL92Bernardo Dominic
1005Kadeem FlosiItaly2026-05-12Morlong Associates QUALIFIED60Ioni Bowcher
1006Clifford RimIndia2026-05-15Morlong Associates RENEWAL83Ioni Bowcher
1007James ButtAustralia2026-05-01Chapman, Ross E Esq QUALIFIED57Stephen Shaw
1008Salvatore StockhamRussia2026-05-27Feiner Bros UNQUALIFIED26Asiya Javayant
1009Salvatore StockhamBrazil2026-04-28Printing Dimensions UNQUALIFIED93Elwin Sharvill
1010Ricardo GauchoCanada2026-05-22Chanay, Jeffrey A Esq PROPOSAL85Ivan Magalhaes
1011David DarakjyJapan2026-05-11Buckley Miller Wright NEW50Elwin Sharvill
1012Juan WieserIndia2026-04-28Benton, John B Jr NEGOTIATION22Elwin Sharvill
1013Leja CaldareraItaly2026-04-30Feiner Bros RENEWAL91Onyama Limba
1014Misaki RoysterUnited Kingdom2026-05-04Rangoni Of Florence UNQUALIFIED66Ioni Bowcher
1015Chavez BriddickCanada2026-04-29Rangoni Of Florence UNQUALIFIED43Onyama Limba
1016Deepesh ChuiArgentina2026-04-29King, Christopher A Esq RENEWAL11Xuxue Feng
1017Aditya KuskoUnited Kingdom2026-05-15Rangoni Of Florence QUALIFIED8Anna Fali
1018Greenwood BologniaRussia2026-05-27Truhlar And Truhlar Attys RENEWAL95Asiya Javayant
1019Morrow RutaRussia2026-05-19Printing Dimensions UNQUALIFIED13Xuxue Feng
1020Clifford RimGermany2026-05-07Commercial Press RENEWAL42Ivan Magalhaes
1021Maisha RulapaughFrance2026-05-19Rangoni Of Florence UNQUALIFIED15Onyama Limba
1022Arvin AlbaresGermany2026-05-13King, Christopher A Esq UNQUALIFIED21Stephen Shaw
1023Francesco ShinkoGermany2026-04-30Chanay, Jeffrey A Esq UNQUALIFIED33Ivan Magalhaes
1024Greenwood BologniaIndia2026-04-28Chemel, James L Cpa PROPOSAL22Elwin Sharvill
1025Adams MorascaAustralia2026-05-08King, Christopher A Esq NEGOTIATION63Xuxue Feng
1026Aditya KuskoIndia2026-05-08Feiner Bros RENEWAL22Onyama Limba
1027Kaitlin OstroskyArgentina2026-05-22Chapman, Ross E Esq NEW22Amy Elsner
1028Kadeem FlosiBrazil2026-05-03Benton, John B Jr NEGOTIATION61Xuxue Feng
1029Rodrigues CampainSpain2026-05-23Dorl, James J Esq QUALIFIED50Bernardo Dominic
1030Rodrigues CampainFrance2026-05-14Commercial Press NEGOTIATION65Onyama Limba
1031Adams MorascaGermany2026-05-23Chanay, Jeffrey A Esq UNQUALIFIED0Ivan Magalhaes
1032Sinclair WaycottRussia2026-05-03Benton, John B Jr NEW11Asiya Javayant
1033Clifford RimRussia2026-05-07Dorl, James J Esq PROPOSAL29Ivan Magalhaes
1034Murillo MaletArgentina2026-05-01Rousseaux, Michael Esq PROPOSAL86Asiya Javayant
1035Sinclair WaycottArgentina2026-05-02Buckley Miller Wright PROPOSAL18Stephen Shaw
1036Murillo MaletAustralia2026-05-05Benton, John B Jr NEW48Bernardo Dominic
1037Deepesh ChuiFrance2026-05-12Dorl, James J Esq NEW87Onyama Limba
1038Jefferson SchemmerCanada2026-05-04Feltz Printing Service UNQUALIFIED4Elwin Sharvill
1039Costa DilliardCanada2026-05-06Rangoni Of Florence NEW63Ivan Magalhaes
1040Ashley DoeCanada2026-05-15Morlong Associates PROPOSAL89Anna Fali
1041Ashley DoeJapan2026-05-02Truhlar And Truhlar Attys PROPOSAL16Ioni Bowcher
1042Munro FerenczFrance2026-05-21Chanay, Jeffrey A Esq PROPOSAL96Asiya Javayant
1043Julie StensethJapan2026-05-26Printing Dimensions UNQUALIFIED56Amy Elsner
1044Deepesh ChuiGermany2026-05-24Buckley Miller Wright NEW14Asiya Javayant
1045Johnson SergiJapan2026-05-20Feiner Bros UNQUALIFIED47Anna Fali
1046Julie StensethFrance2026-05-20Rangoni Of Florence NEGOTIATION6Onyama Limba
1047Morrow RutaFrance2026-05-05Feltz Printing Service UNQUALIFIED42Bernardo Dominic
1048Aika InouyeBrazil2026-04-30Printing Dimensions NEGOTIATION2Elwin Sharvill
1049Silvio SlusarskiAustralia2026-04-28Feiner Bros NEW85Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Cody SaylorsUnited KingdomAmy Elsner NEW
Izzy GarufiCanadaAsiya Javayant NEW
Murillo MaletSpainIoni Bowcher QUALIFIED
Kaitlin OstroskyJapanStephen Shaw UNQUALIFIED
Costa DilliardUnited KingdomIoni Bowcher NEW
Murillo MaletItalyXuxue Feng NEGOTIATION
Octavia MaletItalyAnna Fali NEGOTIATION
Antonio CaudyIndiaAsiya Javayant NEGOTIATION
Misaki RoysterSpainElwin Sharvill RENEWAL
Jones VocelkaItalyAmy Elsner QUALIFIED
Francesco ShinkoIndiaXuxue Feng NEGOTIATION
Jefferson SchemmerArgentinaStephen Shaw PROPOSAL
Mujtaba NickaSpainAnna Fali RENEWAL
Jennifer AmigonUnited KingdomIvan Magalhaes UNQUALIFIED
Antonio CaudyUnited KingdomXuxue Feng NEW
Jefferson SchemmerIndiaAmy Elsner NEGOTIATION
Claire TollnerSpainBernardo Dominic NEW
Tony FollerUnited KingdomAmy Elsner RENEWAL
Ashley DoeUnited KingdomStephen Shaw RENEWAL
Johnson SergiCanadaIvan Magalhaes PROPOSAL
Izzy GarufiIndiaIoni Bowcher QUALIFIED
Mayumi KolmetzAustraliaAmy Elsner PROPOSAL
Mayumi KolmetzArgentinaIvan Magalhaes QUALIFIED
David DarakjyItalyAsiya Javayant QUALIFIED
Salvatore StockhamBrazilAsiya Javayant QUALIFIED
Jefferson SchemmerSpainElwin Sharvill NEGOTIATION
Murillo MaletJapanOnyama Limba QUALIFIED
Leja CaldareraIndiaAnna Fali QUALIFIED
Wickens NestleUnited KingdomElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomOnyama Limba QUALIFIED
Faith GillianUnited KingdomXuxue Feng NEW
Antonio CaudyGermanyAmy Elsner NEW
Julie StensethJapanIvan Magalhaes NEW
Mujtaba NickaAustraliaStephen Shaw NEW
Costa DilliardGermanyAsiya Javayant PROPOSAL
Isabel BowleyJapanAsiya Javayant PROPOSAL
Rodrigues CampainCanadaAsiya Javayant NEW
Rodrigues CampainAustraliaXuxue Feng NEGOTIATION
Antonio CaudyUnited KingdomAsiya Javayant QUALIFIED
Kadeem FlosiAustraliaOnyama Limba NEW
Munro FerenczArgentinaXuxue Feng NEW
Alejandro PerinBrazilAsiya Javayant NEGOTIATION
Antonio CaudyRussiaAsiya Javayant NEGOTIATION
Wickens NestleSpainBernardo Dominic QUALIFIED
Faith GillianAustraliaXuxue Feng PROPOSAL
Julie StensethRussiaElwin Sharvill NEW
Ricardo GauchoArgentinaOnyama Limba PROPOSAL
Antonio CaudyBrazilAnna Fali NEW
Claire TollnerItalyStephen Shaw NEW
Ivar PaprockiAustraliaElwin Sharvill NEW
Frozen Columns
Name
Izzy Garufi
Alejandro Perin
Mujtaba Nicka
Jeanfrancois Venere
Aruna Figeroa
Mayumi Kolmetz
Mujtaba Nicka
Leon Oldroyd
Leon Oldroyd
Leon Oldroyd
Greenwood Bolognia
Isabel Bowley
Stacey Maclead
Mayumi Kolmetz
Jennifer Amigon
Leja Caldarera
Deepesh Chui
Izzy Garufi
Nicolas Iturbide
Emily Whobrey
Clifford Rim
Kaitlin Ostrosky
Nicolas Iturbide
Cody Saylors
Aruna Figeroa
Rodrigues Campain
Murillo Malet
Ivar Paprocki
Murillo Malet
Maisha Rulapaugh
Kadeem Flosi
Kadeem Flosi
Arvin Albares
Ashley Doe
Johnson Sergi
Silvio Slusarski
Morrow Ruta
Antonio Caudy
Morrow Ruta
Kaitlin Ostrosky
Isabel Bowley
Emily Whobrey
Smith Glick
Morrow Ruta
Mujtaba Nicka
Maria Marrier
Maisha Rulapaugh
Juan Wieser
Jones Vocelka
Tony Foller
IdCountryDate
1000Russia2026-05-10
1001Germany2026-05-11
1002Australia2026-05-12
1003Italy2026-05-23
1004Brazil2026-05-20
1005Spain2026-05-24
1006Germany2026-05-19
1007Spain2026-05-06
1008Germany2026-05-05
1009India2026-05-08
1010India2026-05-20
1011Spain2026-05-23
1012Australia2026-05-02
1013Russia2026-05-06
1014India2026-05-04
1015United Kingdom2026-04-28
1016France2026-05-19
1017Russia2026-05-06
1018France2026-05-02
1019Brazil2026-05-24
1020United Kingdom2026-05-19
1021Germany2026-05-07
1022France2026-05-06
1023Italy2026-04-28
1024Canada2026-05-25
1025Russia2026-05-07
1026Japan2026-05-17
1027Russia2026-05-18
1028Spain2026-05-09
1029India2026-05-04
1030Spain2026-05-23
1031Australia2026-05-20
1032Germany2026-05-12
1033Japan2026-05-01
1034India2026-05-03
1035Spain2026-05-04
1036Germany2026-05-04
1037Japan2026-05-04
1038Canada2026-05-07
1039Argentina2026-05-02
1040Australia2026-05-03
1041Germany2026-05-06
1042Brazil2026-05-24
1043United Kingdom2026-05-11
1044India2026-05-08
1045Spain2026-05-26
1046Brazil2026-05-04
1047Spain2026-05-10
1048Argentina2026-05-02
1049India2026-05-11

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000Canada2026-05-17
Leja Caldarera1001Russia2026-05-24
Mujtaba Nicka1002Germany2026-05-21
Tony Foller1003France2026-05-13
Mayumi Kolmetz1004Japan2026-05-06
Murillo Malet1005Spain2026-05-01
Julie Stenseth1006United Kingdom2026-05-05
Maria Marrier1007Spain2026-05-19
Juan Wieser1008Russia2026-04-29
Murillo Malet1009Italy2026-05-19
Mayumi Kolmetz1010Japan2026-05-03
Johnson Sergi1011Argentina2026-05-09
Wickens Nestle1012Spain2026-04-30
Julie Stenseth1013Australia2026-05-20
Misaki Royster1014Argentina2026-05-18
Francesco Shinko1015Canada2026-05-07
Costa Dilliard1016Argentina2026-05-12
Aruna Figeroa1017Germany2026-05-23
Claire Tollner1018United Kingdom2026-05-24
Costa Dilliard1019India2026-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy GarufiBrazilStephen Shaw PROPOSAL
Rodrigues CampainSpainXuxue Feng QUALIFIED
Jennifer AmigonGermanyBernardo Dominic UNQUALIFIED
Jones VocelkaGermanyXuxue Feng QUALIFIED
Nicolas IturbideRussiaOnyama Limba UNQUALIFIED
Kaitlin OstroskyGermanyElwin Sharvill RENEWAL
Salvatore StockhamArgentinaStephen Shaw UNQUALIFIED
Julie StensethUnited KingdomOnyama Limba NEW
Jones VocelkaFranceStephen Shaw RENEWAL
Munro FerenczRussiaAmy Elsner NEGOTIATION
Costa DilliardUnited KingdomBernardo Dominic PROPOSAL
Salvatore StockhamGermanyStephen Shaw NEW
Cody SaylorsCanadaOnyama Limba NEW
Tony FollerFranceOnyama Limba NEGOTIATION
Morrow RutaGermanyAsiya Javayant NEGOTIATION
Jefferson SchemmerFranceStephen Shaw QUALIFIED
Izzy GarufiItalyBernardo Dominic NEW
Jones VocelkaArgentinaStephen Shaw QUALIFIED
Aruna FigeroaAustraliaOnyama Limba NEW
Emily WhobreyBrazilIoni Bowcher UNQUALIFIED
Darci PoquetteUnited KingdomElwin Sharvill NEW
Octavia MaletArgentinaAmy Elsner QUALIFIED
Aditya KuskoJapanAsiya Javayant QUALIFIED
Deepesh ChuiJapanAnna Fali RENEWAL
Kaitlin OstroskyJapanAmy Elsner QUALIFIED
Ivar PaprockiAustraliaAnna Fali RENEWAL
Arvin AlbaresGermanyXuxue Feng NEW
Leja CaldareraUnited KingdomAsiya Javayant UNQUALIFIED
Rodrigues CampainAustraliaAsiya Javayant PROPOSAL
Jefferson SchemmerSpainAsiya Javayant RENEWAL
Faith GillianArgentinaIvan Magalhaes NEGOTIATION
Cody SaylorsJapanElwin Sharvill NEGOTIATION
Arvin AlbaresBrazilBernardo Dominic NEW
Faith GillianUnited KingdomAmy Elsner NEW
Chavez BriddickUnited KingdomAnna Fali NEW
Deepesh ChuiSpainStephen Shaw UNQUALIFIED
Aruna FigeroaGermanyOnyama Limba RENEWAL
Julie StensethJapanIvan Magalhaes UNQUALIFIED
Cody SaylorsIndiaOnyama Limba QUALIFIED
Maria MarrierGermanyXuxue Feng 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>