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
Juan WieserItalyAsiya Javayant UNQUALIFIED
Maisha RulapaughArgentinaOnyama Limba RENEWAL
Rodrigues CampainFranceAmy Elsner PROPOSAL
Emily WhobreyBrazilElwin Sharvill NEGOTIATION
Jennifer AmigonArgentinaAsiya Javayant NEW
Rodrigues CampainArgentinaAsiya Javayant UNQUALIFIED
Chavez BriddickIndiaXuxue Feng PROPOSAL
Leja CaldareraSpainOnyama Limba QUALIFIED
Maisha RulapaughIndiaStephen Shaw RENEWAL
Murillo MaletIndiaOnyama Limba UNQUALIFIED
Mujtaba NickaSpainOnyama Limba UNQUALIFIED
Stacey MacleadAustraliaIvan Magalhaes NEGOTIATION
Darci PoquetteAustraliaXuxue Feng QUALIFIED
Kadeem FlosiFranceAsiya Javayant PROPOSAL
Rodrigues CampainBrazilIoni Bowcher UNQUALIFIED
Jones VocelkaSpainOnyama Limba QUALIFIED
Leja CaldareraJapanIvan Magalhaes NEGOTIATION
Stacey MacleadItalyElwin Sharvill NEGOTIATION
Rodrigues CampainGermanyXuxue Feng NEW
Jones VocelkaJapanOnyama Limba UNQUALIFIED
Antonio CaudyFranceBernardo Dominic NEW
Francesco ShinkoGermanyElwin Sharvill PROPOSAL
Izzy GarufiJapanIoni Bowcher UNQUALIFIED
Deepesh ChuiArgentinaStephen Shaw NEGOTIATION
Octavia MaletSpainStephen Shaw RENEWAL
Greenwood BologniaSpainXuxue Feng NEW
Jefferson SchemmerItalyAnna Fali PROPOSAL
Murillo MaletFranceIoni Bowcher QUALIFIED
Munro FerenczArgentinaAnna Fali UNQUALIFIED
Greenwood BologniaItalyAsiya Javayant NEGOTIATION
Misaki RoysterUnited KingdomIoni Bowcher PROPOSAL
Greenwood BologniaArgentinaAnna Fali QUALIFIED
Maria MarrierRussiaAsiya Javayant NEW
Alejandro PerinCanadaOnyama Limba NEW
Morrow RutaItalyIoni Bowcher RENEWAL
Leon OldroydGermanyOnyama Limba NEW
Greenwood BologniaBrazilAmy Elsner NEW
Ashley DoeJapanIoni Bowcher NEW
Nicolas IturbideAustraliaStephen Shaw QUALIFIED
Silvio SlusarskiArgentinaXuxue Feng NEW
David DarakjyItalyAnna Fali NEGOTIATION
Salvatore StockhamJapanIoni Bowcher PROPOSAL
Wickens NestleUnited KingdomBernardo Dominic PROPOSAL
Morrow RutaRussiaAnna Fali UNQUALIFIED
Jennifer AmigonIndiaOnyama Limba NEW
Silvio SlusarskiArgentinaAmy Elsner PROPOSAL
David DarakjyItalyAsiya Javayant NEW
Maria MarrierItalyIvan Magalhaes NEW
Ashley DoeBrazilOnyama Limba PROPOSAL
Rodrigues CampainJapanElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Costa DilliardRussiaIvan Magalhaes UNQUALIFIED
Tony FollerUnited KingdomAsiya Javayant QUALIFIED
Adams MorascaFranceStephen Shaw NEGOTIATION
Johnson SergiItalyElwin Sharvill NEGOTIATION
Darci PoquetteSpainElwin Sharvill NEW
Murillo MaletUnited KingdomElwin Sharvill UNQUALIFIED
Morrow RutaArgentinaElwin Sharvill PROPOSAL
Juan WieserGermanyXuxue Feng QUALIFIED
Ivar PaprockiArgentinaElwin Sharvill UNQUALIFIED
Nicolas IturbideRussiaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiUnited Kingdom2026-06-07Chapman, Ross E Esq NEGOTIATION55Anna Fali
1001Ivar PaprockiGermany2026-06-12Morlong Associates QUALIFIED90Bernardo Dominic
1002Maria MarrierGermany2026-06-07Buckley Miller Wright RENEWAL71Bernardo Dominic
1003Ivar PaprockiBrazil2026-05-20Buckley Miller Wright QUALIFIED74Bernardo Dominic
1004David DarakjySpain2026-06-04Feltz Printing Service RENEWAL33Stephen Shaw
1005Jennifer AmigonRussia2026-06-01Chapman, Ross E Esq RENEWAL15Stephen Shaw
1006Aruna FigeroaFrance2026-06-05Truhlar And Truhlar Attys RENEWAL61Anna Fali
1007Isabel BowleyItaly2026-05-31Benton, John B Jr RENEWAL11Elwin Sharvill
1008Salvatore StockhamSpain2026-06-06Commercial Press NEW62Xuxue Feng
1009Alejandro PerinAustralia2026-06-03Feltz Printing Service RENEWAL0Amy Elsner
1010Stacey MacleadBrazil2026-06-08Buckley Miller Wright QUALIFIED49Anna Fali
1011Stacey MacleadCanada2026-05-27Rangoni Of Florence PROPOSAL85Asiya Javayant
1012Kaitlin OstroskyUnited Kingdom2026-06-05Morlong Associates NEGOTIATION54Asiya Javayant
1013Jennifer AmigonRussia2026-05-31Commercial Press PROPOSAL37Bernardo Dominic
1014Adams MorascaCanada2026-05-17Chapman, Ross E Esq PROPOSAL79Stephen Shaw
1015Adams MorascaSpain2026-06-13Truhlar And Truhlar Attys RENEWAL46Bernardo Dominic
1016Aditya KuskoSpain2026-05-23Feiner Bros PROPOSAL1Xuxue Feng
1017Clifford RimSpain2026-05-22Benton, John B Jr NEGOTIATION29Xuxue Feng
1018Isabel BowleyRussia2026-06-09Chemel, James L Cpa NEGOTIATION72Xuxue Feng
1019Maria MarrierItaly2026-05-23Chapman, Ross E Esq RENEWAL94Elwin Sharvill
1020Leja CaldareraSpain2026-05-25Rousseaux, Michael Esq NEW38Bernardo Dominic
1021Ivar PaprockiFrance2026-05-29Chemel, James L Cpa PROPOSAL71Ivan Magalhaes
1022Deepesh ChuiSpain2026-06-12Truhlar And Truhlar Attys QUALIFIED20Onyama Limba
1023Kaitlin OstroskyJapan2026-06-05Feiner Bros PROPOSAL83Asiya Javayant
1024Clifford RimIndia2026-05-27Chanay, Jeffrey A Esq PROPOSAL75Onyama Limba
1025Mayumi KolmetzGermany2026-06-01Rousseaux, Michael Esq NEW77Ioni Bowcher
1026Salvatore StockhamJapan2026-06-12Feiner Bros NEW17Asiya Javayant
1027Greenwood BologniaItaly2026-05-24Feltz Printing Service NEGOTIATION61Xuxue Feng
1028Greenwood BologniaItaly2026-06-09Printing Dimensions RENEWAL66Ioni Bowcher
1029Maisha RulapaughUnited Kingdom2026-06-15Dorl, James J Esq PROPOSAL9Onyama Limba
1030Jefferson SchemmerIndia2026-06-01Truhlar And Truhlar Attys QUALIFIED8Stephen Shaw
1031Clifford RimArgentina2026-05-30Chemel, James L Cpa RENEWAL34Onyama Limba
1032Costa DilliardUnited Kingdom2026-06-11King, Christopher A Esq NEW70Ivan Magalhaes
1033Deepesh ChuiItaly2026-06-12Chapman, Ross E Esq RENEWAL61Ioni Bowcher
1034Kaitlin OstroskyCanada2026-05-21Chapman, Ross E Esq QUALIFIED46Xuxue Feng
1035Adams MorascaFrance2026-06-09Rousseaux, Michael Esq NEW68Asiya Javayant
1036Misaki RoysterBrazil2026-05-29Morlong Associates UNQUALIFIED27Ivan Magalhaes
1037Silvio SlusarskiSpain2026-05-22Commercial Press NEW65Asiya Javayant
1038Misaki RoysterJapan2026-05-25Chapman, Ross E Esq PROPOSAL87Anna Fali
1039Sinclair WaycottCanada2026-06-13Buckley Miller Wright NEW17Asiya Javayant
1040Ashley DoeArgentina2026-05-26Chanay, Jeffrey A Esq QUALIFIED53Ioni Bowcher
1041Clifford RimUnited Kingdom2026-06-10King, Christopher A Esq NEW26Stephen Shaw
1042Arvin AlbaresIndia2026-05-29Morlong Associates PROPOSAL59Anna Fali
1043Leja CaldareraGermany2026-05-18Chemel, James L Cpa PROPOSAL61Ivan Magalhaes
1044Aika InouyeRussia2026-06-05Chanay, Jeffrey A Esq QUALIFIED51Ivan Magalhaes
1045Jefferson SchemmerRussia2026-05-30Morlong Associates RENEWAL99Elwin Sharvill
1046Wickens NestleItaly2026-06-06Buckley Miller Wright NEW55Asiya Javayant
1047Kadeem FlosiAustralia2026-05-17Feltz Printing Service NEW90Stephen Shaw
1048Aruna FigeroaGermany2026-05-29Truhlar And Truhlar Attys RENEWAL31Elwin Sharvill
1049Greenwood BologniaBrazil2026-05-29Rangoni Of Florence NEGOTIATION78Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Costa DilliardCanadaElwin Sharvill UNQUALIFIED
Ricardo GauchoBrazilStephen Shaw NEW
Johnson SergiSpainIoni Bowcher NEGOTIATION
Jeanfrancois VenereCanadaElwin Sharvill NEGOTIATION
Wickens NestleCanadaAsiya Javayant PROPOSAL
David DarakjySpainAsiya Javayant PROPOSAL
Wickens NestleIndiaIvan Magalhaes QUALIFIED
Costa DilliardSpainIoni Bowcher QUALIFIED
Smith GlickItalyBernardo Dominic NEGOTIATION
Costa DilliardArgentinaAsiya Javayant PROPOSAL
Mayumi KolmetzSpainAmy Elsner RENEWAL
Julie StensethItalyIvan Magalhaes QUALIFIED
Jennifer AmigonUnited KingdomXuxue Feng QUALIFIED
Murillo MaletBrazilAnna Fali NEGOTIATION
Salvatore StockhamBrazilBernardo Dominic QUALIFIED
Clifford RimIndiaOnyama Limba NEGOTIATION
Murillo MaletItalyAsiya Javayant UNQUALIFIED
Alejandro PerinBrazilBernardo Dominic NEW
Morrow RutaArgentinaAsiya Javayant PROPOSAL
Mayumi KolmetzRussiaXuxue Feng RENEWAL
Maisha RulapaughJapanAsiya Javayant PROPOSAL
Emily WhobreyAustraliaAnna Fali NEW
Salvatore StockhamAustraliaStephen Shaw NEGOTIATION
David DarakjyIndiaIoni Bowcher PROPOSAL
Jeanfrancois VenereBrazilXuxue Feng RENEWAL
Jones VocelkaRussiaOnyama Limba PROPOSAL
Claire TollnerJapanOnyama Limba RENEWAL
Julie StensethItalyAnna Fali UNQUALIFIED
Jones VocelkaUnited KingdomXuxue Feng NEW
Emily WhobreyRussiaIoni Bowcher NEGOTIATION
Isabel BowleyGermanyBernardo Dominic UNQUALIFIED
Misaki RoysterCanadaStephen Shaw NEGOTIATION
Kadeem FlosiBrazilAnna Fali UNQUALIFIED
Ivar PaprockiSpainAnna Fali NEW
Silvio SlusarskiUnited KingdomXuxue Feng NEW
Adams MorascaGermanyOnyama Limba NEGOTIATION
Arvin AlbaresAustraliaXuxue Feng NEGOTIATION
Emily WhobreyIndiaBernardo Dominic PROPOSAL
Sinclair WaycottAustraliaAnna Fali QUALIFIED
Arvin AlbaresGermanyIoni Bowcher UNQUALIFIED
Jefferson SchemmerSpainBernardo Dominic NEGOTIATION
Salvatore StockhamGermanyIoni Bowcher NEW
Adams MorascaUnited KingdomIvan Magalhaes QUALIFIED
Izzy GarufiBrazilElwin Sharvill UNQUALIFIED
Octavia MaletCanadaAmy Elsner UNQUALIFIED
Ricardo GauchoGermanyStephen Shaw QUALIFIED
Aika InouyeGermanyAmy Elsner NEGOTIATION
Clifford RimIndiaIoni Bowcher QUALIFIED
Antonio CaudyRussiaAnna Fali UNQUALIFIED
Greenwood BologniaFranceElwin Sharvill NEGOTIATION
Frozen Columns
Name
Johnson Sergi
Stacey Maclead
Ashley Doe
Salvatore Stockham
Alejandro Perin
Francesco Shinko
Wickens Nestle
Claire Tollner
Jefferson Schemmer
Octavia Malet
Jones Vocelka
Alejandro Perin
Cody Saylors
Stacey Maclead
Arvin Albares
Isabel Bowley
Aruna Figeroa
Rodrigues Campain
Stacey Maclead
Ricardo Gaucho
Kaitlin Ostrosky
Deepesh Chui
Antonio Caudy
Misaki Royster
Smith Glick
Antonio Caudy
Jeanfrancois Venere
Rodrigues Campain
Claire Tollner
Jefferson Schemmer
Smith Glick
Adams Morasca
Greenwood Bolognia
Chavez Briddick
Clifford Rim
James Butt
Jeanfrancois Venere
Munro Ferencz
Mujtaba Nicka
Costa Dilliard
Juan Wieser
Costa Dilliard
Antonio Caudy
Juan Wieser
Adams Morasca
James Butt
Maisha Rulapaugh
Munro Ferencz
Faith Gillian
Jeanfrancois Venere
IdCountryDate
1000Argentina2026-06-04
1001Russia2026-06-10
1002Australia2026-06-05
1003Italy2026-05-21
1004Japan2026-05-25
1005Argentina2026-06-07
1006Germany2026-06-08
1007Argentina2026-06-04
1008France2026-05-23
1009Canada2026-06-14
1010Italy2026-05-29
1011Germany2026-05-23
1012France2026-05-17
1013Spain2026-06-06
1014France2026-06-10
1015Brazil2026-06-11
1016Australia2026-05-19
1017Brazil2026-06-14
1018Australia2026-06-14
1019Australia2026-06-05
1020India2026-06-09
1021Germany2026-05-27
1022Canada2026-05-20
1023Spain2026-05-21
1024Canada2026-05-26
1025Japan2026-05-31
1026Japan2026-06-13
1027Germany2026-06-01
1028Canada2026-05-23
1029Russia2026-05-29
1030Germany2026-06-08
1031Spain2026-06-13
1032Russia2026-06-08
1033France2026-05-31
1034Italy2026-05-19
1035Spain2026-05-29
1036Brazil2026-05-23
1037France2026-06-07
1038Brazil2026-06-07
1039Russia2026-05-17
1040India2026-05-29
1041Italy2026-06-07
1042Spain2026-05-24
1043Japan2026-05-19
1044Argentina2026-06-08
1045Canada2026-06-08
1046Italy2026-06-05
1047Japan2026-06-14
1048Italy2026-06-14
1049India2026-05-17

