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
Morrow RutaSpainAmy Elsner NEW
Jennifer AmigonSpainOnyama Limba NEGOTIATION
Murillo MaletRussiaIoni Bowcher NEW
Adams MorascaAustraliaElwin Sharvill NEGOTIATION
Jefferson SchemmerFranceIoni Bowcher NEW
Aruna FigeroaCanadaOnyama Limba NEGOTIATION
Jeanfrancois VenereUnited KingdomOnyama Limba PROPOSAL
Wickens NestleArgentinaXuxue Feng PROPOSAL
Isabel BowleyCanadaAnna Fali UNQUALIFIED
Antonio CaudyArgentinaStephen Shaw UNQUALIFIED
Ivar PaprockiAustraliaElwin Sharvill QUALIFIED
Misaki RoysterUnited KingdomStephen Shaw RENEWAL
Jeanfrancois VenereAustraliaXuxue Feng RENEWAL
Octavia MaletAustraliaOnyama Limba QUALIFIED
Alejandro PerinSpainStephen Shaw NEW
Ivar PaprockiItalyAmy Elsner NEGOTIATION
Jennifer AmigonIndiaBernardo Dominic UNQUALIFIED
Jefferson SchemmerBrazilAsiya Javayant PROPOSAL
Silvio SlusarskiFranceElwin Sharvill NEW
Silvio SlusarskiGermanyOnyama Limba NEW
Emily WhobreyIndiaOnyama Limba QUALIFIED
Jeanfrancois VenereRussiaElwin Sharvill NEGOTIATION
Octavia MaletGermanyIoni Bowcher PROPOSAL
Ricardo GauchoSpainXuxue Feng NEW
Aika InouyeAustraliaIoni Bowcher NEW
Ricardo GauchoUnited KingdomXuxue Feng NEGOTIATION
Chavez BriddickCanadaBernardo Dominic RENEWAL
Octavia MaletFranceAmy Elsner NEGOTIATION
Julie StensethGermanyIoni Bowcher PROPOSAL
Isabel BowleyBrazilXuxue Feng QUALIFIED
Maisha RulapaughArgentinaElwin Sharvill RENEWAL
Jefferson SchemmerJapanStephen Shaw QUALIFIED
Ivar PaprockiArgentinaStephen Shaw NEGOTIATION
James ButtGermanyAnna Fali QUALIFIED
Sinclair WaycottArgentinaElwin Sharvill NEW
Jones VocelkaRussiaAmy Elsner RENEWAL
Leja CaldareraUnited KingdomElwin Sharvill PROPOSAL
Rodrigues CampainUnited KingdomOnyama Limba QUALIFIED
Munro FerenczFranceOnyama Limba PROPOSAL
Kadeem FlosiBrazilIoni Bowcher PROPOSAL
David DarakjyIndiaIoni Bowcher NEGOTIATION
Salvatore StockhamFranceAsiya Javayant RENEWAL
Kadeem FlosiGermanyAsiya Javayant UNQUALIFIED
Kadeem FlosiFranceStephen Shaw RENEWAL
Leon OldroydUnited KingdomOnyama Limba NEGOTIATION
Cody SaylorsRussiaAmy Elsner RENEWAL
Smith GlickJapanXuxue Feng PROPOSAL
Leja CaldareraAustraliaAmy Elsner QUALIFIED
Faith GillianBrazilAnna Fali QUALIFIED
Silvio SlusarskiSpainAmy Elsner NEW
Horizontal
NameCountryRepresentativeStatus
Arvin AlbaresUnited KingdomIvan Magalhaes NEW
Ricardo GauchoIndiaAmy Elsner NEW
Aditya KuskoAustraliaIvan Magalhaes RENEWAL
Isabel BowleyIndiaStephen Shaw UNQUALIFIED
Jeanfrancois VenereBrazilBernardo Dominic PROPOSAL
Aditya KuskoGermanyAnna Fali NEGOTIATION
Aruna FigeroaCanadaElwin Sharvill NEW
Smith GlickGermanyIvan Magalhaes UNQUALIFIED
Maria MarrierRussiaStephen Shaw NEGOTIATION
Tony FollerArgentinaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Julie StensethArgentina2026-05-03Feiner Bros NEW53Anna Fali
1001Ricardo GauchoBrazil2026-04-30Chapman, Ross E Esq NEW4Anna Fali
1002Ivar PaprockiSpain2026-04-28Dorl, James J Esq NEW7Xuxue Feng
1003Salvatore StockhamBrazil2026-04-08Feiner Bros PROPOSAL92Onyama Limba
1004Adams MorascaAustralia2026-04-20Rousseaux, Michael Esq RENEWAL91Asiya Javayant
1005Leon OldroydFrance2026-05-02Chemel, James L Cpa PROPOSAL31Amy Elsner
1006Kaitlin OstroskyUnited Kingdom2026-04-20Truhlar And Truhlar Attys RENEWAL44Onyama Limba
1007Ricardo GauchoCanada2026-04-09Rousseaux, Michael Esq NEW97Asiya Javayant
1008Aruna FigeroaIndia2026-04-07Morlong Associates NEW46Onyama Limba
1009Julie StensethItaly2026-04-18Chemel, James L Cpa PROPOSAL9Asiya Javayant
1010Isabel BowleyAustralia2026-04-14Rangoni Of Florence NEW42Xuxue Feng
1011Smith GlickJapan2026-04-21Truhlar And Truhlar Attys UNQUALIFIED55Ioni Bowcher
1012Silvio SlusarskiAustralia2026-04-20Rangoni Of Florence NEW56Anna Fali
1013Isabel BowleyFrance2026-04-28Rangoni Of Florence PROPOSAL37Bernardo Dominic
1014Leja CaldareraArgentina2026-04-09Dorl, James J Esq QUALIFIED43Bernardo Dominic
1015Isabel BowleyFrance2026-04-17Morlong Associates NEW7Onyama Limba
1016Jeanfrancois VenereUnited Kingdom2026-04-05Benton, John B Jr UNQUALIFIED82Ioni Bowcher
1017Octavia MaletUnited Kingdom2026-04-24Chemel, James L Cpa QUALIFIED78Onyama Limba
1018David DarakjyJapan2026-05-01Printing Dimensions NEW36Ioni Bowcher
1019Nicolas IturbideBrazil2026-04-05Printing Dimensions UNQUALIFIED68Ioni Bowcher
1020Wickens NestleIndia2026-04-23Printing Dimensions QUALIFIED87Asiya Javayant
1021Jones VocelkaGermany2026-04-16Feiner Bros RENEWAL15Bernardo Dominic
1022Aditya KuskoItaly2026-04-17Chapman, Ross E Esq PROPOSAL94Onyama Limba
1023Kadeem FlosiGermany2026-04-24Feiner Bros UNQUALIFIED32Ivan Magalhaes
1024Faith GillianJapan2026-04-25Feiner Bros UNQUALIFIED48Anna Fali
1025Faith GillianFrance2026-04-07Buckley Miller Wright NEW69Asiya Javayant
1026Morrow RutaBrazil2026-05-02Truhlar And Truhlar Attys QUALIFIED56Elwin Sharvill
1027Kaitlin OstroskyFrance2026-04-25Commercial Press UNQUALIFIED7Asiya Javayant
1028Emily WhobreyUnited Kingdom2026-04-13Commercial Press UNQUALIFIED15Amy Elsner
1029Aditya KuskoIndia2026-04-15Dorl, James J Esq UNQUALIFIED60Bernardo Dominic
1030Kaitlin OstroskyFrance2026-04-11Feltz Printing Service QUALIFIED72Ivan Magalhaes
1031Wickens NestleSpain2026-04-10Commercial Press RENEWAL34Amy Elsner
1032Mayumi KolmetzGermany2026-04-19Chemel, James L Cpa RENEWAL4Xuxue Feng
1033Stacey MacleadGermany2026-04-15Feltz Printing Service NEW64Xuxue Feng
1034Aruna FigeroaUnited Kingdom2026-04-09Truhlar And Truhlar Attys QUALIFIED60Elwin Sharvill
1035Francesco ShinkoItaly2026-04-28Commercial Press NEW10Anna Fali
1036Aruna FigeroaBrazil2026-04-07Benton, John B Jr PROPOSAL9Asiya Javayant
1037Alejandro PerinIndia2026-04-15Feiner Bros NEGOTIATION84Ioni Bowcher
1038Chavez BriddickRussia2026-04-08Feltz Printing Service NEW72Elwin Sharvill
1039Mujtaba NickaIndia2026-05-01Commercial Press QUALIFIED12Amy Elsner
1040Leon OldroydItaly2026-04-17Dorl, James J Esq NEW43Bernardo Dominic
1041Izzy GarufiRussia2026-04-18Chemel, James L Cpa UNQUALIFIED60Anna Fali
1042Nicolas IturbideBrazil2026-05-04Commercial Press UNQUALIFIED34Ivan Magalhaes
1043James ButtArgentina2026-04-12King, Christopher A Esq PROPOSAL34Asiya Javayant
1044Juan WieserIndia2026-04-20Morlong Associates UNQUALIFIED83Bernardo Dominic
1045Julie StensethIndia2026-04-30Buckley Miller Wright QUALIFIED42Xuxue Feng
1046Costa DilliardGermany2026-04-12Chanay, Jeffrey A Esq NEGOTIATION69Bernardo Dominic
1047Ricardo GauchoJapan2026-04-06Dorl, James J Esq UNQUALIFIED89Anna Fali
1048Jefferson SchemmerSpain2026-04-18Benton, John B Jr QUALIFIED81Bernardo Dominic
1049Darci PoquetteArgentina2026-04-12Rangoni Of Florence RENEWAL78Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Jennifer AmigonFranceAsiya Javayant NEGOTIATION
Costa DilliardArgentinaXuxue Feng PROPOSAL
Tony FollerAustraliaAnna Fali UNQUALIFIED
Maria MarrierBrazilAmy Elsner PROPOSAL
Jones VocelkaBrazilXuxue Feng QUALIFIED
Salvatore StockhamIndiaAnna Fali QUALIFIED
Jeanfrancois VenereSpainXuxue Feng NEGOTIATION
Stacey MacleadBrazilIvan Magalhaes PROPOSAL
Mujtaba NickaUnited KingdomAnna Fali RENEWAL
Greenwood BologniaSpainAmy Elsner NEW
Ashley DoeUnited KingdomOnyama Limba PROPOSAL
Chavez BriddickAustraliaElwin Sharvill RENEWAL
Leon OldroydRussiaElwin Sharvill NEW
Kaitlin OstroskyUnited KingdomIoni Bowcher NEGOTIATION
Johnson SergiUnited KingdomOnyama Limba PROPOSAL
Jennifer AmigonBrazilIoni Bowcher NEW
Leja CaldareraCanadaAsiya Javayant RENEWAL
Kaitlin OstroskyGermanyAnna Fali NEGOTIATION
Aika InouyeAustraliaElwin Sharvill RENEWAL
Maria MarrierCanadaBernardo Dominic RENEWAL
Murillo MaletBrazilAmy Elsner NEGOTIATION
Johnson SergiBrazilIoni Bowcher UNQUALIFIED
Faith GillianGermanyOnyama Limba QUALIFIED
Jones VocelkaSpainStephen Shaw NEW
Stacey MacleadFranceXuxue Feng RENEWAL
Sinclair WaycottGermanyAsiya Javayant QUALIFIED
Maisha RulapaughArgentinaBernardo Dominic RENEWAL
Isabel BowleyIndiaOnyama Limba QUALIFIED
Maria MarrierArgentinaAsiya Javayant NEGOTIATION
Misaki RoysterAustraliaAmy Elsner PROPOSAL
Darci PoquetteRussiaAnna Fali NEGOTIATION
Octavia MaletUnited KingdomXuxue Feng UNQUALIFIED
Wickens NestleItalyAnna Fali UNQUALIFIED
Alejandro PerinFranceIoni Bowcher NEW
Aika InouyeIndiaAmy Elsner RENEWAL
Darci PoquetteBrazilBernardo Dominic NEGOTIATION
Jones VocelkaCanadaIvan Magalhaes NEGOTIATION
Sinclair WaycottIndiaIvan Magalhaes NEW
Jeanfrancois VenereArgentinaIoni Bowcher RENEWAL
Darci PoquetteSpainIoni Bowcher UNQUALIFIED
Rodrigues CampainIndiaIvan Magalhaes PROPOSAL
Stacey MacleadBrazilAmy Elsner NEW
Leja CaldareraSpainXuxue Feng QUALIFIED
Sinclair WaycottCanadaOnyama Limba RENEWAL
Ivar PaprockiCanadaOnyama Limba NEGOTIATION
Alejandro PerinItalyElwin Sharvill NEW
Adams MorascaSpainXuxue Feng NEGOTIATION
Jennifer AmigonBrazilStephen Shaw QUALIFIED
Maisha RulapaughRussiaXuxue Feng UNQUALIFIED
David DarakjyGermanyAmy Elsner PROPOSAL
Frozen Columns
Name
Ricardo Gaucho
Antonio Caudy
Adams Morasca
Leon Oldroyd
Chavez Briddick
Kadeem Flosi
Wickens Nestle
Arvin Albares
Maria Marrier
Faith Gillian
Emily Whobrey
Murillo Malet
Tony Foller
Sinclair Waycott
Maisha Rulapaugh
Silvio Slusarski
Tony Foller
Ricardo Gaucho
Ashley Doe
Claire Tollner
Chavez Briddick
Silvio Slusarski
Cody Saylors
Mayumi Kolmetz
Faith Gillian
Adams Morasca
Aruna Figeroa
Misaki Royster
Jennifer Amigon
Morrow Ruta
Sinclair Waycott
Jefferson Schemmer
Aditya Kusko
Cody Saylors
Claire Tollner
Leon Oldroyd
Jennifer Amigon
James Butt
Emily Whobrey
Ashley Doe
Smith Glick
Sinclair Waycott
Izzy Garufi
Greenwood Bolognia
Darci Poquette
Salvatore Stockham
Mujtaba Nicka
Isabel Bowley
Julie Stenseth
Silvio Slusarski
IdCountryDate
1000Canada2026-04-13
1001Russia2026-04-11
1002Japan2026-04-12
1003Brazil2026-04-13
1004Brazil2026-04-18
1005United Kingdom2026-04-21
1006Germany2026-04-17
1007Brazil2026-04-08
1008Germany2026-05-01
1009Canada2026-04-18
1010Canada2026-04-23
1011Australia2026-04-12
1012France2026-04-14
1013India2026-05-02
1014Australia2026-04-26
1015Spain2026-04-23
1016Germany2026-04-13
1017Brazil2026-05-04
1018Russia2026-04-27
1019United Kingdom2026-04-17
1020Australia2026-04-22
1021Italy2026-04-11
1022Russia2026-04-06
1023Germany2026-04-21
1024India2026-05-02
1025Russia2026-04-13
1026Australia2026-05-03
1027Spain2026-04-13
1028Italy2026-05-04
1029Italy2026-04-21
1030Spain2026-04-30
1031Argentina2026-04-06
1032Argentina2026-04-14
1033Argentina2026-04-25
1034Russia2026-04-20
1035Russia2026-04-09
1036Japan2026-04-13
1037India2026-04-18
1038France2026-04-29
1039Argentina2026-05-01
1040United Kingdom2026-04-07
1041Australia2026-04-17
1042Argentina2026-05-01
1043Russia2026-04-19
1044Germany2026-04-10
1045France2026-04-14
1046India2026-04-10
1047Germany2026-04-27
1048Japan2026-04-09
1049Japan2026-04-09

