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
Adams MorascaGermanyIoni Bowcher UNQUALIFIED
Jennifer AmigonArgentinaBernardo Dominic PROPOSAL
Mujtaba NickaSpainAnna Fali PROPOSAL
Salvatore StockhamJapanOnyama Limba QUALIFIED
Francesco ShinkoUnited KingdomIvan Magalhaes QUALIFIED
Claire TollnerIndiaElwin Sharvill PROPOSAL
Aika InouyeJapanBernardo Dominic PROPOSAL
Leon OldroydIndiaAmy Elsner NEGOTIATION
Silvio SlusarskiGermanyElwin Sharvill PROPOSAL
Aruna FigeroaCanadaOnyama Limba QUALIFIED
Jeanfrancois VenereIndiaIvan Magalhaes UNQUALIFIED
Ashley DoeFranceIvan Magalhaes UNQUALIFIED
Ashley DoeArgentinaAmy Elsner NEGOTIATION
Salvatore StockhamAustraliaAmy Elsner NEGOTIATION
Leon OldroydIndiaStephen Shaw RENEWAL
Nicolas IturbideFranceXuxue Feng QUALIFIED
Nicolas IturbideUnited KingdomAsiya Javayant NEGOTIATION
Mujtaba NickaCanadaAmy Elsner NEW
Rodrigues CampainFranceAnna Fali PROPOSAL
Jennifer AmigonIndiaXuxue Feng NEW
David DarakjySpainIvan Magalhaes UNQUALIFIED
David DarakjyGermanyIvan Magalhaes QUALIFIED
Salvatore StockhamFranceAmy Elsner NEGOTIATION
Mayumi KolmetzFranceAnna Fali RENEWAL
Ricardo GauchoRussiaAnna Fali QUALIFIED
Maisha RulapaughBrazilIoni Bowcher PROPOSAL
Johnson SergiIndiaAsiya Javayant RENEWAL
Chavez BriddickUnited KingdomAmy Elsner RENEWAL
Julie StensethGermanyXuxue Feng PROPOSAL
Julie StensethUnited KingdomAmy Elsner NEGOTIATION
Smith GlickJapanAmy Elsner UNQUALIFIED
Cody SaylorsItalyXuxue Feng QUALIFIED
Kaitlin OstroskyUnited KingdomIvan Magalhaes NEGOTIATION
Johnson SergiUnited KingdomAmy Elsner NEW
Misaki RoysterIndiaStephen Shaw RENEWAL
Silvio SlusarskiItalyXuxue Feng UNQUALIFIED
Izzy GarufiBrazilAsiya Javayant QUALIFIED
Jones VocelkaSpainAsiya Javayant QUALIFIED
Ricardo GauchoGermanyStephen Shaw RENEWAL
Munro FerenczBrazilIoni Bowcher NEGOTIATION
Rodrigues CampainGermanyOnyama Limba NEW
Juan WieserCanadaAnna Fali NEGOTIATION
Francesco ShinkoRussiaIoni Bowcher QUALIFIED
Salvatore StockhamGermanyIvan Magalhaes QUALIFIED
James ButtJapanIoni Bowcher UNQUALIFIED
Johnson SergiCanadaOnyama Limba QUALIFIED
David DarakjyCanadaXuxue Feng UNQUALIFIED
Arvin AlbaresJapanAmy Elsner QUALIFIED
Adams MorascaIndiaAmy Elsner PROPOSAL
Ricardo GauchoSpainXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaAustraliaAmy Elsner RENEWAL
Cody SaylorsItalyOnyama Limba QUALIFIED
Claire TollnerIndiaAmy Elsner UNQUALIFIED
Chavez BriddickSpainAsiya Javayant NEW
Greenwood BologniaCanadaXuxue Feng NEGOTIATION
Stacey MacleadGermanyAnna Fali UNQUALIFIED
Aruna FigeroaUnited KingdomAmy Elsner PROPOSAL
Adams MorascaGermanyElwin Sharvill NEW
Greenwood BologniaUnited KingdomIvan Magalhaes QUALIFIED
Ricardo GauchoUnited KingdomBernardo Dominic QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Rodrigues CampainBrazil2025-08-04Truhlar And Truhlar Attys NEGOTIATION99Amy Elsner
1001Stacey MacleadArgentina2025-07-15Truhlar And Truhlar Attys NEGOTIATION40Anna Fali
1002Silvio SlusarskiRussia2025-07-18Buckley Miller Wright UNQUALIFIED16Elwin Sharvill
1003Nicolas IturbideRussia2025-07-16Rangoni Of Florence NEW95Xuxue Feng
1004Munro FerenczFrance2025-08-04Commercial Press RENEWAL32Onyama Limba
1005David DarakjyJapan2025-07-29Buckley Miller Wright RENEWAL51Ivan Magalhaes
1006Nicolas IturbideBrazil2025-07-25Chemel, James L Cpa QUALIFIED38Onyama Limba
1007Francesco ShinkoGermany2025-07-31Rangoni Of Florence RENEWAL36Ivan Magalhaes
1008Antonio CaudyArgentina2025-08-04Rousseaux, Michael Esq NEGOTIATION21Onyama Limba
1009Ashley DoeIndia2025-07-21Benton, John B Jr NEW45Onyama Limba
1010David DarakjyFrance2025-07-20Chanay, Jeffrey A Esq QUALIFIED27Stephen Shaw
1011Leon OldroydItaly2025-07-22Chemel, James L Cpa UNQUALIFIED95Bernardo Dominic
1012Faith GillianCanada2025-07-24Morlong Associates NEGOTIATION17Elwin Sharvill
1013Salvatore StockhamSpain2025-07-13Chanay, Jeffrey A Esq RENEWAL76Ioni Bowcher
1014Clifford RimItaly2025-07-29Benton, John B Jr NEGOTIATION59Stephen Shaw
1015Faith GillianArgentina2025-07-19Buckley Miller Wright UNQUALIFIED76Asiya Javayant
1016Maisha RulapaughFrance2025-08-07Commercial Press PROPOSAL98Ivan Magalhaes
1017Arvin AlbaresCanada2025-07-09Rangoni Of Florence RENEWAL66Bernardo Dominic
1018Ashley DoeItaly2025-08-06Benton, John B Jr NEGOTIATION61Xuxue Feng
1019Deepesh ChuiGermany2025-07-31Chemel, James L Cpa RENEWAL7Onyama Limba
1020Wickens NestleGermany2025-07-11Benton, John B Jr NEW40Asiya Javayant
1021Jefferson SchemmerJapan2025-07-28Truhlar And Truhlar Attys QUALIFIED72Asiya Javayant
1022Jeanfrancois VenereAustralia2025-07-09Commercial Press RENEWAL98Asiya Javayant
1023Aruna FigeroaSpain2025-07-16Chemel, James L Cpa UNQUALIFIED11Ivan Magalhaes
1024Arvin AlbaresAustralia2025-07-22Commercial Press RENEWAL18Elwin Sharvill
1025Jeanfrancois VenereSpain2025-07-29Feiner Bros NEW2Anna Fali
1026Wickens NestleBrazil2025-07-10Chemel, James L Cpa UNQUALIFIED38Bernardo Dominic
1027Juan WieserBrazil2025-07-11Rousseaux, Michael Esq NEW60Onyama Limba
1028Maria MarrierGermany2025-07-22Feltz Printing Service QUALIFIED61Anna Fali
1029Munro FerenczCanada2025-07-20Rousseaux, Michael Esq NEW44Onyama Limba
1030Mayumi KolmetzArgentina2025-07-13Buckley Miller Wright RENEWAL6Anna Fali
1031Mayumi KolmetzJapan2025-07-09King, Christopher A Esq QUALIFIED8Elwin Sharvill
1032Chavez BriddickIndia2025-07-26Truhlar And Truhlar Attys NEGOTIATION97Elwin Sharvill
1033Cody SaylorsFrance2025-08-02Morlong Associates NEW53Ioni Bowcher
1034Costa DilliardUnited Kingdom2025-07-11Buckley Miller Wright RENEWAL92Amy Elsner
1035Julie StensethBrazil2025-07-12Feiner Bros NEW62Elwin Sharvill
1036David DarakjyCanada2025-08-06Rousseaux, Michael Esq RENEWAL19Onyama Limba
1037Mayumi KolmetzGermany2025-08-02Truhlar And Truhlar Attys RENEWAL5Stephen Shaw
1038Kadeem FlosiFrance2025-07-15Rousseaux, Michael Esq RENEWAL0Amy Elsner
1039Morrow RutaSpain2025-07-11Benton, John B Jr QUALIFIED50Ioni Bowcher
1040Greenwood BologniaArgentina2025-07-24Rousseaux, Michael Esq NEW17Elwin Sharvill
1041Sinclair WaycottRussia2025-07-26Truhlar And Truhlar Attys QUALIFIED82Ioni Bowcher
1042Faith GillianGermany2025-07-21Commercial Press PROPOSAL37Anna Fali
1043Juan WieserIndia2025-07-20King, Christopher A Esq PROPOSAL79Ioni Bowcher
1044Johnson SergiIndia2025-08-06Feltz Printing Service PROPOSAL94Ioni Bowcher
1045Octavia MaletSpain2025-07-24Chapman, Ross E Esq PROPOSAL1Amy Elsner
1046Ricardo GauchoSpain2025-07-09Buckley Miller Wright UNQUALIFIED77Bernardo Dominic
1047Clifford RimRussia2025-07-22Dorl, James J Esq NEW58Xuxue Feng
1048Greenwood BologniaRussia2025-08-01Rousseaux, Michael Esq RENEWAL2Amy Elsner
1049Cody SaylorsCanada2025-07-13Rousseaux, Michael Esq NEGOTIATION42Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiFranceOnyama Limba RENEWAL
Leja CaldareraAustraliaIoni Bowcher NEW
Johnson SergiGermanyIoni Bowcher NEW
Stacey MacleadGermanyXuxue Feng QUALIFIED
Leja CaldareraSpainAsiya Javayant UNQUALIFIED
Misaki RoysterArgentinaOnyama Limba PROPOSAL
Isabel BowleyAustraliaAsiya Javayant NEW
Kadeem FlosiAustraliaAnna Fali RENEWAL
Claire TollnerRussiaBernardo Dominic QUALIFIED
Maria MarrierIndiaAsiya Javayant NEGOTIATION
Sinclair WaycottCanadaElwin Sharvill RENEWAL
Mujtaba NickaGermanyIvan Magalhaes NEGOTIATION
Ashley DoeGermanyBernardo Dominic UNQUALIFIED
Ricardo GauchoItalyStephen Shaw NEW
Leon OldroydItalyIvan Magalhaes RENEWAL
Ricardo GauchoArgentinaOnyama Limba QUALIFIED
Ricardo GauchoIndiaAnna Fali QUALIFIED
Julie StensethSpainAnna Fali UNQUALIFIED
Mujtaba NickaAustraliaIoni Bowcher NEW
Murillo MaletJapanIoni Bowcher QUALIFIED
Murillo MaletUnited KingdomIvan Magalhaes NEGOTIATION
Leja CaldareraJapanOnyama Limba RENEWAL
Isabel BowleyIndiaStephen Shaw NEW
Aruna FigeroaUnited KingdomIvan Magalhaes PROPOSAL
Chavez BriddickSpainIvan Magalhaes QUALIFIED
Alejandro PerinGermanyElwin Sharvill RENEWAL
Jones VocelkaBrazilIvan Magalhaes NEGOTIATION
Leon OldroydArgentinaAmy Elsner PROPOSAL
Aditya KuskoArgentinaAmy Elsner UNQUALIFIED
Claire TollnerCanadaAnna Fali NEW
Munro FerenczAustraliaStephen Shaw NEW
David DarakjyAustraliaIvan Magalhaes NEGOTIATION
Nicolas IturbideRussiaAsiya Javayant NEW
Tony FollerArgentinaAnna Fali PROPOSAL
Tony FollerItalyAsiya Javayant UNQUALIFIED
Nicolas IturbideFranceStephen Shaw PROPOSAL
Faith GillianItalyXuxue Feng PROPOSAL
Francesco ShinkoIndiaIoni Bowcher NEW
Greenwood BologniaBrazilElwin Sharvill NEW
Ivar PaprockiBrazilAmy Elsner QUALIFIED
Juan WieserFranceStephen Shaw QUALIFIED
Claire TollnerFranceAsiya Javayant QUALIFIED
Salvatore StockhamFranceIoni Bowcher QUALIFIED
Leon OldroydJapanXuxue Feng PROPOSAL
Juan WieserJapanAnna Fali PROPOSAL
Claire TollnerRussiaAnna Fali UNQUALIFIED
Salvatore StockhamGermanyAmy Elsner RENEWAL
Mayumi KolmetzFranceBernardo Dominic PROPOSAL
Johnson SergiFranceBernardo Dominic RENEWAL
Cody SaylorsGermanyIoni Bowcher NEW
Frozen Columns
Name
Murillo Malet
Arvin Albares
Jefferson Schemmer
Leon Oldroyd
Salvatore Stockham
Mayumi Kolmetz
Greenwood Bolognia
Maria Marrier
James Butt
Octavia Malet
Wickens Nestle
Clifford Rim
Ashley Doe
Jeanfrancois Venere
Maisha Rulapaugh
Chavez Briddick
Morrow Ruta
Mayumi Kolmetz
Jones Vocelka
Rodrigues Campain
Salvatore Stockham
Ashley Doe
Wickens Nestle
Maria Marrier
Jefferson Schemmer
Claire Tollner
Antonio Caudy
Mujtaba Nicka
Ivar Paprocki
Leja Caldarera
Jefferson Schemmer
Wickens Nestle
Claire Tollner
Jones Vocelka
Stacey Maclead
Rodrigues Campain
Smith Glick
Darci Poquette
Leja Caldarera
Chavez Briddick
Octavia Malet
Alejandro Perin
Leja Caldarera
Aditya Kusko
Ashley Doe
Stacey Maclead
Kaitlin Ostrosky
Claire Tollner
Aruna Figeroa
Chavez Briddick
IdCountryDate
1000Canada2025-07-30
1001Argentina2025-07-14
1002Japan2025-07-27
1003Brazil2025-08-07
1004Germany2025-08-06
1005Brazil2025-08-04
1006Canada2025-08-04
1007Spain2025-07-26
1008Germany2025-07-11
1009Brazil2025-07-11
1010Germany2025-07-17
1011Brazil2025-07-28
1012Germany2025-07-19
1013Russia2025-07-31
1014Germany2025-07-27
1015India2025-07-26
1016United Kingdom2025-07-24
1017Brazil2025-07-24
1018Spain2025-07-23
1019United Kingdom2025-08-05
1020United Kingdom2025-07-17
1021Germany2025-07-11
1022Russia2025-08-04
1023Italy2025-07-27
1024Brazil2025-07-21
1025India2025-07-19
1026Canada2025-07-23
1027Germany2025-08-05
1028Russia2025-07-23
1029Argentina2025-08-07
1030Russia2025-07-30
1031Japan2025-07-22
1032Spain2025-07-26
1033Italy2025-07-16
1034Germany2025-07-27
1035France2025-07-29
1036Japan2025-07-25
1037Spain2025-07-20
1038France2025-07-14
1039India2025-08-04
1040Japan2025-08-06
1041Russia2025-07-17
1042Italy2025-07-28
1043France2025-08-06
1044Brazil2025-07-28
1045France2025-08-05
1046Spain2025-08-02
1047United Kingdom2025-07-31
1048Canada2025-07-21
1049Italy2025-07-11