On-Demand Data

NameIdCountryDate
Jeanfrancois Venere1000Argentina2026-05-31
Cody Saylors1001Russia2026-06-10
Kaitlin Ostrosky1002Russia2026-05-27
Leon Oldroyd1003Spain2026-06-07
Rodrigues Campain1004France2026-06-06
Mayumi Kolmetz1005Germany2026-05-20
Smith Glick1006Italy2026-05-21
Ashley Doe1007France2026-06-01
Claire Tollner1008Canada2026-05-28
Misaki Royster1009Brazil2026-06-01
Costa Dilliard1010Canada2026-06-02
Greenwood Bolognia1011Italy2026-06-02
Chavez Briddick1012Spain2026-06-06
Chavez Briddick1013United Kingdom2026-05-18
Nicolas Iturbide1014Argentina2026-05-22
James Butt1015India2026-05-18
Julie Stenseth1016Spain2026-05-25
Tony Foller1017Russia2026-05-26
Maria Marrier1018Brazil2026-05-29
Antonio Caudy1019Brazil2026-05-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Arvin AlbaresRussiaOnyama Limba QUALIFIED
Nicolas IturbideCanadaBernardo Dominic PROPOSAL
Maisha RulapaughBrazilAsiya Javayant PROPOSAL
Silvio SlusarskiJapanAmy Elsner NEGOTIATION
Adams MorascaBrazilIvan Magalhaes NEW
Sinclair WaycottCanadaAnna Fali QUALIFIED
Leon OldroydArgentinaXuxue Feng RENEWAL
Leon OldroydUnited KingdomXuxue Feng NEGOTIATION
Misaki RoysterJapanIvan Magalhaes PROPOSAL
Jeanfrancois VenereRussiaAmy Elsner PROPOSAL
Aruna FigeroaFranceElwin Sharvill QUALIFIED
Mujtaba NickaJapanAnna Fali QUALIFIED
Francesco ShinkoJapanIvan Magalhaes NEW
Antonio CaudyIndiaAsiya Javayant NEW
Rodrigues CampainGermanyAnna Fali PROPOSAL
Mujtaba NickaFranceIvan Magalhaes PROPOSAL
Antonio CaudyBrazilBernardo Dominic PROPOSAL
Johnson SergiJapanAnna Fali QUALIFIED
Antonio CaudyBrazilIoni Bowcher QUALIFIED
Ricardo GauchoAustraliaStephen Shaw NEW
Sinclair WaycottSpainBernardo Dominic NEW
Maria MarrierRussiaIvan Magalhaes PROPOSAL
Murillo MaletBrazilAsiya Javayant QUALIFIED
Ashley DoeArgentinaXuxue Feng QUALIFIED
Francesco ShinkoAustraliaOnyama Limba NEW
Johnson SergiFranceAsiya Javayant RENEWAL
Francesco ShinkoRussiaIvan Magalhaes NEGOTIATION
David DarakjyRussiaAsiya Javayant PROPOSAL
Octavia MaletItalyXuxue Feng RENEWAL
Francesco ShinkoSpainOnyama Limba NEGOTIATION
Johnson SergiFranceAsiya Javayant NEW
Jefferson SchemmerUnited KingdomXuxue Feng UNQUALIFIED
Adams MorascaItalyStephen Shaw RENEWAL
Darci PoquetteArgentinaXuxue Feng UNQUALIFIED
Jennifer AmigonJapanXuxue Feng NEW
Maria MarrierBrazilAnna Fali PROPOSAL
Maisha RulapaughUnited KingdomAmy Elsner NEW
Chavez BriddickIndiaAmy Elsner PROPOSAL
Claire TollnerFranceAnna Fali NEW
Johnson SergiFranceElwin Sharvill 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>