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
Julie StensethUnited KingdomIoni Bowcher RENEWAL
Morrow RutaUnited KingdomXuxue Feng NEW
Darci PoquetteGermanyAmy Elsner NEGOTIATION
Francesco ShinkoSpainElwin Sharvill UNQUALIFIED
David DarakjyRussiaStephen Shaw NEW
Aruna FigeroaJapanElwin Sharvill UNQUALIFIED
Jones VocelkaJapanAmy Elsner NEW
Salvatore StockhamCanadaXuxue Feng PROPOSAL
Darci PoquetteUnited KingdomAmy Elsner PROPOSAL
Jefferson SchemmerArgentinaAnna Fali UNQUALIFIED
Salvatore StockhamBrazilAsiya Javayant NEGOTIATION
Darci PoquetteRussiaXuxue Feng NEW
Smith GlickAustraliaStephen Shaw UNQUALIFIED
Alejandro PerinGermanyAmy Elsner RENEWAL
Deepesh ChuiCanadaAsiya Javayant NEW
David DarakjyAustraliaAnna Fali UNQUALIFIED
Johnson SergiBrazilBernardo Dominic NEGOTIATION
Aruna FigeroaAustraliaAnna Fali RENEWAL
Aditya KuskoSpainAmy Elsner NEGOTIATION
Silvio SlusarskiGermanyStephen Shaw NEGOTIATION
Kaitlin OstroskyGermanyElwin Sharvill NEW
James ButtRussiaIoni Bowcher RENEWAL
Faith GillianBrazilOnyama Limba RENEWAL
Mayumi KolmetzGermanyStephen Shaw NEW
Maria MarrierBrazilBernardo Dominic RENEWAL
Julie StensethUnited KingdomAnna Fali RENEWAL
Costa DilliardItalyAnna Fali RENEWAL
Octavia MaletArgentinaAsiya Javayant NEGOTIATION
Johnson SergiGermanyAmy Elsner UNQUALIFIED
Jennifer AmigonBrazilAnna Fali PROPOSAL
Octavia MaletBrazilBernardo Dominic RENEWAL
Aika InouyeArgentinaStephen Shaw NEGOTIATION
Salvatore StockhamUnited KingdomAsiya Javayant PROPOSAL
Jefferson SchemmerArgentinaXuxue Feng QUALIFIED
Wickens NestleRussiaIoni Bowcher QUALIFIED
Antonio CaudyFranceAnna Fali QUALIFIED
Francesco ShinkoSpainIoni Bowcher QUALIFIED
Maisha RulapaughItalyIvan Magalhaes RENEWAL
Ivar PaprockiGermanyAmy Elsner PROPOSAL
Mujtaba NickaFranceBernardo Dominic UNQUALIFIED
Maisha RulapaughUnited KingdomIvan Magalhaes PROPOSAL
Juan WieserGermanyAsiya Javayant NEGOTIATION
Jennifer AmigonJapanOnyama Limba UNQUALIFIED
Maria MarrierJapanAmy Elsner PROPOSAL
Sinclair WaycottUnited KingdomOnyama Limba NEW
Maria MarrierAustraliaXuxue Feng UNQUALIFIED
Salvatore StockhamBrazilIoni Bowcher NEGOTIATION
David DarakjyJapanAsiya Javayant UNQUALIFIED
Izzy GarufiRussiaStephen Shaw PROPOSAL
Izzy GarufiUnited KingdomIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Octavia MaletFranceElwin Sharvill PROPOSAL
Faith GillianUnited KingdomXuxue Feng PROPOSAL
Julie StensethJapanAmy Elsner PROPOSAL
James ButtAustraliaAnna Fali QUALIFIED
Tony FollerFranceOnyama Limba QUALIFIED
Salvatore StockhamCanadaAsiya Javayant UNQUALIFIED
Izzy GarufiAustraliaAnna Fali NEW
Julie StensethBrazilStephen Shaw RENEWAL
Leja CaldareraBrazilIoni Bowcher PROPOSAL
Emily WhobreyCanadaAsiya Javayant NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aruna FigeroaCanada2026-04-11Chemel, James L Cpa PROPOSAL71Onyama Limba
1001Stacey MacleadGermany2026-04-09Buckley Miller Wright NEGOTIATION48Ioni Bowcher
1002Arvin AlbaresArgentina2026-04-21Buckley Miller Wright RENEWAL20Ioni Bowcher
1003Leon OldroydRussia2026-03-27Dorl, James J Esq QUALIFIED4Bernardo Dominic
1004Antonio CaudyCanada2026-04-19Dorl, James J Esq RENEWAL12Ioni Bowcher
1005Johnson SergiBrazil2026-04-12Buckley Miller Wright RENEWAL49Xuxue Feng
1006Munro FerenczRussia2026-03-31Truhlar And Truhlar Attys NEW29Stephen Shaw
1007Octavia MaletFrance2026-04-03Chemel, James L Cpa NEGOTIATION28Ioni Bowcher
1008Cody SaylorsUnited Kingdom2026-04-02King, Christopher A Esq NEW13Xuxue Feng
1009Antonio CaudyGermany2026-03-29Chanay, Jeffrey A Esq NEW82Ioni Bowcher
1010Maria MarrierAustralia2026-04-18Printing Dimensions PROPOSAL66Anna Fali
1011Costa DilliardRussia2026-04-08Commercial Press PROPOSAL65Stephen Shaw
1012Juan WieserItaly2026-04-03King, Christopher A Esq NEW8Bernardo Dominic
1013Cody SaylorsItaly2026-04-04Commercial Press NEW47Anna Fali
1014Costa DilliardJapan2026-04-04Dorl, James J Esq NEGOTIATION48Ioni Bowcher
1015Octavia MaletRussia2026-04-08Rousseaux, Michael Esq PROPOSAL82Asiya Javayant
1016Francesco ShinkoGermany2026-04-11King, Christopher A Esq NEW10Bernardo Dominic
1017Leon OldroydUnited Kingdom2026-04-20Truhlar And Truhlar Attys NEGOTIATION36Onyama Limba
1018Munro FerenczJapan2026-04-22Commercial Press NEGOTIATION5Ioni Bowcher
1019Alejandro PerinAustralia2026-03-31Feltz Printing Service PROPOSAL44Stephen Shaw
1020Leja CaldareraIndia2026-04-11Feiner Bros PROPOSAL71Amy Elsner
1021Aika InouyeUnited Kingdom2026-04-09Chanay, Jeffrey A Esq RENEWAL78Bernardo Dominic
1022Mayumi KolmetzFrance2026-04-09Chanay, Jeffrey A Esq QUALIFIED2Elwin Sharvill
1023Leja CaldareraBrazil2026-03-27King, Christopher A Esq RENEWAL33Amy Elsner
1024Aruna FigeroaRussia2026-04-04Buckley Miller Wright PROPOSAL72Asiya Javayant
1025Murillo MaletIndia2026-04-10Benton, John B Jr UNQUALIFIED22Stephen Shaw
1026Nicolas IturbideSpain2026-03-28Rangoni Of Florence QUALIFIED79Amy Elsner
1027Maisha RulapaughUnited Kingdom2026-04-08Chanay, Jeffrey A Esq NEGOTIATION79Ioni Bowcher
1028Ricardo GauchoBrazil2026-04-09Buckley Miller Wright UNQUALIFIED91Bernardo Dominic
1029Chavez BriddickBrazil2026-04-03Dorl, James J Esq RENEWAL17Asiya Javayant
1030Mujtaba NickaJapan2026-04-16Morlong Associates PROPOSAL9Elwin Sharvill
1031Francesco ShinkoJapan2026-03-27Rangoni Of Florence RENEWAL6Amy Elsner
1032Julie StensethFrance2026-04-10Benton, John B Jr NEGOTIATION87Onyama Limba
1033Julie StensethJapan2026-04-22Rangoni Of Florence NEGOTIATION14Bernardo Dominic
1034Greenwood BologniaBrazil2026-03-29Buckley Miller Wright RENEWAL47Onyama Limba
1035Mayumi KolmetzAustralia2026-04-09Dorl, James J Esq PROPOSAL8Ioni Bowcher
1036Izzy GarufiGermany2026-04-15Dorl, James J Esq NEGOTIATION71Onyama Limba
1037Kadeem FlosiCanada2026-04-09Chanay, Jeffrey A Esq RENEWAL46Amy Elsner
1038Costa DilliardGermany2026-04-02Rangoni Of Florence RENEWAL59Onyama Limba
1039Rodrigues CampainIndia2026-04-07Commercial Press PROPOSAL25Anna Fali
1040Tony FollerFrance2026-04-25Rangoni Of Florence QUALIFIED78Stephen Shaw
1041Munro FerenczBrazil2026-04-15Truhlar And Truhlar Attys UNQUALIFIED41Ivan Magalhaes
1042Misaki RoysterRussia2026-04-19Morlong Associates UNQUALIFIED74Ivan Magalhaes
1043Julie StensethGermany2026-04-07Morlong Associates NEW99Bernardo Dominic
1044Mujtaba NickaRussia2026-04-21Rangoni Of Florence PROPOSAL76Amy Elsner
1045Octavia MaletFrance2026-03-27King, Christopher A Esq QUALIFIED39Xuxue Feng
1046Silvio SlusarskiUnited Kingdom2026-04-19Morlong Associates UNQUALIFIED24Stephen Shaw
1047Leja CaldareraArgentina2026-04-05King, Christopher A Esq UNQUALIFIED42Bernardo Dominic
1048Salvatore StockhamUnited Kingdom2026-04-07Truhlar And Truhlar Attys NEW63Elwin Sharvill
1049Sinclair WaycottItaly2026-04-08Feltz Printing Service RENEWAL8Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydAustraliaAsiya Javayant QUALIFIED
David DarakjyAustraliaIvan Magalhaes QUALIFIED
Silvio SlusarskiArgentinaXuxue Feng RENEWAL
Francesco ShinkoIndiaAmy Elsner NEW
Juan WieserJapanAnna Fali NEGOTIATION
Kaitlin OstroskyJapanIvan Magalhaes UNQUALIFIED
Jones VocelkaItalyIoni Bowcher UNQUALIFIED
Emily WhobreyItalyIvan Magalhaes PROPOSAL
Chavez BriddickGermanyIoni Bowcher PROPOSAL
Misaki RoysterArgentinaElwin Sharvill UNQUALIFIED
Emily WhobreyJapanAsiya Javayant PROPOSAL
Emily WhobreyUnited KingdomAnna Fali NEW
Clifford RimIndiaStephen Shaw UNQUALIFIED
Julie StensethJapanStephen Shaw RENEWAL
James ButtIndiaStephen Shaw NEGOTIATION
Ricardo GauchoAustraliaAnna Fali NEW
Smith GlickSpainAsiya Javayant NEW
Clifford RimBrazilIoni Bowcher PROPOSAL
Leon OldroydRussiaXuxue Feng NEW
Salvatore StockhamAustraliaAmy Elsner PROPOSAL
Costa DilliardFranceStephen Shaw NEW
Mujtaba NickaBrazilAmy Elsner PROPOSAL
Stacey MacleadSpainElwin Sharvill NEW
Johnson SergiJapanXuxue Feng UNQUALIFIED
Sinclair WaycottJapanAsiya Javayant QUALIFIED
Misaki RoysterRussiaIoni Bowcher RENEWAL
Claire TollnerArgentinaOnyama Limba PROPOSAL
Mujtaba NickaGermanyElwin Sharvill UNQUALIFIED
Smith GlickFranceOnyama Limba NEGOTIATION
Smith GlickJapanIoni Bowcher NEGOTIATION
Jeanfrancois VenereIndiaAmy Elsner NEGOTIATION
Greenwood BologniaUnited KingdomAnna Fali UNQUALIFIED
Munro FerenczSpainIoni Bowcher PROPOSAL
Rodrigues CampainGermanyAmy Elsner NEW
Ashley DoeFranceOnyama Limba UNQUALIFIED
Clifford RimCanadaAnna Fali NEGOTIATION
Morrow RutaArgentinaIoni Bowcher UNQUALIFIED
Ricardo GauchoItalyAsiya Javayant RENEWAL
Nicolas IturbideAustraliaAsiya Javayant RENEWAL
Aruna FigeroaRussiaOnyama Limba NEW
Leja CaldareraJapanXuxue Feng QUALIFIED
Aika InouyeIndiaStephen Shaw PROPOSAL
Nicolas IturbideItalyAsiya Javayant NEW
Ricardo GauchoRussiaBernardo Dominic NEW
Julie StensethItalyBernardo Dominic QUALIFIED
Deepesh ChuiUnited KingdomStephen Shaw NEW
Rodrigues CampainArgentinaBernardo Dominic QUALIFIED
Claire TollnerAustraliaXuxue Feng RENEWAL
Morrow RutaCanadaAmy Elsner PROPOSAL
Adams MorascaCanadaStephen Shaw NEW
Frozen Columns
Name
Antonio Caudy
Costa Dilliard
Octavia Malet
Leon Oldroyd
Ivar Paprocki
Emily Whobrey
Francesco Shinko
Maisha Rulapaugh
Julie Stenseth
Murillo Malet
Greenwood Bolognia
Munro Ferencz
Antonio Caudy
Octavia Malet
Greenwood Bolognia
Tony Foller
Juan Wieser
Jennifer Amigon
David Darakjy
Ricardo Gaucho
Munro Ferencz
Sinclair Waycott
Silvio Slusarski
Kadeem Flosi
Munro Ferencz
Juan Wieser
Izzy Garufi
Alejandro Perin
Tony Foller
Ashley Doe
Antonio Caudy
Julie Stenseth
Julie Stenseth
Kadeem Flosi
Smith Glick
Darci Poquette
Emily Whobrey
Arvin Albares
Maria Marrier
Johnson Sergi
Adams Morasca
Greenwood Bolognia
Deepesh Chui
Aruna Figeroa
Greenwood Bolognia
Jefferson Schemmer
Mayumi Kolmetz
Johnson Sergi
Aditya Kusko
Silvio Slusarski
IdCountryDate
1000Spain2026-04-07
1001Argentina2026-04-11
1002Italy2026-04-07
1003Germany2026-04-18
1004Spain2026-04-13
1005India2026-04-20
1006Japan2026-04-24
1007Australia2026-04-12
1008Argentina2026-04-07
1009India2026-04-19
1010Argentina2026-04-10
1011Japan2026-04-10
1012Russia2026-04-04
1013Brazil2026-04-22
1014Australia2026-03-27
1015India2026-04-18
1016Canada2026-04-03
1017Japan2026-04-05
1018Spain2026-04-19
1019France2026-04-01
1020France2026-04-15
1021India2026-04-19
1022Australia2026-04-22
1023Argentina2026-04-07
1024Argentina2026-04-07
1025Spain2026-04-12
1026United Kingdom2026-04-06
1027India2026-04-17
1028Germany2026-04-05
1029Argentina2026-04-04
1030Australia2026-03-30
1031Japan2026-04-07
1032Japan2026-04-03
1033Italy2026-03-30
1034Germany2026-04-15
1035Brazil2026-04-01
1036Brazil2026-04-03
1037Germany2026-04-14
1038Italy2026-04-06
1039Argentina2026-04-13
1040Spain2026-04-13
1041Italy2026-04-11
1042Argentina2026-04-01
1043Japan2026-04-20
1044Spain2026-04-24
1045India2026-04-18
1046Japan2026-03-29
1047Japan2026-04-19
1048Germany2026-04-23
1049Brazil2026-04-10

