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
Kaitlin OstroskySpainIoni Bowcher NEW
Leja CaldareraCanadaElwin Sharvill NEGOTIATION
Cody SaylorsJapanAsiya Javayant PROPOSAL
Ashley DoeBrazilIvan Magalhaes PROPOSAL
Jennifer AmigonGermanyIoni Bowcher UNQUALIFIED
Aruna FigeroaRussiaBernardo Dominic NEGOTIATION
Aika InouyeIndiaXuxue Feng NEW
Maisha RulapaughUnited KingdomXuxue Feng UNQUALIFIED
Nicolas IturbideIndiaAmy Elsner UNQUALIFIED
David DarakjyItalyElwin Sharvill NEGOTIATION
Faith GillianSpainOnyama Limba RENEWAL
Jennifer AmigonJapanElwin Sharvill RENEWAL
Aditya KuskoBrazilAsiya Javayant NEW
Morrow RutaCanadaIoni Bowcher PROPOSAL
Aika InouyeItalyElwin Sharvill RENEWAL
Jeanfrancois VenereAustraliaBernardo Dominic UNQUALIFIED
Ashley DoeItalyStephen Shaw RENEWAL
Arvin AlbaresFranceBernardo Dominic PROPOSAL
Maisha RulapaughUnited KingdomAnna Fali RENEWAL
Morrow RutaArgentinaBernardo Dominic QUALIFIED
Kaitlin OstroskyIndiaBernardo Dominic UNQUALIFIED
Octavia MaletBrazilXuxue Feng RENEWAL
Aditya KuskoRussiaElwin Sharvill PROPOSAL
Faith GillianAustraliaOnyama Limba NEW
Silvio SlusarskiGermanyElwin Sharvill NEGOTIATION
Deepesh ChuiJapanAmy Elsner NEW
Sinclair WaycottItalyIvan Magalhaes RENEWAL
Chavez BriddickSpainIoni Bowcher NEGOTIATION
Stacey MacleadJapanIoni Bowcher NEW
James ButtJapanAsiya Javayant QUALIFIED
Antonio CaudyIndiaXuxue Feng QUALIFIED
Octavia MaletItalyAnna Fali RENEWAL
Silvio SlusarskiGermanyElwin Sharvill NEW
Ashley DoeCanadaBernardo Dominic NEGOTIATION
Juan WieserUnited KingdomStephen Shaw QUALIFIED
Faith GillianFranceIvan Magalhaes NEW
Kaitlin OstroskyAustraliaOnyama Limba PROPOSAL
James ButtIndiaOnyama Limba UNQUALIFIED
Tony FollerCanadaAnna Fali UNQUALIFIED
James ButtItalyIoni Bowcher NEW
Tony FollerFranceElwin Sharvill NEW
Aruna FigeroaCanadaIoni Bowcher NEGOTIATION
Mujtaba NickaFranceStephen Shaw UNQUALIFIED
Deepesh ChuiAustraliaAnna Fali UNQUALIFIED
Ivar PaprockiUnited KingdomXuxue Feng NEGOTIATION
Tony FollerCanadaAnna Fali NEGOTIATION
Jeanfrancois VenereRussiaElwin Sharvill RENEWAL
Morrow RutaUnited KingdomIvan Magalhaes PROPOSAL
Kaitlin OstroskyJapanIvan Magalhaes QUALIFIED
Juan WieserFranceBernardo Dominic PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyGermanyXuxue Feng PROPOSAL
Aditya KuskoGermanyStephen Shaw NEW
Deepesh ChuiIndiaAsiya Javayant NEW
Munro FerenczGermanyIvan Magalhaes NEW
Tony FollerAustraliaOnyama Limba UNQUALIFIED
Deepesh ChuiUnited KingdomIoni Bowcher RENEWAL
Jennifer AmigonItalyAsiya Javayant RENEWAL
Clifford RimItalyStephen Shaw QUALIFIED
Jennifer AmigonCanadaXuxue Feng UNQUALIFIED
Mujtaba NickaIndiaStephen Shaw RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamArgentina2026-05-30Printing Dimensions RENEWAL59Xuxue Feng
1001Octavia MaletUnited Kingdom2026-06-01Printing Dimensions PROPOSAL97Ivan Magalhaes
1002Sinclair WaycottGermany2026-05-30King, Christopher A Esq RENEWAL79Anna Fali
1003Morrow RutaIndia2026-05-14Printing Dimensions RENEWAL22Xuxue Feng
1004Arvin AlbaresIndia2026-06-01Feiner Bros RENEWAL52Asiya Javayant
1005Sinclair WaycottSpain2026-05-21Feltz Printing Service NEW36Elwin Sharvill
1006Aditya KuskoFrance2026-05-31Feiner Bros PROPOSAL94Asiya Javayant
1007Munro FerenczItaly2026-05-28Truhlar And Truhlar Attys RENEWAL99Elwin Sharvill
1008Ricardo GauchoGermany2026-05-18King, Christopher A Esq NEW40Xuxue Feng
1009Sinclair WaycottJapan2026-05-17Chanay, Jeffrey A Esq NEW21Xuxue Feng
1010Mayumi KolmetzUnited Kingdom2026-05-19Morlong Associates NEW16Elwin Sharvill
1011Costa DilliardGermany2026-05-15Dorl, James J Esq NEW98Bernardo Dominic
1012Ricardo GauchoAustralia2026-05-30Rousseaux, Michael Esq UNQUALIFIED26Bernardo Dominic
1013Salvatore StockhamJapan2026-05-14Dorl, James J Esq UNQUALIFIED71Amy Elsner
1014Chavez BriddickFrance2026-05-27Rousseaux, Michael Esq UNQUALIFIED39Xuxue Feng
1015Munro FerenczBrazil2026-05-30Buckley Miller Wright NEW94Ioni Bowcher
1016Cody SaylorsArgentina2026-05-28Feiner Bros RENEWAL64Xuxue Feng
1017Costa DilliardGermany2026-05-29Chapman, Ross E Esq QUALIFIED27Ioni Bowcher
1018Leon OldroydSpain2026-05-23Morlong Associates RENEWAL45Xuxue Feng
1019Sinclair WaycottJapan2026-06-01Printing Dimensions RENEWAL70Anna Fali
1020Costa DilliardJapan2026-05-20Buckley Miller Wright UNQUALIFIED84Anna Fali
1021Mayumi KolmetzJapan2026-05-12Chapman, Ross E Esq RENEWAL77Amy Elsner
1022Misaki RoysterItaly2026-06-08Commercial Press NEW35Bernardo Dominic
1023Smith GlickBrazil2026-05-23Feltz Printing Service QUALIFIED1Onyama Limba
1024Jeanfrancois VenereAustralia2026-05-29Rangoni Of Florence UNQUALIFIED31Anna Fali
1025Jennifer AmigonCanada2026-06-07Buckley Miller Wright QUALIFIED10Bernardo Dominic
1026Aika InouyeCanada2026-05-16Commercial Press QUALIFIED85Ivan Magalhaes
1027Antonio CaudyIndia2026-06-04Chanay, Jeffrey A Esq RENEWAL56Amy Elsner
1028Leja CaldareraFrance2026-06-08Chapman, Ross E Esq NEGOTIATION25Onyama Limba
1029Wickens NestleItaly2026-05-28Chemel, James L Cpa RENEWAL3Onyama Limba
1030Antonio CaudyArgentina2026-05-15Chemel, James L Cpa PROPOSAL40Xuxue Feng
1031Ivar PaprockiAustralia2026-05-26Rangoni Of Florence NEGOTIATION65Elwin Sharvill
1032Adams MorascaGermany2026-05-23Rousseaux, Michael Esq NEGOTIATION28Stephen Shaw
1033Silvio SlusarskiArgentina2026-05-23Chemel, James L Cpa PROPOSAL99Bernardo Dominic
1034Adams MorascaBrazil2026-05-17Commercial Press NEW31Elwin Sharvill
1035Francesco ShinkoRussia2026-05-26Dorl, James J Esq NEW13Xuxue Feng
1036Johnson SergiArgentina2026-05-20Rangoni Of Florence UNQUALIFIED96Elwin Sharvill
1037Munro FerenczItaly2026-05-20Buckley Miller Wright NEGOTIATION39Ioni Bowcher
1038Izzy GarufiAustralia2026-05-31Feiner Bros NEGOTIATION59Amy Elsner
1039Arvin AlbaresFrance2026-05-13Chapman, Ross E Esq UNQUALIFIED27Bernardo Dominic
1040Salvatore StockhamJapan2026-06-02Rousseaux, Michael Esq NEW13Ivan Magalhaes
1041Clifford RimAustralia2026-05-23Dorl, James J Esq QUALIFIED43Onyama Limba
1042Octavia MaletUnited Kingdom2026-06-02Dorl, James J Esq NEGOTIATION34Elwin Sharvill
1043James ButtRussia2026-05-18Chemel, James L Cpa NEGOTIATION98Anna Fali
1044Antonio CaudyJapan2026-06-04Chanay, Jeffrey A Esq NEGOTIATION62Ioni Bowcher
1045Faith GillianBrazil2026-05-20Printing Dimensions RENEWAL59Onyama Limba
1046Greenwood BologniaSpain2026-05-31King, Christopher A Esq RENEWAL34Xuxue Feng
1047Leja CaldareraCanada2026-05-11Chapman, Ross E Esq NEGOTIATION24Anna Fali
1048Julie StensethGermany2026-05-23Benton, John B Jr PROPOSAL35Ioni Bowcher
1049Maria MarrierCanada2026-05-29Dorl, James J Esq RENEWAL22Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiCanadaIvan Magalhaes NEW
Chavez BriddickArgentinaIvan Magalhaes NEW
Alejandro PerinJapanIvan Magalhaes RENEWAL
David DarakjyJapanXuxue Feng QUALIFIED
Johnson SergiCanadaIvan Magalhaes NEW
Leja CaldareraAustraliaAsiya Javayant UNQUALIFIED
Faith GillianItalyAsiya Javayant UNQUALIFIED
Kadeem FlosiCanadaOnyama Limba RENEWAL
Nicolas IturbideCanadaIvan Magalhaes NEW
Clifford RimArgentinaBernardo Dominic RENEWAL
Chavez BriddickIndiaIoni Bowcher NEGOTIATION
Mayumi KolmetzAustraliaAsiya Javayant NEGOTIATION
Arvin AlbaresUnited KingdomAnna Fali RENEWAL
Wickens NestleGermanyElwin Sharvill UNQUALIFIED
Silvio SlusarskiArgentinaAsiya Javayant NEW
Morrow RutaUnited KingdomIvan Magalhaes UNQUALIFIED
Salvatore StockhamIndiaStephen Shaw RENEWAL
Rodrigues CampainArgentinaElwin Sharvill RENEWAL
Faith GillianIndiaAmy Elsner NEGOTIATION
Adams MorascaRussiaAnna Fali RENEWAL
Julie StensethFranceAnna Fali PROPOSAL
Cody SaylorsGermanyAmy Elsner NEGOTIATION
Kaitlin OstroskyUnited KingdomStephen Shaw RENEWAL
Antonio CaudyJapanElwin Sharvill QUALIFIED
Adams MorascaJapanBernardo Dominic PROPOSAL
Mayumi KolmetzIndiaAnna Fali PROPOSAL
Misaki RoysterJapanXuxue Feng UNQUALIFIED
Stacey MacleadBrazilBernardo Dominic NEW
Sinclair WaycottRussiaAnna Fali RENEWAL
Johnson SergiIndiaIoni Bowcher NEW
Nicolas IturbideArgentinaBernardo Dominic NEGOTIATION
Adams MorascaAustraliaIvan Magalhaes RENEWAL
Greenwood BologniaBrazilStephen Shaw PROPOSAL
Arvin AlbaresRussiaAsiya Javayant QUALIFIED
Greenwood BologniaIndiaIvan Magalhaes RENEWAL
Isabel BowleyIndiaAnna Fali UNQUALIFIED
Wickens NestleRussiaOnyama Limba NEGOTIATION
Alejandro PerinAustraliaIoni Bowcher UNQUALIFIED
Juan WieserArgentinaAsiya Javayant UNQUALIFIED
Faith GillianAustraliaStephen Shaw PROPOSAL
Maisha RulapaughBrazilOnyama Limba NEGOTIATION
Cody SaylorsGermanyAmy Elsner UNQUALIFIED
Rodrigues CampainGermanyIoni Bowcher NEGOTIATION
Smith GlickUnited KingdomAnna Fali RENEWAL
Cody SaylorsArgentinaAsiya Javayant PROPOSAL
Jeanfrancois VenereSpainAmy Elsner QUALIFIED
Julie StensethRussiaAnna Fali UNQUALIFIED
Greenwood BologniaCanadaBernardo Dominic NEGOTIATION
Arvin AlbaresItalyElwin Sharvill NEW
Stacey MacleadArgentinaAnna Fali PROPOSAL
Frozen Columns
Name
Ivar Paprocki
Johnson Sergi
Rodrigues Campain
Jones Vocelka
Smith Glick
Stacey Maclead
Julie Stenseth
Silvio Slusarski
Faith Gillian
Claire Tollner
Leon Oldroyd
Maisha Rulapaugh
Izzy Garufi
Francesco Shinko
Maisha Rulapaugh
Aditya Kusko
Leja Caldarera
Tony Foller
Maisha Rulapaugh
Mayumi Kolmetz
Chavez Briddick
Leon Oldroyd
Nicolas Iturbide
Octavia Malet
James Butt
Tony Foller
Chavez Briddick
Sinclair Waycott
Claire Tollner
Nicolas Iturbide
Smith Glick
Jeanfrancois Venere
Alejandro Perin
Jones Vocelka
Greenwood Bolognia
Misaki Royster
Clifford Rim
Murillo Malet
Ricardo Gaucho
Greenwood Bolognia
Wickens Nestle
Adams Morasca
Julie Stenseth
Aruna Figeroa
David Darakjy
Tony Foller
James Butt
Faith Gillian
Darci Poquette
Leon Oldroyd
IdCountryDate
1000Brazil2026-05-20
1001Germany2026-05-18
1002Canada2026-05-12
1003Canada2026-05-23
1004Brazil2026-06-01
1005Canada2026-05-22
1006Germany2026-05-10
1007Japan2026-05-13
1008United Kingdom2026-05-25
1009India2026-05-15
1010Russia2026-05-25
1011Spain2026-05-30
1012Russia2026-05-24
1013Argentina2026-05-13
1014Brazil2026-05-28
1015Russia2026-05-20
1016Brazil2026-05-21
1017Russia2026-05-28
1018Italy2026-05-16
1019Russia2026-05-17
1020France2026-06-03
1021Russia2026-05-11
1022Canada2026-05-18
1023France2026-05-22
1024United Kingdom2026-06-07
1025Russia2026-05-17
1026France2026-06-07
1027Italy2026-05-14
1028Germany2026-05-22
1029India2026-06-07
1030Argentina2026-05-27
1031Italy2026-06-01
1032United Kingdom2026-05-28
1033Russia2026-06-02
1034United Kingdom2026-05-17
1035Australia2026-05-25
1036France2026-05-11
1037Italy2026-05-29
1038France2026-05-13
1039France2026-06-02
1040Russia2026-05-25
1041Russia2026-05-28
1042Brazil2026-05-29
1043Australia2026-05-22
1044United Kingdom2026-05-18
1045Germany2026-05-29
1046Russia2026-06-01
1047Argentina2026-05-11
1048France2026-05-30
1049Italy2026-05-14

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000India2026-05-29
Juan Wieser1001Australia2026-06-01
Wickens Nestle1002Germany2026-06-02
Ashley Doe1003Germany2026-05-25
Jeanfrancois Venere1004Japan2026-06-02
Jefferson Schemmer1005France2026-05-13
Leon Oldroyd1006United Kingdom2026-05-15
Ashley Doe1007Argentina2026-06-02
Francesco Shinko1008Canada2026-05-19
Chavez Briddick1009United Kingdom2026-06-05
Francesco Shinko1010Japan2026-05-11
Aika Inouye1011France2026-05-24
Jefferson Schemmer1012Brazil2026-05-20
Octavia Malet1013Argentina2026-05-23
Octavia Malet1014Germany2026-05-28
Ivar Paprocki1015Spain2026-05-29
Maisha Rulapaugh1016Japan2026-05-20
Maria Marrier1017France2026-06-03
Cody Saylors1018India2026-06-03
Ashley Doe1019India2026-06-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Salvatore StockhamIndiaOnyama Limba NEGOTIATION
Mayumi KolmetzGermanyAmy Elsner QUALIFIED
Alejandro PerinCanadaIoni Bowcher PROPOSAL
Morrow RutaArgentinaBernardo Dominic NEW
Wickens NestleGermanyXuxue Feng UNQUALIFIED
Cody SaylorsSpainIvan Magalhaes UNQUALIFIED
Jennifer AmigonArgentinaAnna Fali QUALIFIED
Isabel BowleyItalyOnyama Limba NEGOTIATION
Tony FollerUnited KingdomAmy Elsner PROPOSAL
Munro FerenczJapanXuxue Feng NEGOTIATION
Leon OldroydIndiaIoni Bowcher UNQUALIFIED
Aditya KuskoBrazilAnna Fali QUALIFIED
David DarakjyBrazilStephen Shaw PROPOSAL
Francesco ShinkoUnited KingdomIvan Magalhaes UNQUALIFIED
Adams MorascaAustraliaIoni Bowcher NEW
David DarakjyJapanAsiya Javayant PROPOSAL
Stacey MacleadRussiaStephen Shaw PROPOSAL
Ricardo GauchoRussiaIoni Bowcher UNQUALIFIED
Aruna FigeroaJapanAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomAmy Elsner QUALIFIED
Smith GlickGermanyIoni Bowcher PROPOSAL
Isabel BowleyBrazilIoni Bowcher RENEWAL
Tony FollerJapanBernardo Dominic PROPOSAL
Aditya KuskoIndiaElwin Sharvill RENEWAL
Morrow RutaJapanIoni Bowcher NEW
Antonio CaudyItalyAnna Fali PROPOSAL
Octavia MaletSpainAnna Fali NEW
Salvatore StockhamJapanIoni Bowcher RENEWAL
David DarakjyGermanyElwin Sharvill UNQUALIFIED
Greenwood BologniaRussiaAmy Elsner NEW
Leon OldroydJapanStephen Shaw UNQUALIFIED
Mayumi KolmetzJapanAmy Elsner UNQUALIFIED
Salvatore StockhamSpainIoni Bowcher NEW
Misaki RoysterArgentinaAsiya Javayant QUALIFIED
Munro FerenczUnited KingdomXuxue Feng UNQUALIFIED
Maisha RulapaughIndiaIoni Bowcher NEW
Julie StensethGermanyIvan Magalhaes NEW
Octavia MaletCanadaStephen Shaw PROPOSAL
Ricardo GauchoCanadaIoni Bowcher RENEWAL
Faith GillianIndiaAsiya Javayant 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>