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
Octavia MaletArgentinaAmy Elsner UNQUALIFIED
Adams MorascaArgentinaIvan Magalhaes NEW
Izzy GarufiGermanyIvan Magalhaes QUALIFIED
Cody SaylorsRussiaOnyama Limba RENEWAL
Cody SaylorsArgentinaOnyama Limba PROPOSAL
Cody SaylorsSpainOnyama Limba UNQUALIFIED
Adams MorascaCanadaIoni Bowcher UNQUALIFIED
Nicolas IturbideRussiaXuxue Feng RENEWAL
Jefferson SchemmerGermanyOnyama Limba QUALIFIED
Ashley DoeItalyIoni Bowcher NEGOTIATION
Jefferson SchemmerCanadaIvan Magalhaes NEW
Isabel BowleySpainBernardo Dominic UNQUALIFIED
Kaitlin OstroskyAustraliaBernardo Dominic NEW
Ricardo GauchoBrazilAsiya Javayant QUALIFIED
Kaitlin OstroskyUnited KingdomAmy Elsner NEGOTIATION
Chavez BriddickAustraliaStephen Shaw UNQUALIFIED
Tony FollerFranceElwin Sharvill QUALIFIED
Juan WieserGermanyStephen Shaw NEGOTIATION
Mayumi KolmetzUnited KingdomAmy Elsner NEW
Clifford RimAustraliaAsiya Javayant UNQUALIFIED
Claire TollnerBrazilAsiya Javayant QUALIFIED
Sinclair WaycottJapanIoni Bowcher NEW
Jefferson SchemmerAustraliaAnna Fali NEGOTIATION
Murillo MaletCanadaAsiya Javayant PROPOSAL
Morrow RutaIndiaAnna Fali RENEWAL
Antonio CaudyGermanyOnyama Limba PROPOSAL
Costa DilliardItalyIoni Bowcher RENEWAL
Wickens NestleCanadaAmy Elsner UNQUALIFIED
Tony FollerBrazilXuxue Feng UNQUALIFIED
James ButtJapanIvan Magalhaes UNQUALIFIED
Cody SaylorsRussiaStephen Shaw RENEWAL
Costa DilliardFranceXuxue Feng NEGOTIATION
Deepesh ChuiIndiaOnyama Limba UNQUALIFIED
Murillo MaletUnited KingdomBernardo Dominic UNQUALIFIED
Ashley DoeFranceAsiya Javayant PROPOSAL
Claire TollnerRussiaAsiya Javayant NEW
Smith GlickBrazilAnna Fali UNQUALIFIED
Alejandro PerinBrazilElwin Sharvill PROPOSAL
Greenwood BologniaCanadaIoni Bowcher NEGOTIATION
David DarakjyUnited KingdomIvan Magalhaes NEGOTIATION
Smith GlickGermanyIoni Bowcher NEW
Smith GlickRussiaOnyama Limba NEGOTIATION
Smith GlickJapanAnna Fali QUALIFIED
Aditya KuskoFranceAnna Fali QUALIFIED
Leja CaldareraGermanyXuxue Feng UNQUALIFIED
Aruna FigeroaRussiaXuxue Feng NEW
James ButtItalyAsiya Javayant UNQUALIFIED
Ivar PaprockiArgentinaStephen Shaw RENEWAL
Greenwood BologniaItalyAsiya Javayant QUALIFIED
Maisha RulapaughIndiaElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Murillo MaletJapanOnyama Limba NEW
Deepesh ChuiJapanAsiya Javayant UNQUALIFIED
Cody SaylorsSpainXuxue Feng QUALIFIED
Jefferson SchemmerCanadaStephen Shaw NEW
James ButtGermanyIvan Magalhaes UNQUALIFIED
Deepesh ChuiSpainAnna Fali NEGOTIATION
Ricardo GauchoRussiaAsiya Javayant RENEWAL
Munro FerenczCanadaAsiya Javayant UNQUALIFIED
Misaki RoysterCanadaElwin Sharvill RENEWAL
Adams MorascaFranceStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaArgentina2025-05-26Rangoni Of Florence NEGOTIATION94Amy Elsner
1001Arvin AlbaresCanada2025-06-18Commercial Press RENEWAL29Onyama Limba
1002Arvin AlbaresFrance2025-06-08Rousseaux, Michael Esq QUALIFIED50Amy Elsner
1003Adams MorascaItaly2025-05-27Buckley Miller Wright NEGOTIATION37Ioni Bowcher
1004Antonio CaudyGermany2025-06-05Buckley Miller Wright NEW61Onyama Limba
1005Tony FollerUnited Kingdom2025-05-24Truhlar And Truhlar Attys RENEWAL0Asiya Javayant
1006Aruna FigeroaGermany2025-06-11Dorl, James J Esq QUALIFIED4Anna Fali
1007David DarakjyRussia2025-05-27Chanay, Jeffrey A Esq PROPOSAL54Bernardo Dominic
1008Aruna FigeroaBrazil2025-06-08Morlong Associates NEW46Xuxue Feng
1009Chavez BriddickBrazil2025-06-07Dorl, James J Esq QUALIFIED58Xuxue Feng
1010Octavia MaletAustralia2025-06-13Rangoni Of Florence UNQUALIFIED9Xuxue Feng
1011Chavez BriddickItaly2025-06-20Feiner Bros NEW64Elwin Sharvill
1012Adams MorascaArgentina2025-06-14Commercial Press UNQUALIFIED98Stephen Shaw
1013Maria MarrierRussia2025-06-10Rangoni Of Florence PROPOSAL81Xuxue Feng
1014Jennifer AmigonBrazil2025-06-05King, Christopher A Esq NEGOTIATION94Onyama Limba
1015Octavia MaletBrazil2025-06-20Feiner Bros QUALIFIED91Ioni Bowcher
1016Rodrigues CampainRussia2025-06-10Feltz Printing Service NEW23Bernardo Dominic
1017Leja CaldareraAustralia2025-06-15Rangoni Of Florence NEGOTIATION10Xuxue Feng
1018Aditya KuskoArgentina2025-06-20Rangoni Of Florence NEGOTIATION6Amy Elsner
1019Murillo MaletBrazil2025-06-19King, Christopher A Esq QUALIFIED74Onyama Limba
1020Stacey MacleadIndia2025-06-17Morlong Associates UNQUALIFIED41Amy Elsner
1021Aruna FigeroaItaly2025-06-07King, Christopher A Esq UNQUALIFIED44Ivan Magalhaes
1022Jones VocelkaIndia2025-06-04Feltz Printing Service NEGOTIATION9Bernardo Dominic
1023Faith GillianUnited Kingdom2025-05-29Rousseaux, Michael Esq UNQUALIFIED82Asiya Javayant
1024Wickens NestleRussia2025-06-03Printing Dimensions RENEWAL60Onyama Limba
1025Kaitlin OstroskyAustralia2025-06-01Rousseaux, Michael Esq UNQUALIFIED96Ivan Magalhaes
1026Johnson SergiItaly2025-05-28Truhlar And Truhlar Attys NEW4Amy Elsner
1027Deepesh ChuiIndia2025-05-28Commercial Press NEGOTIATION61Xuxue Feng
1028Arvin AlbaresIndia2025-05-29Morlong Associates NEW94Stephen Shaw
1029Arvin AlbaresUnited Kingdom2025-06-02Truhlar And Truhlar Attys RENEWAL92Amy Elsner
1030Misaki RoysterCanada2025-06-20Morlong Associates RENEWAL64Asiya Javayant
1031Johnson SergiAustralia2025-06-06Printing Dimensions QUALIFIED80Amy Elsner
1032Jones VocelkaCanada2025-06-20Feltz Printing Service NEW31Ivan Magalhaes
1033Wickens NestleBrazil2025-06-16Buckley Miller Wright UNQUALIFIED14Onyama Limba
1034Claire TollnerSpain2025-06-22Chapman, Ross E Esq NEGOTIATION4Asiya Javayant
1035David DarakjyJapan2025-06-10Printing Dimensions RENEWAL44Elwin Sharvill
1036Kaitlin OstroskyCanada2025-06-17Buckley Miller Wright PROPOSAL95Onyama Limba
1037Francesco ShinkoRussia2025-06-19Feiner Bros NEGOTIATION82Ioni Bowcher
1038Darci PoquetteRussia2025-06-13King, Christopher A Esq NEGOTIATION37Onyama Limba
1039Alejandro PerinFrance2025-05-26Rangoni Of Florence RENEWAL25Elwin Sharvill
1040Misaki RoysterArgentina2025-06-08Rousseaux, Michael Esq QUALIFIED49Bernardo Dominic
1041Arvin AlbaresUnited Kingdom2025-06-08Benton, John B Jr QUALIFIED97Stephen Shaw
1042Morrow RutaIndia2025-05-31Rousseaux, Michael Esq RENEWAL5Elwin Sharvill
1043Leja CaldareraFrance2025-06-14Chanay, Jeffrey A Esq RENEWAL55Anna Fali
1044Aika InouyeUnited Kingdom2025-05-26Chapman, Ross E Esq PROPOSAL56Bernardo Dominic
1045Aditya KuskoSpain2025-05-30Printing Dimensions PROPOSAL26Anna Fali
1046Jeanfrancois VenereSpain2025-06-08Morlong Associates NEGOTIATION73Amy Elsner
1047Aruna FigeroaIndia2025-05-26Rangoni Of Florence UNQUALIFIED87Onyama Limba
1048Leja CaldareraJapan2025-06-02Chapman, Ross E Esq QUALIFIED48Asiya Javayant
1049Jones VocelkaIndia2025-06-12Printing Dimensions UNQUALIFIED5Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainFranceAnna Fali QUALIFIED
Claire TollnerAustraliaIvan Magalhaes RENEWAL
Silvio SlusarskiIndiaAmy Elsner NEGOTIATION
Octavia MaletItalyElwin Sharvill QUALIFIED
Costa DilliardGermanyBernardo Dominic NEGOTIATION
Adams MorascaIndiaAmy Elsner RENEWAL
Rodrigues CampainSpainIvan Magalhaes UNQUALIFIED
Juan WieserArgentinaAsiya Javayant UNQUALIFIED
Octavia MaletIndiaStephen Shaw RENEWAL
Silvio SlusarskiRussiaStephen Shaw RENEWAL
Ashley DoeAustraliaAnna Fali PROPOSAL
James ButtSpainXuxue Feng UNQUALIFIED
Salvatore StockhamIndiaStephen Shaw NEW
Rodrigues CampainRussiaXuxue Feng NEGOTIATION
Juan WieserGermanyIoni Bowcher RENEWAL
Emily WhobreyRussiaElwin Sharvill NEW
Nicolas IturbideIndiaAsiya Javayant NEW
Silvio SlusarskiItalyXuxue Feng NEW
Deepesh ChuiSpainIvan Magalhaes QUALIFIED
Stacey MacleadCanadaXuxue Feng UNQUALIFIED
Darci PoquetteRussiaStephen Shaw PROPOSAL
Antonio CaudyUnited KingdomIvan Magalhaes PROPOSAL
James ButtItalyIoni Bowcher RENEWAL
Arvin AlbaresItalyIvan Magalhaes RENEWAL
Francesco ShinkoIndiaIvan Magalhaes QUALIFIED
Ashley DoeIndiaStephen Shaw NEW
Ricardo GauchoCanadaElwin Sharvill RENEWAL
Antonio CaudyRussiaElwin Sharvill QUALIFIED
Murillo MaletBrazilAnna Fali RENEWAL
Munro FerenczBrazilIvan Magalhaes UNQUALIFIED
Mayumi KolmetzBrazilAmy Elsner NEGOTIATION
Jennifer AmigonIndiaElwin Sharvill NEGOTIATION
Leon OldroydAustraliaStephen Shaw NEW
Maria MarrierFranceBernardo Dominic NEW
Clifford RimAustraliaElwin Sharvill PROPOSAL
Leja CaldareraBrazilIvan Magalhaes QUALIFIED
Salvatore StockhamBrazilStephen Shaw UNQUALIFIED
Aruna FigeroaCanadaAnna Fali NEGOTIATION
Salvatore StockhamFranceElwin Sharvill RENEWAL
Mayumi KolmetzArgentinaElwin Sharvill RENEWAL
Jennifer AmigonRussiaIoni Bowcher RENEWAL
Smith GlickFranceStephen Shaw RENEWAL
Aditya KuskoRussiaAnna Fali UNQUALIFIED
Izzy GarufiUnited KingdomIoni Bowcher UNQUALIFIED
Tony FollerItalyBernardo Dominic QUALIFIED
Mayumi KolmetzCanadaStephen Shaw RENEWAL
Juan WieserSpainIvan Magalhaes NEW
Morrow RutaJapanStephen Shaw NEGOTIATION
Antonio CaudyFranceAnna Fali NEW
Claire TollnerJapanAnna Fali QUALIFIED
Frozen Columns
Name
Ricardo Gaucho
Juan Wieser
David Darakjy
Sinclair Waycott
Chavez Briddick
Munro Ferencz
Maria Marrier
Greenwood Bolognia
Sinclair Waycott
Stacey Maclead
Sinclair Waycott
Kaitlin Ostrosky
Leon Oldroyd
Aditya Kusko
Aditya Kusko
Ivar Paprocki
Maisha Rulapaugh
Jones Vocelka
Izzy Garufi
Salvatore Stockham
Emily Whobrey
Morrow Ruta
Chavez Briddick
Antonio Caudy
Ashley Doe
Maria Marrier
Izzy Garufi
Morrow Ruta
Chavez Briddick
Jefferson Schemmer
Maisha Rulapaugh
Emily Whobrey
Munro Ferencz
Antonio Caudy
Jennifer Amigon
Mujtaba Nicka
Isabel Bowley
Jennifer Amigon
Adams Morasca
Julie Stenseth
Antonio Caudy
Ivar Paprocki
Misaki Royster
David Darakjy
Adams Morasca
Sinclair Waycott
Kaitlin Ostrosky
Munro Ferencz
Johnson Sergi
Francesco Shinko
IdCountryDate
1000United Kingdom2025-06-16
1001Brazil2025-06-12
1002Australia2025-05-29
1003Russia2025-06-04
1004Australia2025-06-11
1005France2025-06-11
1006India2025-06-14
1007Russia2025-05-26
1008Spain2025-05-28
1009Canada2025-06-17
1010Canada2025-06-05
1011Argentina2025-05-26
1012Italy2025-06-20
1013Italy2025-05-31
1014Italy2025-05-27
1015Canada2025-06-03
1016France2025-06-18
1017France2025-05-31
1018Canada2025-05-25
1019Canada2025-05-29
1020Russia2025-06-06
1021Japan2025-05-27
1022Japan2025-05-24
1023United Kingdom2025-06-11
1024Brazil2025-06-16
1025France2025-06-19
1026Italy2025-06-16
1027France2025-06-10
1028India2025-05-30
1029Germany2025-06-11
1030Argentina2025-06-14
1031India2025-06-08
1032United Kingdom2025-05-26
1033Germany2025-06-16
1034Japan2025-06-13
1035France2025-06-19
1036Spain2025-06-17
1037Argentina2025-06-12
1038Argentina2025-06-06
1039United Kingdom2025-06-21
1040Russia2025-06-06
1041Argentina2025-06-01
1042Japan2025-05-31
1043Spain2025-06-10
1044Brazil2025-06-07
1045Brazil2025-05-31
1046Argentina2025-06-02
1047Australia2025-06-02
1048Argentina2025-06-02
1049Japan2025-06-03