On-Demand Data

NameIdCountryDate
Darci Poquette1000Italy2026-04-20
Jefferson Schemmer1001France2026-03-31
Munro Ferencz1002Argentina2026-04-05
Nicolas Iturbide1003France2026-04-17
Silvio Slusarski1004Brazil2026-04-23
Adams Morasca1005Argentina2026-04-09
Munro Ferencz1006Australia2026-03-29
Julie Stenseth1007Japan2026-04-21
Murillo Malet1008India2026-04-17
Maisha Rulapaugh1009Brazil2026-04-13
Kaitlin Ostrosky1010Argentina2026-04-12
Isabel Bowley1011France2026-04-10
Mujtaba Nicka1012Spain2026-04-17
Alejandro Perin1013Brazil2026-04-25
Julie Stenseth1014Russia2026-04-13
Maria Marrier1015United Kingdom2026-04-19
Cody Saylors1016India2026-04-17
Francesco Shinko1017Spain2026-04-07
Wickens Nestle1018Brazil2026-04-12
Clifford Rim1019Spain2026-04-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Jennifer AmigonBrazilIoni Bowcher RENEWAL
Ivar PaprockiSpainIvan Magalhaes UNQUALIFIED
James ButtGermanyIoni Bowcher NEGOTIATION
Deepesh ChuiFranceBernardo Dominic NEW
Isabel BowleyUnited KingdomElwin Sharvill NEW
Tony FollerItalyAmy Elsner PROPOSAL
Juan WieserCanadaBernardo Dominic PROPOSAL
Ricardo GauchoJapanAmy Elsner NEGOTIATION
Misaki RoysterAustraliaAsiya Javayant QUALIFIED
David DarakjyJapanIoni Bowcher NEW
Ashley DoeItalyAmy Elsner QUALIFIED
Salvatore StockhamItalyOnyama Limba NEW
Cody SaylorsRussiaXuxue Feng RENEWAL
Jennifer AmigonAustraliaIvan Magalhaes PROPOSAL
Darci PoquetteSpainAmy Elsner PROPOSAL
Juan WieserIndiaBernardo Dominic NEGOTIATION
Morrow RutaCanadaStephen Shaw NEW
Salvatore StockhamUnited KingdomIvan Magalhaes RENEWAL
Costa DilliardIndiaIvan Magalhaes RENEWAL
Misaki RoysterBrazilAmy Elsner UNQUALIFIED
Juan WieserCanadaAnna Fali NEW
Mayumi KolmetzArgentinaOnyama Limba UNQUALIFIED
Clifford RimBrazilOnyama Limba NEW
Izzy GarufiGermanyIoni Bowcher RENEWAL
Aruna FigeroaCanadaBernardo Dominic PROPOSAL
Kaitlin OstroskyBrazilAsiya Javayant UNQUALIFIED
Jefferson SchemmerFranceAmy Elsner UNQUALIFIED
Kadeem FlosiCanadaIvan Magalhaes PROPOSAL
Smith GlickAustraliaIoni Bowcher NEGOTIATION
Jennifer AmigonBrazilAmy Elsner NEGOTIATION
Silvio SlusarskiArgentinaAsiya Javayant NEW
Smith GlickBrazilElwin Sharvill QUALIFIED
Tony FollerUnited KingdomBernardo Dominic RENEWAL
Nicolas IturbideFranceIvan Magalhaes RENEWAL
Antonio CaudySpainAsiya Javayant UNQUALIFIED
Kadeem FlosiJapanAmy Elsner NEGOTIATION
Aditya KuskoIndiaIvan Magalhaes RENEWAL
Emily WhobreyIndiaBernardo Dominic NEW
Greenwood BologniaJapanIoni Bowcher UNQUALIFIED
Sinclair WaycottJapanIvan Magalhaes RENEWAL

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