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
Tony FollerBrazilXuxue Feng NEGOTIATION
Cody SaylorsSpainIoni Bowcher PROPOSAL
Mayumi KolmetzUnited KingdomAmy Elsner NEGOTIATION
Leon OldroydGermanyStephen Shaw RENEWAL
Leja CaldareraArgentinaElwin Sharvill RENEWAL
Leja CaldareraSpainIvan Magalhaes NEGOTIATION
Leon OldroydSpainOnyama Limba PROPOSAL
Maria MarrierBrazilStephen Shaw PROPOSAL
Maria MarrierIndiaAmy Elsner RENEWAL
Chavez BriddickAustraliaOnyama Limba QUALIFIED
Rodrigues CampainCanadaIoni Bowcher PROPOSAL
Antonio CaudyBrazilElwin Sharvill QUALIFIED
Aditya KuskoUnited KingdomIoni Bowcher UNQUALIFIED
Chavez BriddickAustraliaXuxue Feng NEGOTIATION
Mayumi KolmetzIndiaAmy Elsner UNQUALIFIED
Faith GillianSpainXuxue Feng NEW
Sinclair WaycottFranceXuxue Feng QUALIFIED
Clifford RimCanadaOnyama Limba NEGOTIATION
Rodrigues CampainIndiaBernardo Dominic NEW
Claire TollnerSpainBernardo Dominic UNQUALIFIED
Nicolas IturbideCanadaAsiya Javayant PROPOSAL
Morrow RutaBrazilOnyama Limba RENEWAL
Greenwood BologniaGermanyStephen Shaw UNQUALIFIED
Jefferson SchemmerGermanyAsiya Javayant QUALIFIED
Costa DilliardFranceStephen Shaw UNQUALIFIED
Stacey MacleadAustraliaAmy Elsner QUALIFIED
Smith GlickItalyIoni Bowcher NEW
Maria MarrierUnited KingdomOnyama Limba PROPOSAL
Claire TollnerJapanIoni Bowcher NEW
Mayumi KolmetzJapanAmy Elsner NEGOTIATION
Deepesh ChuiAustraliaAnna Fali RENEWAL
Antonio CaudyBrazilOnyama Limba NEGOTIATION
Chavez BriddickGermanyIoni Bowcher UNQUALIFIED
Juan WieserBrazilBernardo Dominic NEGOTIATION
Maisha RulapaughItalyIoni Bowcher PROPOSAL
Jefferson SchemmerCanadaElwin Sharvill PROPOSAL
Jeanfrancois VenereCanadaAnna Fali NEW
Antonio CaudyUnited KingdomXuxue Feng NEW
Leja CaldareraRussiaOnyama Limba RENEWAL
Stacey MacleadBrazilIvan Magalhaes PROPOSAL
Smith GlickUnited KingdomAsiya Javayant NEW
Emily WhobreyRussiaElwin Sharvill QUALIFIED
Maria MarrierSpainIvan Magalhaes NEGOTIATION
Cody SaylorsFranceAnna Fali QUALIFIED
Kaitlin OstroskyCanadaAnna Fali PROPOSAL
Johnson SergiGermanyElwin Sharvill NEW
Izzy GarufiRussiaIvan Magalhaes RENEWAL
Stacey MacleadCanadaElwin Sharvill QUALIFIED
Jefferson SchemmerRussiaXuxue Feng RENEWAL
Aruna FigeroaItalyAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterArgentinaXuxue Feng PROPOSAL
Alejandro PerinCanadaOnyama Limba QUALIFIED
Arvin AlbaresJapanIoni Bowcher PROPOSAL
Faith GillianBrazilAmy Elsner UNQUALIFIED
Jennifer AmigonArgentinaElwin Sharvill PROPOSAL
Aruna FigeroaItalyStephen Shaw RENEWAL
Alejandro PerinBrazilAmy Elsner PROPOSAL
Jefferson SchemmerUnited KingdomAnna Fali QUALIFIED
Francesco ShinkoBrazilIvan Magalhaes NEW
Ricardo GauchoBrazilAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Costa DilliardAustralia2026-05-18Truhlar And Truhlar Attys NEGOTIATION89Xuxue Feng
1001Antonio CaudyGermany2026-05-20Feltz Printing Service NEW11Xuxue Feng
1002Salvatore StockhamAustralia2026-05-22Truhlar And Truhlar Attys UNQUALIFIED85Ivan Magalhaes
1003Morrow RutaAustralia2026-05-07Truhlar And Truhlar Attys NEGOTIATION58Stephen Shaw
1004Alejandro PerinIndia2026-05-02Buckley Miller Wright NEW36Ivan Magalhaes
1005Ashley DoeIndia2026-05-18Feltz Printing Service RENEWAL92Anna Fali
1006Salvatore StockhamIndia2026-05-22Feltz Printing Service RENEWAL18Elwin Sharvill
1007David DarakjyCanada2026-05-14Feiner Bros QUALIFIED74Onyama Limba
1008Clifford RimRussia2026-05-13Commercial Press QUALIFIED18Asiya Javayant
1009Silvio SlusarskiGermany2026-05-26Feltz Printing Service NEGOTIATION59Asiya Javayant
1010Munro FerenczItaly2026-05-19Feiner Bros PROPOSAL96Anna Fali
1011Aika InouyeFrance2026-05-03Rousseaux, Michael Esq UNQUALIFIED50Onyama Limba
1012Misaki RoysterArgentina2026-05-29Rousseaux, Michael Esq PROPOSAL24Elwin Sharvill
1013Ricardo GauchoIndia2026-05-20Rangoni Of Florence PROPOSAL79Ioni Bowcher
1014Arvin AlbaresGermany2026-05-20Truhlar And Truhlar Attys QUALIFIED81Onyama Limba
1015Stacey MacleadGermany2026-05-06Benton, John B Jr UNQUALIFIED36Ivan Magalhaes
1016Smith GlickUnited Kingdom2026-05-16Chemel, James L Cpa QUALIFIED35Onyama Limba
1017Nicolas IturbideFrance2026-05-02Truhlar And Truhlar Attys RENEWAL15Anna Fali
1018Aika InouyeFrance2026-04-30Printing Dimensions NEW29Amy Elsner
1019Ricardo GauchoBrazil2026-05-20Feltz Printing Service UNQUALIFIED17Stephen Shaw
1020Emily WhobreyGermany2026-05-15Dorl, James J Esq NEGOTIATION74Stephen Shaw
1021Ricardo GauchoIndia2026-05-19King, Christopher A Esq PROPOSAL86Ioni Bowcher
1022Murillo MaletAustralia2026-05-25Feiner Bros UNQUALIFIED78Elwin Sharvill
1023Leon OldroydArgentina2026-05-04Chapman, Ross E Esq NEGOTIATION60Ioni Bowcher
1024Greenwood BologniaArgentina2026-05-17Morlong Associates RENEWAL10Elwin Sharvill
1025Izzy GarufiBrazil2026-04-30Truhlar And Truhlar Attys NEGOTIATION28Anna Fali
1026Silvio SlusarskiRussia2026-05-08Chapman, Ross E Esq QUALIFIED54Bernardo Dominic
1027Greenwood BologniaCanada2026-05-18Feiner Bros QUALIFIED89Anna Fali
1028Octavia MaletIndia2026-05-05Chapman, Ross E Esq NEW14Amy Elsner
1029James ButtJapan2026-05-06Commercial Press NEGOTIATION94Onyama Limba
1030Chavez BriddickItaly2026-05-03Truhlar And Truhlar Attys QUALIFIED38Stephen Shaw
1031Costa DilliardGermany2026-05-09Chemel, James L Cpa QUALIFIED10Asiya Javayant
1032Mujtaba NickaArgentina2026-05-13Truhlar And Truhlar Attys QUALIFIED1Ioni Bowcher
1033Mujtaba NickaBrazil2026-05-14Chanay, Jeffrey A Esq NEW29Asiya Javayant
1034Rodrigues CampainSpain2026-05-05Chapman, Ross E Esq UNQUALIFIED99Anna Fali
1035Aruna FigeroaCanada2026-05-25Benton, John B Jr NEW0Stephen Shaw
1036Arvin AlbaresFrance2026-05-26Rangoni Of Florence NEGOTIATION25Anna Fali
1037Kadeem FlosiIndia2026-05-29Rangoni Of Florence PROPOSAL57Ioni Bowcher
1038Faith GillianGermany2026-05-28Feiner Bros UNQUALIFIED21Xuxue Feng
1039Julie StensethUnited Kingdom2026-05-13Feiner Bros NEGOTIATION47Asiya Javayant
1040Costa DilliardItaly2026-05-09Buckley Miller Wright NEGOTIATION58Anna Fali
1041Johnson SergiUnited Kingdom2026-05-14Commercial Press UNQUALIFIED13Asiya Javayant
1042Antonio CaudyRussia2026-05-04Feltz Printing Service NEW98Bernardo Dominic
1043Aika InouyeBrazil2026-05-23Buckley Miller Wright RENEWAL53Bernardo Dominic
1044Octavia MaletCanada2026-05-22Commercial Press UNQUALIFIED90Ioni Bowcher
1045Emily WhobreyCanada2026-05-09Buckley Miller Wright PROPOSAL71Onyama Limba
1046Smith GlickCanada2026-05-17Morlong Associates QUALIFIED51Anna Fali
1047Sinclair WaycottGermany2026-05-11Feiner Bros NEGOTIATION58Asiya Javayant
1048Julie StensethUnited Kingdom2026-05-08Buckley Miller Wright NEW95Bernardo Dominic
1049Munro FerenczIndia2026-05-27Rousseaux, Michael Esq RENEWAL18Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyCanadaElwin Sharvill NEW
Faith GillianGermanyAsiya Javayant NEW
Ricardo GauchoGermanyXuxue Feng QUALIFIED
Maria MarrierSpainBernardo Dominic PROPOSAL
Sinclair WaycottFranceXuxue Feng QUALIFIED
Claire TollnerGermanyAsiya Javayant PROPOSAL
Darci PoquetteItalyStephen Shaw NEGOTIATION
Chavez BriddickSpainXuxue Feng RENEWAL
Julie StensethBrazilOnyama Limba RENEWAL
Jennifer AmigonGermanyBernardo Dominic PROPOSAL
Ashley DoeIndiaAsiya Javayant NEW
Mujtaba NickaFranceOnyama Limba PROPOSAL
Darci PoquetteJapanElwin Sharvill RENEWAL
Claire TollnerCanadaElwin Sharvill PROPOSAL
Francesco ShinkoRussiaAmy Elsner PROPOSAL
Johnson SergiArgentinaBernardo Dominic QUALIFIED
Emily WhobreyAustraliaIvan Magalhaes NEW
Tony FollerItalyAnna Fali NEGOTIATION
Kaitlin OstroskyBrazilOnyama Limba QUALIFIED
Maria MarrierJapanIoni Bowcher UNQUALIFIED
Chavez BriddickFranceAnna Fali NEGOTIATION
Deepesh ChuiSpainBernardo Dominic NEW
Tony FollerItalyAmy Elsner UNQUALIFIED
Ricardo GauchoSpainXuxue Feng UNQUALIFIED
Jefferson SchemmerFranceAnna Fali UNQUALIFIED
Deepesh ChuiBrazilBernardo Dominic UNQUALIFIED
Cody SaylorsCanadaOnyama Limba NEGOTIATION
Nicolas IturbideUnited KingdomXuxue Feng QUALIFIED
Aditya KuskoFranceIvan Magalhaes QUALIFIED
Isabel BowleyIndiaBernardo Dominic QUALIFIED
Octavia MaletCanadaAnna Fali NEW
Greenwood BologniaItalyOnyama Limba NEGOTIATION
Murillo MaletIndiaIvan Magalhaes NEGOTIATION
Darci PoquetteIndiaIoni Bowcher NEW
Emily WhobreyIndiaIvan Magalhaes NEW
Stacey MacleadUnited KingdomXuxue Feng RENEWAL
Jennifer AmigonUnited KingdomElwin Sharvill PROPOSAL
Clifford RimIndiaStephen Shaw QUALIFIED
Octavia MaletFranceElwin Sharvill NEW
Aika InouyeUnited KingdomBernardo Dominic NEGOTIATION
Octavia MaletJapanAnna Fali QUALIFIED
Faith GillianBrazilElwin Sharvill QUALIFIED
Juan WieserGermanyAmy Elsner QUALIFIED
Silvio SlusarskiCanadaStephen Shaw RENEWAL
Rodrigues CampainBrazilAmy Elsner UNQUALIFIED
Maisha RulapaughArgentinaAsiya Javayant QUALIFIED
Munro FerenczIndiaStephen Shaw PROPOSAL
Stacey MacleadSpainXuxue Feng PROPOSAL
Ivar PaprockiBrazilIvan Magalhaes PROPOSAL
Octavia MaletJapanIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Nicolas Iturbide
Francesco Shinko
Alejandro Perin
Octavia Malet
Sinclair Waycott
Faith Gillian
Mayumi Kolmetz
Ivar Paprocki
Antonio Caudy
Isabel Bowley
Tony Foller
Aruna Figeroa
Maria Marrier
Smith Glick
Antonio Caudy
Murillo Malet
Octavia Malet
Ivar Paprocki
Francesco Shinko
Adams Morasca
Silvio Slusarski
Greenwood Bolognia
Murillo Malet
Maria Marrier
Jones Vocelka
Emily Whobrey
Aruna Figeroa
Ricardo Gaucho
Ashley Doe
Maisha Rulapaugh
Costa Dilliard
Greenwood Bolognia
Kadeem Flosi
Jennifer Amigon
Maria Marrier
Aditya Kusko
Sinclair Waycott
Izzy Garufi
Claire Tollner
Jeanfrancois Venere
Smith Glick
Ivar Paprocki
Ashley Doe
Stacey Maclead
Johnson Sergi
Julie Stenseth
Deepesh Chui
Mujtaba Nicka
Jeanfrancois Venere
Kadeem Flosi
IdCountryDate
1000Australia2026-05-07
1001Germany2026-05-14
1002Australia2026-05-28
1003Australia2026-05-16
1004Spain2026-05-10
1005India2026-05-09
1006Canada2026-05-19
1007France2026-05-26
1008United Kingdom2026-05-02
1009Canada2026-05-12
1010Argentina2026-05-01
1011Germany2026-05-18
1012India2026-05-08
1013Germany2026-05-26
1014Canada2026-05-08
1015Italy2026-05-18
1016Japan2026-05-26
1017France2026-05-29
1018Italy2026-04-30
1019Spain2026-05-11
1020Argentina2026-05-17
1021Canada2026-05-16
1022Canada2026-04-30
1023India2026-05-04
1024Japan2026-05-06
1025Italy2026-05-19
1026Spain2026-05-27
1027Australia2026-05-09
1028Brazil2026-05-01
1029Spain2026-05-19
1030Australia2026-05-09
1031United Kingdom2026-05-08
1032Brazil2026-05-04
1033Russia2026-05-01
1034Brazil2026-05-14
1035Argentina2026-05-19
1036Argentina2026-05-03
1037France2026-05-01
1038Canada2026-05-18
1039United Kingdom2026-05-06
1040Canada2026-05-23
1041Australia2026-05-03
1042United Kingdom2026-05-22
1043France2026-05-02
1044Australia2026-05-25
1045Japan2026-05-01
1046Italy2026-05-13
1047United Kingdom2026-05-12
1048Australia2026-05-15
1049Germany2026-05-07