On-Demand Data

NameIdCountryDate
James Butt1000Argentina2025-06-13
David Darakjy1001Australia2025-06-06
Izzy Garufi1002Australia2025-06-13
Kaitlin Ostrosky1003Italy2025-05-24
Deepesh Chui1004United Kingdom2025-06-13
Rodrigues Campain1005Australia2025-05-29
Salvatore Stockham1006Argentina2025-05-31
Clifford Rim1007Italy2025-05-25
Ivar Paprocki1008United Kingdom2025-06-10
Octavia Malet1009Canada2025-06-15
Salvatore Stockham1010Brazil2025-06-08
Stacey Maclead1011Germany2025-06-21
Ashley Doe1012United Kingdom2025-06-13
Juan Wieser1013Brazil2025-06-01
Octavia Malet1014Japan2025-06-15
Sinclair Waycott1015Spain2025-06-20
Johnson Sergi1016Germany2025-06-16
Munro Ferencz1017Argentina2025-06-12
Alejandro Perin1018India2025-06-05
Jeanfrancois Venere1019Australia2025-05-26
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeArgentinaAnna Fali RENEWAL
Mayumi KolmetzIndiaElwin Sharvill UNQUALIFIED
Rodrigues CampainArgentinaStephen Shaw NEW
Munro FerenczRussiaAmy Elsner PROPOSAL
Greenwood BologniaCanadaXuxue Feng NEW
Francesco ShinkoCanadaStephen Shaw NEW
James ButtJapanIoni Bowcher NEW
David DarakjySpainStephen Shaw RENEWAL
Ricardo GauchoGermanyIvan Magalhaes NEW
James ButtJapanBernardo Dominic UNQUALIFIED
Morrow RutaIndiaAnna Fali QUALIFIED
Costa DilliardItalyBernardo Dominic RENEWAL
Aditya KuskoUnited KingdomAnna Fali PROPOSAL
Claire TollnerCanadaAsiya Javayant NEGOTIATION
Aika InouyeGermanyAmy Elsner QUALIFIED
Arvin AlbaresIndiaStephen Shaw RENEWAL
Isabel BowleySpainIvan Magalhaes UNQUALIFIED
Emily WhobreyGermanyAsiya Javayant RENEWAL
Misaki RoysterUnited KingdomBernardo Dominic QUALIFIED
Salvatore StockhamBrazilStephen Shaw NEGOTIATION
Wickens NestleArgentinaAmy Elsner NEW
Jennifer AmigonSpainXuxue Feng NEW
Octavia MaletJapanIvan Magalhaes NEW
Smith GlickGermanyAsiya Javayant NEW
Chavez BriddickAustraliaXuxue Feng UNQUALIFIED
Leja CaldareraBrazilIoni Bowcher NEW
Julie StensethUnited KingdomOnyama Limba NEGOTIATION
Alejandro PerinIndiaXuxue Feng QUALIFIED
Octavia MaletArgentinaIvan Magalhaes QUALIFIED
Smith GlickBrazilStephen Shaw UNQUALIFIED
Izzy GarufiCanadaBernardo Dominic RENEWAL
Silvio SlusarskiFranceAsiya Javayant PROPOSAL
Darci PoquetteRussiaIoni Bowcher QUALIFIED
Johnson SergiIndiaOnyama Limba NEW
Jones VocelkaJapanIoni Bowcher PROPOSAL
Salvatore StockhamJapanIoni Bowcher NEGOTIATION
Johnson SergiGermanyStephen Shaw NEGOTIATION
Faith GillianBrazilBernardo Dominic NEGOTIATION
Antonio CaudyFranceElwin Sharvill NEW
Stacey MacleadCanadaAmy Elsner UNQUALIFIED

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