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
Tony FollerBrazilOnyama Limba NEW
Munro FerenczJapanBernardo Dominic UNQUALIFIED
Murillo MaletJapanIoni Bowcher PROPOSAL
Maria MarrierSpainAmy Elsner PROPOSAL
Ivar PaprockiSpainBernardo Dominic NEW
Silvio SlusarskiArgentinaXuxue Feng NEW
Leja CaldareraArgentinaAnna Fali NEGOTIATION
David DarakjyArgentinaAsiya Javayant PROPOSAL
Nicolas IturbideJapanIoni Bowcher NEW
Aditya KuskoSpainIoni Bowcher RENEWAL
Johnson SergiArgentinaXuxue Feng QUALIFIED
Jones VocelkaItalyIoni Bowcher NEGOTIATION
Greenwood BologniaJapanStephen Shaw NEW
Rodrigues CampainRussiaStephen Shaw NEGOTIATION
Tony FollerCanadaIoni Bowcher RENEWAL
David DarakjyArgentinaXuxue Feng UNQUALIFIED
Mujtaba NickaRussiaElwin Sharvill QUALIFIED
Jeanfrancois VenereAustraliaAsiya Javayant PROPOSAL
Sinclair WaycottItalyAsiya Javayant NEW
Leon OldroydJapanAsiya Javayant QUALIFIED
Julie StensethIndiaIvan Magalhaes NEGOTIATION
Mujtaba NickaArgentinaOnyama Limba PROPOSAL
James ButtArgentinaIvan Magalhaes UNQUALIFIED
Ricardo GauchoIndiaXuxue Feng UNQUALIFIED
Emily WhobreyCanadaAsiya Javayant RENEWAL
Wickens NestleFranceAmy Elsner UNQUALIFIED
James ButtAustraliaIoni Bowcher UNQUALIFIED
Leon OldroydUnited KingdomBernardo Dominic RENEWAL
Izzy GarufiUnited KingdomBernardo Dominic NEW
Darci PoquetteAustraliaBernardo Dominic QUALIFIED
Leon OldroydFranceElwin Sharvill UNQUALIFIED
Jennifer AmigonArgentinaAsiya Javayant UNQUALIFIED
Emily WhobreyIndiaIvan Magalhaes UNQUALIFIED
Murillo MaletIndiaXuxue Feng PROPOSAL
Ashley DoeFranceStephen Shaw NEGOTIATION
Jeanfrancois VenereSpainBernardo Dominic UNQUALIFIED
Aditya KuskoBrazilAnna Fali RENEWAL
Darci PoquetteIndiaIvan Magalhaes UNQUALIFIED
Adams MorascaIndiaElwin Sharvill QUALIFIED
Leja CaldareraCanadaAnna Fali UNQUALIFIED
Stacey MacleadAustraliaIvan Magalhaes NEGOTIATION
Jefferson SchemmerSpainIvan Magalhaes QUALIFIED
Darci PoquetteItalyIoni Bowcher RENEWAL
David DarakjyJapanStephen Shaw QUALIFIED
Wickens NestleFranceOnyama Limba UNQUALIFIED
Costa DilliardRussiaStephen Shaw PROPOSAL
Mujtaba NickaUnited KingdomAmy Elsner QUALIFIED
Greenwood BologniaCanadaOnyama Limba UNQUALIFIED
Arvin AlbaresArgentinaAmy Elsner NEGOTIATION
Stacey MacleadCanadaAnna Fali NEW
Horizontal
NameCountryRepresentativeStatus
Leon OldroydCanadaElwin Sharvill UNQUALIFIED
Rodrigues CampainFranceIoni Bowcher UNQUALIFIED
Emily WhobreyIndiaIvan Magalhaes NEGOTIATION
Juan WieserGermanyIvan Magalhaes QUALIFIED
Adams MorascaFranceAnna Fali NEGOTIATION
Isabel BowleyItalyStephen Shaw RENEWAL
Costa DilliardFranceIvan Magalhaes PROPOSAL
Octavia MaletRussiaAsiya Javayant UNQUALIFIED
Johnson SergiRussiaAnna Fali QUALIFIED
James ButtGermanyXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maisha RulapaughGermany2026-06-01Printing Dimensions NEGOTIATION22Stephen Shaw
1001Adams MorascaArgentina2026-05-29Morlong Associates PROPOSAL45Asiya Javayant
1002Octavia MaletSpain2026-05-08Printing Dimensions UNQUALIFIED56Elwin Sharvill
1003Ricardo GauchoGermany2026-05-26Chanay, Jeffrey A Esq NEW18Ioni Bowcher
1004Ivar PaprockiJapan2026-05-11King, Christopher A Esq NEW27Ivan Magalhaes
1005Jones VocelkaFrance2026-05-28Commercial Press NEGOTIATION94Anna Fali
1006Aika InouyeJapan2026-06-03Rousseaux, Michael Esq PROPOSAL45Ioni Bowcher
1007Faith GillianFrance2026-05-23Morlong Associates UNQUALIFIED87Stephen Shaw
1008Sinclair WaycottGermany2026-05-06Buckley Miller Wright PROPOSAL12Ioni Bowcher
1009Johnson SergiItaly2026-05-28Truhlar And Truhlar Attys UNQUALIFIED73Elwin Sharvill
1010Clifford RimArgentina2026-05-05Dorl, James J Esq NEGOTIATION13Onyama Limba
1011Chavez BriddickArgentina2026-05-09Feiner Bros PROPOSAL97Stephen Shaw
1012Isabel BowleyGermany2026-05-19Dorl, James J Esq NEW0Onyama Limba
1013Leon OldroydArgentina2026-05-25Feiner Bros RENEWAL83Ivan Magalhaes
1014Silvio SlusarskiGermany2026-05-31Dorl, James J Esq PROPOSAL75Elwin Sharvill
1015Leja CaldareraCanada2026-05-15Commercial Press NEW49Ioni Bowcher
1016Izzy GarufiArgentina2026-05-25Chemel, James L Cpa QUALIFIED17Xuxue Feng
1017Leon OldroydBrazil2026-05-30Morlong Associates NEW50Stephen Shaw
1018Aditya KuskoBrazil2026-05-30Feiner Bros UNQUALIFIED21Bernardo Dominic
1019Costa DilliardJapan2026-05-23Chanay, Jeffrey A Esq RENEWAL6Stephen Shaw
1020Leja CaldareraArgentina2026-05-11Rangoni Of Florence NEGOTIATION93Asiya Javayant
1021Octavia MaletUnited Kingdom2026-05-23King, Christopher A Esq QUALIFIED62Ioni Bowcher
1022Maria MarrierIndia2026-05-31Rousseaux, Michael Esq NEGOTIATION98Xuxue Feng
1023Izzy GarufiGermany2026-05-09Truhlar And Truhlar Attys NEW72Elwin Sharvill
1024James ButtIndia2026-05-16Rousseaux, Michael Esq NEW40Ivan Magalhaes
1025Isabel BowleyAustralia2026-05-10Dorl, James J Esq NEW28Xuxue Feng
1026Julie StensethArgentina2026-05-11Chapman, Ross E Esq NEW84Bernardo Dominic
1027Morrow RutaRussia2026-05-25Dorl, James J Esq RENEWAL71Stephen Shaw
1028Sinclair WaycottArgentina2026-06-02Chapman, Ross E Esq NEGOTIATION87Asiya Javayant
1029Jennifer AmigonAustralia2026-05-30Truhlar And Truhlar Attys NEGOTIATION56Xuxue Feng
1030Antonio CaudyAustralia2026-05-18Commercial Press PROPOSAL43Elwin Sharvill
1031Rodrigues CampainSpain2026-05-25Rousseaux, Michael Esq PROPOSAL65Elwin Sharvill
1032Leon OldroydFrance2026-05-16Chanay, Jeffrey A Esq PROPOSAL8Anna Fali
1033Julie StensethJapan2026-05-07Commercial Press RENEWAL28Onyama Limba
1034Murillo MaletJapan2026-05-31Truhlar And Truhlar Attys PROPOSAL33Ioni Bowcher
1035Leja CaldareraUnited Kingdom2026-05-10Chapman, Ross E Esq UNQUALIFIED33Bernardo Dominic
1036Isabel BowleyItaly2026-05-08Chapman, Ross E Esq NEGOTIATION12Elwin Sharvill
1037Faith GillianCanada2026-05-05Rousseaux, Michael Esq QUALIFIED17Asiya Javayant
1038David DarakjyJapan2026-05-12Dorl, James J Esq RENEWAL49Stephen Shaw
1039Aditya KuskoBrazil2026-05-28Commercial Press NEW33Xuxue Feng
1040Ashley DoeSpain2026-05-26King, Christopher A Esq UNQUALIFIED76Onyama Limba
1041Adams MorascaArgentina2026-05-27King, Christopher A Esq UNQUALIFIED5Xuxue Feng
1042Mujtaba NickaFrance2026-05-25Feiner Bros NEGOTIATION41Amy Elsner
1043Leja CaldareraSpain2026-05-14Benton, John B Jr RENEWAL57Ioni Bowcher
1044Jefferson SchemmerJapan2026-05-28Truhlar And Truhlar Attys NEGOTIATION94Onyama Limba
1045Smith GlickCanada2026-05-25Feiner Bros PROPOSAL23Ioni Bowcher
1046Aruna FigeroaJapan2026-05-18Morlong Associates UNQUALIFIED82Ioni Bowcher
1047Ricardo GauchoRussia2026-05-27King, Christopher A Esq NEGOTIATION5Elwin Sharvill
1048Sinclair WaycottAustralia2026-05-06Feltz Printing Service QUALIFIED1Elwin Sharvill
1049David DarakjyBrazil2026-05-13Commercial Press UNQUALIFIED45Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereCanadaElwin Sharvill PROPOSAL
Jeanfrancois VenereGermanyAmy Elsner QUALIFIED
Leja CaldareraJapanOnyama Limba UNQUALIFIED
Salvatore StockhamFranceElwin Sharvill QUALIFIED
Smith GlickBrazilOnyama Limba RENEWAL
Stacey MacleadItalyAmy Elsner UNQUALIFIED
Greenwood BologniaGermanyAsiya Javayant NEGOTIATION
Adams MorascaGermanyStephen Shaw PROPOSAL
Munro FerenczSpainIoni Bowcher UNQUALIFIED
Murillo MaletRussiaStephen Shaw NEW
Deepesh ChuiGermanyIvan Magalhaes NEGOTIATION
Costa DilliardGermanyAnna Fali NEW
Francesco ShinkoRussiaStephen Shaw QUALIFIED
Chavez BriddickItalyElwin Sharvill QUALIFIED
Chavez BriddickArgentinaBernardo Dominic QUALIFIED
Faith GillianBrazilAmy Elsner NEW
Salvatore StockhamSpainIvan Magalhaes UNQUALIFIED
Maria MarrierFranceIvan Magalhaes RENEWAL
Stacey MacleadJapanStephen Shaw NEW
Kaitlin OstroskyJapanOnyama Limba NEW
Murillo MaletIndiaAsiya Javayant NEGOTIATION
Jennifer AmigonBrazilAnna Fali PROPOSAL
Claire TollnerArgentinaIoni Bowcher PROPOSAL
Antonio CaudyCanadaStephen Shaw UNQUALIFIED
Rodrigues CampainItalyAnna Fali QUALIFIED
Smith GlickBrazilElwin Sharvill NEW
Izzy GarufiCanadaAmy Elsner NEW
Silvio SlusarskiRussiaBernardo Dominic PROPOSAL
Tony FollerFranceXuxue Feng RENEWAL
Francesco ShinkoJapanXuxue Feng NEW
Maria MarrierSpainStephen Shaw RENEWAL
Johnson SergiGermanyAnna Fali RENEWAL
Chavez BriddickArgentinaAmy Elsner RENEWAL
Morrow RutaBrazilStephen Shaw RENEWAL
Deepesh ChuiJapanBernardo Dominic NEW
Jefferson SchemmerItalyIvan Magalhaes QUALIFIED
Alejandro PerinArgentinaAsiya Javayant UNQUALIFIED
Mujtaba NickaBrazilAmy Elsner PROPOSAL
Adams MorascaBrazilOnyama Limba NEW
Wickens NestleRussiaBernardo Dominic PROPOSAL
Jefferson SchemmerCanadaOnyama Limba QUALIFIED
Antonio CaudyArgentinaAsiya Javayant QUALIFIED
Mayumi KolmetzItalyIvan Magalhaes NEW
Tony FollerItalyAnna Fali UNQUALIFIED
Chavez BriddickJapanStephen Shaw QUALIFIED
Claire TollnerCanadaXuxue Feng NEGOTIATION
Jones VocelkaCanadaAsiya Javayant UNQUALIFIED
Salvatore StockhamItalyIvan Magalhaes UNQUALIFIED
Sinclair WaycottBrazilOnyama Limba NEW
Alejandro PerinIndiaAmy Elsner RENEWAL
Frozen Columns
Name
Adams Morasca
Darci Poquette
Arvin Albares
Silvio Slusarski
Jeanfrancois Venere
Ashley Doe
Tony Foller
Kaitlin Ostrosky
Mayumi Kolmetz
Octavia Malet
Greenwood Bolognia
Munro Ferencz
Arvin Albares
Chavez Briddick
Costa Dilliard
Kadeem Flosi
Nicolas Iturbide
Julie Stenseth
Isabel Bowley
Ricardo Gaucho
Faith Gillian
Isabel Bowley
Salvatore Stockham
Kaitlin Ostrosky
Juan Wieser
Mujtaba Nicka
Isabel Bowley
Ricardo Gaucho
Darci Poquette
Ashley Doe
Smith Glick
Salvatore Stockham
David Darakjy
Johnson Sergi
Cody Saylors
Aika Inouye
Silvio Slusarski
Arvin Albares
Morrow Ruta
Arvin Albares
Rodrigues Campain
Arvin Albares
Morrow Ruta
Jennifer Amigon
James Butt
Stacey Maclead
Izzy Garufi
David Darakjy
Cody Saylors
Kaitlin Ostrosky
IdCountryDate
1000Brazil2026-05-12
1001Japan2026-05-24
1002Australia2026-05-05
1003India2026-05-10
1004Australia2026-05-15
1005Australia2026-05-07
1006Brazil2026-05-16
1007Australia2026-05-16
1008Italy2026-05-24
1009Canada2026-05-30
1010Japan2026-05-19
1011Japan2026-06-01
1012Brazil2026-05-08
1013Spain2026-05-23
1014Russia2026-05-06
1015Italy2026-05-22
1016Australia2026-05-23
1017Russia2026-05-21
1018Japan2026-05-07
1019Spain2026-05-21
1020Italy2026-05-18
1021Argentina2026-05-13
1022Germany2026-05-31
1023Brazil2026-05-28
1024Spain2026-05-15
1025Argentina2026-06-03
1026India2026-05-16
1027United Kingdom2026-05-22
1028Italy2026-05-27
1029Russia2026-06-02
1030Russia2026-05-28
1031Spain2026-05-23
1032France2026-05-18
1033Italy2026-05-20
1034France2026-05-31
1035Japan2026-05-22
1036Brazil2026-05-15
1037Brazil2026-05-25
1038Japan2026-05-16
1039Spain2026-05-05
1040India2026-05-10
1041Germany2026-05-06
1042Spain2026-05-27
1043Australia2026-05-31
1044Canada2026-06-03
1045Russia2026-05-06
1046Canada2026-05-28
1047Russia2026-05-09
1048India2026-05-14
1049Spain2026-05-23

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Italy2026-05-24
Maisha Rulapaugh1001Russia2026-05-17
Clifford Rim1002Brazil2026-05-24
Aditya Kusko1003United Kingdom2026-05-19
David Darakjy1004Russia2026-05-23
Salvatore Stockham1005Australia2026-05-07
Arvin Albares1006United Kingdom2026-06-03
Kadeem Flosi1007Russia2026-05-22
Jones Vocelka1008Canada2026-05-12
David Darakjy1009Australia2026-05-24
Murillo Malet1010Italy2026-05-15
Kaitlin Ostrosky1011France2026-05-13
James Butt1012Russia2026-05-08
Alejandro Perin1013India2026-05-17
Aditya Kusko1014Brazil2026-06-01
Jefferson Schemmer1015Canada2026-05-16
Mujtaba Nicka1016France2026-05-27
Salvatore Stockham1017Brazil2026-05-20
Kaitlin Ostrosky1018Brazil2026-05-25
Jennifer Amigon1019Spain2026-06-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletArgentinaIoni Bowcher QUALIFIED
Rodrigues CampainArgentinaAnna Fali RENEWAL
Murillo MaletItalyAnna Fali RENEWAL
Ivar PaprockiItalyAmy Elsner UNQUALIFIED
Sinclair WaycottCanadaAmy Elsner UNQUALIFIED
Misaki RoysterSpainStephen Shaw NEW
Maisha RulapaughItalyAsiya Javayant RENEWAL
Ivar PaprockiSpainIoni Bowcher NEW
Aditya KuskoJapanElwin Sharvill RENEWAL
Maisha RulapaughJapanStephen Shaw NEW
Ivar PaprockiJapanAnna Fali RENEWAL
Mayumi KolmetzBrazilXuxue Feng PROPOSAL
Maisha RulapaughAustraliaBernardo Dominic QUALIFIED
Tony FollerCanadaAnna Fali QUALIFIED
Wickens NestleJapanAsiya Javayant RENEWAL
Rodrigues CampainJapanStephen Shaw QUALIFIED
Morrow RutaGermanyAmy Elsner NEGOTIATION
Leon OldroydFranceAsiya Javayant QUALIFIED
Julie StensethGermanyIoni Bowcher NEGOTIATION
Jennifer AmigonUnited KingdomAsiya Javayant QUALIFIED
Johnson SergiFranceIoni Bowcher RENEWAL
Salvatore StockhamArgentinaOnyama Limba NEW
Leja CaldareraFranceAnna Fali QUALIFIED
Munro FerenczCanadaStephen Shaw NEGOTIATION
Maria MarrierSpainStephen Shaw NEGOTIATION
Ashley DoeCanadaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerItalyXuxue Feng QUALIFIED
Tony FollerIndiaXuxue Feng NEGOTIATION
Silvio SlusarskiFranceAsiya Javayant UNQUALIFIED
Faith GillianCanadaBernardo Dominic NEW
Deepesh ChuiBrazilAnna Fali PROPOSAL
David DarakjyRussiaStephen Shaw UNQUALIFIED
Jones VocelkaJapanStephen Shaw UNQUALIFIED
Claire TollnerUnited KingdomElwin Sharvill NEGOTIATION
Wickens NestleIndiaStephen Shaw UNQUALIFIED
Silvio SlusarskiItalyBernardo Dominic NEW
Juan WieserJapanAsiya Javayant QUALIFIED
Julie StensethCanadaElwin Sharvill UNQUALIFIED
Francesco ShinkoArgentinaElwin Sharvill NEGOTIATION
Mayumi KolmetzArgentinaIoni Bowcher NEGOTIATION

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