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
Emily WhobreyBrazilXuxue Feng PROPOSAL
Jennifer AmigonFranceAnna Fali RENEWAL
Stacey MacleadGermanyIvan Magalhaes QUALIFIED
Nicolas IturbideFranceXuxue Feng PROPOSAL
Leon OldroydArgentinaAnna Fali NEW
Misaki RoysterBrazilElwin Sharvill NEGOTIATION
Chavez BriddickJapanAsiya Javayant UNQUALIFIED
Ivar PaprockiGermanyElwin Sharvill NEGOTIATION
Faith GillianItalyIoni Bowcher RENEWAL
David DarakjyGermanyXuxue Feng PROPOSAL
Morrow RutaSpainStephen Shaw NEW
Murillo MaletArgentinaAsiya Javayant QUALIFIED
Francesco ShinkoSpainOnyama Limba NEGOTIATION
Sinclair WaycottBrazilIvan Magalhaes RENEWAL
Izzy GarufiBrazilAmy Elsner NEGOTIATION
Leja CaldareraAustraliaOnyama Limba RENEWAL
Juan WieserJapanStephen Shaw NEW
Johnson SergiFranceAnna Fali RENEWAL
Ricardo GauchoArgentinaAmy Elsner RENEWAL
Julie StensethIndiaBernardo Dominic PROPOSAL
Deepesh ChuiSpainIoni Bowcher NEW
Mayumi KolmetzUnited KingdomElwin Sharvill NEW
Johnson SergiArgentinaAsiya Javayant QUALIFIED
Antonio CaudyRussiaStephen Shaw QUALIFIED
Misaki RoysterCanadaXuxue Feng NEGOTIATION
Francesco ShinkoJapanAmy Elsner UNQUALIFIED
Misaki RoysterCanadaAmy Elsner NEW
Antonio CaudyCanadaElwin Sharvill QUALIFIED
Cody SaylorsIndiaAmy Elsner QUALIFIED
Tony FollerIndiaXuxue Feng PROPOSAL
Alejandro PerinBrazilAsiya Javayant QUALIFIED
Salvatore StockhamAustraliaIvan Magalhaes QUALIFIED
Munro FerenczFranceStephen Shaw UNQUALIFIED
Ashley DoeRussiaAsiya Javayant QUALIFIED
Maisha RulapaughItalyBernardo Dominic QUALIFIED
Arvin AlbaresRussiaXuxue Feng UNQUALIFIED
Faith GillianJapanBernardo Dominic NEW
Maria MarrierIndiaAmy Elsner RENEWAL
Salvatore StockhamArgentinaBernardo Dominic NEGOTIATION
Jefferson SchemmerJapanIoni Bowcher QUALIFIED
Deepesh ChuiSpainIoni Bowcher NEGOTIATION
Salvatore StockhamSpainAmy Elsner NEW
Octavia MaletJapanElwin Sharvill UNQUALIFIED
Murillo MaletAustraliaStephen Shaw RENEWAL
Arvin AlbaresSpainElwin Sharvill NEGOTIATION
Aruna FigeroaAustraliaBernardo Dominic NEW
Smith GlickFranceBernardo Dominic NEGOTIATION
Kadeem FlosiIndiaXuxue Feng UNQUALIFIED
Maria MarrierIndiaElwin Sharvill NEGOTIATION
Johnson SergiCanadaOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Aditya KuskoRussiaAsiya Javayant UNQUALIFIED
Julie StensethArgentinaStephen Shaw NEW
Stacey MacleadBrazilIvan Magalhaes NEW
Mayumi KolmetzCanadaIvan Magalhaes UNQUALIFIED
Adams MorascaItalyBernardo Dominic QUALIFIED
Morrow RutaCanadaElwin Sharvill UNQUALIFIED
Antonio CaudyBrazilAsiya Javayant NEGOTIATION
Izzy GarufiFranceBernardo Dominic NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill QUALIFIED
Jeanfrancois VenereCanadaAsiya Javayant RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyJapan2026-05-13Chanay, Jeffrey A Esq QUALIFIED98Amy Elsner
1001David DarakjyGermany2026-05-15Benton, John B Jr QUALIFIED53Bernardo Dominic
1002Darci PoquetteJapan2026-04-23King, Christopher A Esq QUALIFIED34Ivan Magalhaes
1003Mayumi KolmetzJapan2026-05-03Rangoni Of Florence UNQUALIFIED29Onyama Limba
1004Morrow RutaRussia2026-05-14Rousseaux, Michael Esq NEW57Bernardo Dominic
1005Juan WieserJapan2026-05-06Chapman, Ross E Esq PROPOSAL12Onyama Limba
1006Maria MarrierBrazil2026-05-19Rangoni Of Florence PROPOSAL8Xuxue Feng
1007Claire TollnerRussia2026-05-21Chapman, Ross E Esq QUALIFIED20Onyama Limba
1008Mujtaba NickaArgentina2026-04-30Morlong Associates PROPOSAL22Bernardo Dominic
1009Arvin AlbaresIndia2026-05-04Commercial Press NEW69Ioni Bowcher
1010Greenwood BologniaSpain2026-05-12Rousseaux, Michael Esq RENEWAL67Asiya Javayant
1011Munro FerenczUnited Kingdom2026-04-30Commercial Press RENEWAL85Ioni Bowcher
1012Francesco ShinkoBrazil2026-05-16Feiner Bros QUALIFIED59Asiya Javayant
1013Wickens NestleCanada2026-05-02Chapman, Ross E Esq QUALIFIED20Asiya Javayant
1014Leja CaldareraItaly2026-05-12King, Christopher A Esq NEGOTIATION75Ivan Magalhaes
1015Ricardo GauchoSpain2026-04-25Rangoni Of Florence UNQUALIFIED74Ivan Magalhaes
1016James ButtBrazil2026-05-17Printing Dimensions QUALIFIED73Amy Elsner
1017Leja CaldareraIndia2026-05-16Chanay, Jeffrey A Esq QUALIFIED0Onyama Limba
1018Faith GillianSpain2026-05-19Rousseaux, Michael Esq NEGOTIATION41Elwin Sharvill
1019Wickens NestleBrazil2026-04-29Printing Dimensions UNQUALIFIED46Stephen Shaw
1020Maisha RulapaughFrance2026-04-28Truhlar And Truhlar Attys NEW6Onyama Limba
1021Greenwood BologniaArgentina2026-05-09Chanay, Jeffrey A Esq NEGOTIATION95Ioni Bowcher
1022Leon OldroydGermany2026-04-29Feltz Printing Service QUALIFIED74Bernardo Dominic
1023Leon OldroydSpain2026-05-13Feltz Printing Service QUALIFIED36Onyama Limba
1024Cody SaylorsAustralia2026-04-24Truhlar And Truhlar Attys RENEWAL15Ivan Magalhaes
1025Wickens NestleBrazil2026-05-07Benton, John B Jr NEW77Bernardo Dominic
1026Maisha RulapaughSpain2026-04-28Truhlar And Truhlar Attys RENEWAL25Asiya Javayant
1027David DarakjyIndia2026-04-23Rousseaux, Michael Esq NEGOTIATION30Stephen Shaw
1028Ivar PaprockiFrance2026-04-24Buckley Miller Wright RENEWAL31Bernardo Dominic
1029Stacey MacleadRussia2026-05-17Rangoni Of Florence NEW80Xuxue Feng
1030Maisha RulapaughSpain2026-05-07Chanay, Jeffrey A Esq NEGOTIATION76Asiya Javayant
1031Chavez BriddickAustralia2026-05-06Printing Dimensions PROPOSAL55Xuxue Feng
1032Stacey MacleadCanada2026-05-10Feltz Printing Service NEGOTIATION62Ivan Magalhaes
1033Adams MorascaAustralia2026-05-13Benton, John B Jr QUALIFIED82Asiya Javayant
1034Maisha RulapaughCanada2026-05-02Rangoni Of Florence PROPOSAL15Onyama Limba
1035Francesco ShinkoJapan2026-05-06Dorl, James J Esq RENEWAL77Ivan Magalhaes
1036Jeanfrancois VenereUnited Kingdom2026-05-12Chanay, Jeffrey A Esq PROPOSAL75Ioni Bowcher
1037Misaki RoysterFrance2026-05-20Feltz Printing Service NEW78Amy Elsner
1038Emily WhobreyItaly2026-05-21Morlong Associates UNQUALIFIED21Asiya Javayant
1039Murillo MaletRussia2026-05-15Benton, John B Jr UNQUALIFIED97Xuxue Feng
1040Salvatore StockhamItaly2026-05-16Chanay, Jeffrey A Esq NEGOTIATION24Onyama Limba
1041Isabel BowleyItaly2026-04-30Chemel, James L Cpa RENEWAL92Xuxue Feng
1042Ivar PaprockiCanada2026-04-23Rangoni Of Florence UNQUALIFIED6Xuxue Feng
1043Greenwood BologniaFrance2026-05-11Truhlar And Truhlar Attys NEGOTIATION51Amy Elsner
1044Maisha RulapaughRussia2026-04-24Commercial Press UNQUALIFIED45Onyama Limba
1045Emily WhobreyIndia2026-05-15Chapman, Ross E Esq QUALIFIED78Asiya Javayant
1046Jennifer AmigonFrance2026-05-09Morlong Associates NEW0Stephen Shaw
1047Munro FerenczBrazil2026-05-04Rousseaux, Michael Esq RENEWAL98Bernardo Dominic
1048Silvio SlusarskiAustralia2026-04-30Rangoni Of Florence QUALIFIED68Onyama Limba
1049Stacey MacleadItaly2026-05-20Chemel, James L Cpa PROPOSAL66Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Munro FerenczUnited KingdomOnyama Limba NEGOTIATION
Cody SaylorsArgentinaIvan Magalhaes QUALIFIED
Julie StensethUnited KingdomAnna Fali UNQUALIFIED
Deepesh ChuiCanadaBernardo Dominic NEGOTIATION
Izzy GarufiItalyElwin Sharvill PROPOSAL
Darci PoquetteFranceStephen Shaw QUALIFIED
Misaki RoysterBrazilOnyama Limba NEW
Izzy GarufiSpainBernardo Dominic UNQUALIFIED
Julie StensethItalyOnyama Limba QUALIFIED
Francesco ShinkoArgentinaXuxue Feng RENEWAL
Juan WieserIndiaAnna Fali UNQUALIFIED
Salvatore StockhamJapanAmy Elsner UNQUALIFIED
Jones VocelkaIndiaXuxue Feng NEGOTIATION
Jones VocelkaArgentinaIvan Magalhaes PROPOSAL
Maisha RulapaughCanadaAmy Elsner NEW
Izzy GarufiRussiaStephen Shaw PROPOSAL
Darci PoquetteRussiaXuxue Feng NEGOTIATION
Deepesh ChuiAustraliaStephen Shaw NEW
Alejandro PerinJapanElwin Sharvill UNQUALIFIED
Mujtaba NickaAustraliaBernardo Dominic RENEWAL
Silvio SlusarskiFranceAmy Elsner RENEWAL
Smith GlickIndiaAsiya Javayant QUALIFIED
Julie StensethSpainIoni Bowcher NEW
James ButtSpainAsiya Javayant QUALIFIED
Rodrigues CampainBrazilBernardo Dominic UNQUALIFIED
James ButtUnited KingdomBernardo Dominic NEGOTIATION
Rodrigues CampainArgentinaIvan Magalhaes UNQUALIFIED
Costa DilliardAustraliaBernardo Dominic RENEWAL
Deepesh ChuiItalyXuxue Feng NEGOTIATION
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED
Clifford RimAustraliaIoni Bowcher NEGOTIATION
Costa DilliardSpainIoni Bowcher RENEWAL
Alejandro PerinSpainBernardo Dominic RENEWAL
David DarakjyFranceXuxue Feng UNQUALIFIED
James ButtIndiaElwin Sharvill QUALIFIED
Jones VocelkaCanadaBernardo Dominic NEW
Deepesh ChuiGermanyAnna Fali NEGOTIATION
Aika InouyeBrazilIvan Magalhaes PROPOSAL
Clifford RimCanadaBernardo Dominic UNQUALIFIED
Clifford RimRussiaStephen Shaw QUALIFIED
Jeanfrancois VenereCanadaAmy Elsner QUALIFIED
Costa DilliardAustraliaXuxue Feng RENEWAL
Chavez BriddickGermanyIvan Magalhaes NEGOTIATION
Cody SaylorsUnited KingdomAmy Elsner PROPOSAL
Adams MorascaItalyIvan Magalhaes NEGOTIATION
Ricardo GauchoSpainIvan Magalhaes UNQUALIFIED
Arvin AlbaresArgentinaAmy Elsner NEGOTIATION
Aditya KuskoJapanAsiya Javayant NEGOTIATION
Clifford RimFranceBernardo Dominic PROPOSAL
Deepesh ChuiRussiaStephen Shaw RENEWAL
Frozen Columns
Name
Nicolas Iturbide
Nicolas Iturbide
Juan Wieser
Aditya Kusko
Mujtaba Nicka
Antonio Caudy
Maisha Rulapaugh
Izzy Garufi
Darci Poquette
Cody Saylors
Nicolas Iturbide
Kadeem Flosi
Clifford Rim
Antonio Caudy
Ricardo Gaucho
Stacey Maclead
Darci Poquette
Juan Wieser
Mujtaba Nicka
Julie Stenseth
Munro Ferencz
Aditya Kusko
Jones Vocelka
Mayumi Kolmetz
Munro Ferencz
Jefferson Schemmer
Juan Wieser
Juan Wieser
David Darakjy
Leon Oldroyd
Mujtaba Nicka
Misaki Royster
Chavez Briddick
Emily Whobrey
Faith Gillian
Emily Whobrey
Isabel Bowley
Salvatore Stockham
Octavia Malet
Wickens Nestle
Ricardo Gaucho
Munro Ferencz
Ashley Doe
Faith Gillian
Clifford Rim
Clifford Rim
Morrow Ruta
Mujtaba Nicka
Greenwood Bolognia
Adams Morasca
IdCountryDate
1000France2026-05-16
1001Australia2026-05-09
1002Germany2026-04-29
1003Spain2026-04-24
1004Argentina2026-05-18
1005Spain2026-04-29
1006Argentina2026-05-11
1007Canada2026-05-19
1008France2026-05-13
1009United Kingdom2026-05-22
1010Japan2026-04-30
1011Canada2026-04-26
1012Germany2026-05-17
1013Japan2026-05-07
1014Russia2026-05-02
1015Australia2026-05-04
1016France2026-05-11
1017India2026-05-12
1018Russia2026-05-17
1019India2026-04-23
1020Germany2026-04-25
1021India2026-05-12
1022France2026-05-11
1023Australia2026-05-19
1024India2026-04-26
1025Italy2026-04-23
1026Spain2026-05-05
1027Canada2026-05-06
1028Argentina2026-05-06
1029India2026-05-14
1030Italy2026-05-13
1031France2026-05-20
1032France2026-05-15
1033Spain2026-05-07
1034France2026-05-08
1035Japan2026-05-14
1036Brazil2026-05-15
1037Brazil2026-05-16
1038Australia2026-05-10
1039France2026-04-30
1040Argentina2026-05-05
1041Canada2026-04-25
1042Japan2026-04-23
1043India2026-04-29
1044United Kingdom2026-05-22
1045Russia2026-04-24
1046Canada2026-05-12
1047Russia2026-04-26
1048Australia2026-05-22
1049India2026-05-09

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000Russia2026-05-15
Octavia Malet1001Italy2026-05-15
Claire Tollner1002India2026-05-08
Ashley Doe1003India2026-05-02
Morrow Ruta1004Argentina2026-05-21
Silvio Slusarski1005Japan2026-05-15
Jennifer Amigon1006Canada2026-04-28
Aruna Figeroa1007France2026-04-29
Greenwood Bolognia1008Argentina2026-05-08
Jefferson Schemmer1009Russia2026-05-08
Costa Dilliard1010Japan2026-05-10
Mujtaba Nicka1011Japan2026-05-11
Costa Dilliard1012Germany2026-05-22
Leon Oldroyd1013Germany2026-05-15
Jeanfrancois Venere1014Brazil2026-05-01
Mujtaba Nicka1015India2026-05-20
Julie Stenseth1016Italy2026-05-03
Greenwood Bolognia1017United Kingdom2026-05-06
Jeanfrancois Venere1018India2026-05-10
Isabel Bowley1019Russia2026-05-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottCanadaAmy Elsner RENEWAL
Salvatore StockhamRussiaBernardo Dominic UNQUALIFIED
Darci PoquetteBrazilAsiya Javayant NEW
James ButtAustraliaAsiya Javayant NEGOTIATION
Deepesh ChuiIndiaElwin Sharvill QUALIFIED
Greenwood BologniaGermanyElwin Sharvill NEW
Wickens NestleIndiaXuxue Feng RENEWAL
Maisha RulapaughSpainOnyama Limba QUALIFIED
Silvio SlusarskiItalyAsiya Javayant NEW
Francesco ShinkoJapanOnyama Limba NEW
Misaki RoysterIndiaXuxue Feng NEGOTIATION
Costa DilliardIndiaIvan Magalhaes NEW
Ivar PaprockiItalyBernardo Dominic NEGOTIATION
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Darci PoquetteAustraliaStephen Shaw UNQUALIFIED
Kadeem FlosiFranceAsiya Javayant RENEWAL
Julie StensethAustraliaIvan Magalhaes PROPOSAL
Cody SaylorsCanadaXuxue Feng RENEWAL
Aditya KuskoRussiaBernardo Dominic QUALIFIED
Octavia MaletArgentinaXuxue Feng NEGOTIATION
Chavez BriddickBrazilXuxue Feng NEGOTIATION
Mujtaba NickaRussiaAsiya Javayant NEW
Alejandro PerinJapanAmy Elsner QUALIFIED
Wickens NestleGermanyIoni Bowcher RENEWAL
Rodrigues CampainCanadaOnyama Limba NEW
Aditya KuskoItalyOnyama Limba RENEWAL
Octavia MaletSpainAmy Elsner PROPOSAL
James ButtFranceAsiya Javayant NEW
Maisha RulapaughJapanOnyama Limba NEW
Maria MarrierBrazilAnna Fali PROPOSAL
Maisha RulapaughCanadaAnna Fali QUALIFIED
Tony FollerJapanAsiya Javayant RENEWAL
Claire TollnerJapanAsiya Javayant PROPOSAL
Maisha RulapaughJapanAnna Fali QUALIFIED
Juan WieserArgentinaBernardo Dominic NEW
Alejandro PerinAustraliaAnna Fali QUALIFIED
Faith GillianBrazilAnna Fali NEW
Salvatore StockhamJapanOnyama Limba UNQUALIFIED
Adams MorascaCanadaXuxue Feng UNQUALIFIED
Juan WieserItalyIvan Magalhaes NEW

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