On-Demand Data

NameIdCountryDate
Cody Saylors1000Australia2026-04-06
Octavia Malet1001Germany2026-04-27
Cody Saylors1002Germany2026-05-02
Johnson Sergi1003Argentina2026-05-03
Murillo Malet1004France2026-04-17
Clifford Rim1005Russia2026-05-01
Clifford Rim1006France2026-05-03
Claire Tollner1007Brazil2026-04-11
James Butt1008United Kingdom2026-04-07
Johnson Sergi1009Russia2026-04-28
Adams Morasca1010Canada2026-04-13
Mayumi Kolmetz1011Germany2026-04-18
Clifford Rim1012Italy2026-04-14
Chavez Briddick1013France2026-04-08
Izzy Garufi1014Australia2026-04-17
Jefferson Schemmer1015United Kingdom2026-04-06
Clifford Rim1016Italy2026-04-18
Nicolas Iturbide1017United Kingdom2026-04-16
Clifford Rim1018Brazil2026-04-08
Aika Inouye1019Australia2026-04-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Morrow RutaRussiaIoni Bowcher NEW
Aditya KuskoSpainOnyama Limba QUALIFIED
Julie StensethAustraliaIoni Bowcher UNQUALIFIED
Smith GlickGermanyAsiya Javayant UNQUALIFIED
Murillo MaletUnited KingdomAnna Fali UNQUALIFIED
Maria MarrierArgentinaBernardo Dominic PROPOSAL
Octavia MaletCanadaOnyama Limba PROPOSAL
Jefferson SchemmerSpainIoni Bowcher PROPOSAL
Ashley DoeGermanyBernardo Dominic RENEWAL
Ivar PaprockiJapanBernardo Dominic RENEWAL
Chavez BriddickItalyIoni Bowcher NEW
Darci PoquetteIndiaIvan Magalhaes NEGOTIATION
Cody SaylorsItalyBernardo Dominic NEGOTIATION
Cody SaylorsJapanStephen Shaw PROPOSAL
Kaitlin OstroskyFranceXuxue Feng NEGOTIATION
Antonio CaudyArgentinaIoni Bowcher NEW
Clifford RimFranceBernardo Dominic NEW
Ivar PaprockiBrazilOnyama Limba NEW
Morrow RutaRussiaIvan Magalhaes PROPOSAL
Clifford RimCanadaElwin Sharvill NEGOTIATION
Juan WieserArgentinaStephen Shaw UNQUALIFIED
Darci PoquetteFranceIoni Bowcher UNQUALIFIED
Jennifer AmigonUnited KingdomAmy Elsner PROPOSAL
Stacey MacleadCanadaAsiya Javayant RENEWAL
Jennifer AmigonBrazilStephen Shaw UNQUALIFIED
Izzy GarufiIndiaAmy Elsner NEW
Wickens NestleGermanyXuxue Feng RENEWAL
Maria MarrierRussiaIoni Bowcher QUALIFIED
Clifford RimIndiaBernardo Dominic RENEWAL
Jefferson SchemmerUnited KingdomStephen Shaw UNQUALIFIED
David DarakjyBrazilAsiya Javayant NEW
Jefferson SchemmerIndiaAsiya Javayant UNQUALIFIED
Claire TollnerCanadaOnyama Limba NEW
Leon OldroydJapanElwin Sharvill RENEWAL
Arvin AlbaresItalyBernardo Dominic QUALIFIED
Jones VocelkaBrazilIoni Bowcher QUALIFIED
Ricardo GauchoJapanOnyama Limba QUALIFIED
Chavez BriddickUnited KingdomIvan Magalhaes RENEWAL
Mayumi KolmetzRussiaAsiya Javayant NEGOTIATION
Claire TollnerRussiaBernardo Dominic 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>