On-Demand Data

NameIdCountryDate
Isabel Bowley1000Spain2026-05-05
Kadeem Flosi1001Australia2026-05-09
Alejandro Perin1002India2026-05-26
Kadeem Flosi1003United Kingdom2026-05-20
Claire Tollner1004Russia2026-05-27
Smith Glick1005India2026-05-23
Adams Morasca1006France2026-05-08
Mayumi Kolmetz1007Russia2026-05-04
Cody Saylors1008Australia2026-05-21
Kaitlin Ostrosky1009Spain2026-05-20
Emily Whobrey1010Spain2026-05-26
Jefferson Schemmer1011Brazil2026-05-02
David Darakjy1012Australia2026-05-21
Clifford Rim1013Germany2026-05-01
Leon Oldroyd1014Brazil2026-05-13
Izzy Garufi1015Canada2026-05-04
Adams Morasca1016United Kingdom2026-05-07
Misaki Royster1017Japan2026-05-08
James Butt1018Japan2026-05-12
Aditya Kusko1019Japan2026-04-30
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ivar PaprockiArgentinaStephen Shaw NEGOTIATION
Aika InouyeJapanIoni Bowcher NEGOTIATION
Smith GlickArgentinaAmy Elsner RENEWAL
Munro FerenczRussiaIvan Magalhaes PROPOSAL
Octavia MaletArgentinaIvan Magalhaes QUALIFIED
Maria MarrierIndiaStephen Shaw UNQUALIFIED
Antonio CaudyGermanyXuxue Feng NEW
Maisha RulapaughUnited KingdomAmy Elsner UNQUALIFIED
Arvin AlbaresItalyAsiya Javayant NEW
Stacey MacleadBrazilStephen Shaw RENEWAL
Jeanfrancois VenereSpainAnna Fali QUALIFIED
Nicolas IturbideRussiaAmy Elsner RENEWAL
Misaki RoysterGermanyOnyama Limba NEW
Salvatore StockhamItalyXuxue Feng UNQUALIFIED
Mujtaba NickaRussiaXuxue Feng UNQUALIFIED
Clifford RimUnited KingdomAsiya Javayant QUALIFIED
Jones VocelkaJapanIvan Magalhaes NEW
Tony FollerIndiaXuxue Feng PROPOSAL
Stacey MacleadJapanAmy Elsner NEW
Emily WhobreyGermanyIvan Magalhaes NEGOTIATION
Octavia MaletUnited KingdomElwin Sharvill UNQUALIFIED
Murillo MaletJapanBernardo Dominic UNQUALIFIED
Aditya KuskoAustraliaOnyama Limba UNQUALIFIED
Aika InouyeArgentinaElwin Sharvill RENEWAL
Smith GlickUnited KingdomOnyama Limba NEW
Emily WhobreyArgentinaBernardo Dominic UNQUALIFIED
Costa DilliardSpainOnyama Limba RENEWAL
Aruna FigeroaCanadaElwin Sharvill NEW
Rodrigues CampainUnited KingdomElwin Sharvill QUALIFIED
Maisha RulapaughBrazilIoni Bowcher QUALIFIED
Alejandro PerinSpainStephen Shaw QUALIFIED
Claire TollnerJapanBernardo Dominic QUALIFIED
Morrow RutaUnited KingdomXuxue Feng NEGOTIATION
Leja CaldareraFranceIvan Magalhaes UNQUALIFIED
Maria MarrierSpainBernardo Dominic NEGOTIATION
Salvatore StockhamBrazilOnyama Limba NEW
Leja CaldareraBrazilXuxue Feng NEGOTIATION
Alejandro PerinRussiaIoni Bowcher NEW
Greenwood BologniaRussiaStephen Shaw NEW
Cody SaylorsArgentinaAnna Fali UNQUALIFIED

<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>