On-Demand Data

NameIdCountryDate
Julie Stenseth1000Argentina2025-07-10
Antonio Caudy1001Russia2025-08-03
Aika Inouye1002Argentina2025-07-10
Darci Poquette1003Australia2025-07-31
Mayumi Kolmetz1004Japan2025-07-12
Aruna Figeroa1005France2025-07-21
Maisha Rulapaugh1006United Kingdom2025-07-27
Wickens Nestle1007Canada2025-08-03
Misaki Royster1008Spain2025-08-03
Isabel Bowley1009France2025-07-23
Kadeem Flosi1010Russia2025-07-24
Faith Gillian1011Italy2025-07-11
Ashley Doe1012Spain2025-07-28
Alejandro Perin1013Argentina2025-08-05
Jones Vocelka1014Germany2025-08-02
Salvatore Stockham1015Argentina2025-08-01
Munro Ferencz1016Canada2025-07-10
Faith Gillian1017Russia2025-07-16
Wickens Nestle1018Italy2025-07-20
David Darakjy1019United Kingdom2025-07-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerArgentinaIoni Bowcher RENEWAL
Mujtaba NickaRussiaAmy Elsner NEGOTIATION
Jefferson SchemmerSpainAsiya Javayant RENEWAL
Clifford RimItalyOnyama Limba PROPOSAL
Kaitlin OstroskyAustraliaBernardo Dominic NEGOTIATION
Kaitlin OstroskyArgentinaStephen Shaw RENEWAL
Leja CaldareraArgentinaOnyama Limba UNQUALIFIED
Francesco ShinkoBrazilOnyama Limba RENEWAL
Greenwood BologniaSpainAnna Fali UNQUALIFIED
Wickens NestleArgentinaStephen Shaw PROPOSAL
Costa DilliardItalyXuxue Feng RENEWAL
Cody SaylorsAustraliaElwin Sharvill QUALIFIED
Costa DilliardCanadaAnna Fali RENEWAL
Jennifer AmigonBrazilStephen Shaw RENEWAL
Costa DilliardSpainElwin Sharvill RENEWAL
Sinclair WaycottFranceAnna Fali PROPOSAL
Ivar PaprockiRussiaAsiya Javayant NEW
Maria MarrierRussiaBernardo Dominic PROPOSAL
Adams MorascaRussiaOnyama Limba NEW
Johnson SergiIndiaAnna Fali RENEWAL
Adams MorascaIndiaAnna Fali NEW
Wickens NestleSpainAmy Elsner PROPOSAL
Morrow RutaBrazilAmy Elsner PROPOSAL
Ricardo GauchoJapanXuxue Feng QUALIFIED
Alejandro PerinRussiaAnna Fali RENEWAL
Mayumi KolmetzGermanyXuxue Feng NEW
David DarakjyItalyElwin Sharvill PROPOSAL
Mujtaba NickaItalyAsiya Javayant NEGOTIATION
Jennifer AmigonAustraliaXuxue Feng RENEWAL
Claire TollnerUnited KingdomStephen Shaw NEW
Ivar PaprockiFranceAnna Fali UNQUALIFIED
Aruna FigeroaUnited KingdomIvan Magalhaes PROPOSAL
Salvatore StockhamArgentinaXuxue Feng PROPOSAL
Jeanfrancois VenereFranceAnna Fali RENEWAL
Alejandro PerinArgentinaBernardo Dominic NEW
Arvin AlbaresGermanyIoni Bowcher NEGOTIATION
David DarakjyFranceAnna Fali NEGOTIATION
Jennifer AmigonSpainAsiya Javayant UNQUALIFIED
Tony FollerBrazilIoni Bowcher NEGOTIATION
Munro FerenczGermanyElwin Sharvill 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>