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
Adams MorascaGermanyElwin Sharvill NEGOTIATION
Silvio SlusarskiJapanAnna Fali RENEWAL
Kadeem FlosiItalyElwin Sharvill NEW
Smith GlickFranceBernardo Dominic NEW
Antonio CaudyCanadaElwin Sharvill RENEWAL
Maisha RulapaughBrazilBernardo Dominic RENEWAL
Johnson SergiGermanyAsiya Javayant UNQUALIFIED
Ivar PaprockiBrazilXuxue Feng QUALIFIED
Ashley DoeRussiaIoni Bowcher UNQUALIFIED
Jennifer AmigonItalyBernardo Dominic RENEWAL
Aruna FigeroaFranceStephen Shaw UNQUALIFIED
Aditya KuskoCanadaOnyama Limba PROPOSAL
Isabel BowleyIndiaAsiya Javayant QUALIFIED
Maria MarrierGermanyAmy Elsner UNQUALIFIED
Deepesh ChuiBrazilStephen Shaw QUALIFIED
Greenwood BologniaBrazilBernardo Dominic NEW
Cody SaylorsCanadaAmy Elsner PROPOSAL
David DarakjyIndiaAmy Elsner QUALIFIED
Leon OldroydRussiaIvan Magalhaes NEW
Juan WieserBrazilElwin Sharvill RENEWAL
Aika InouyeBrazilAsiya Javayant QUALIFIED
Ashley DoeRussiaStephen Shaw NEGOTIATION
Misaki RoysterUnited KingdomAmy Elsner UNQUALIFIED
Sinclair WaycottBrazilIoni Bowcher UNQUALIFIED
Costa DilliardCanadaAnna Fali QUALIFIED
Ashley DoeRussiaXuxue Feng UNQUALIFIED
Murillo MaletSpainElwin Sharvill PROPOSAL
Francesco ShinkoItalyAsiya Javayant UNQUALIFIED
Alejandro PerinArgentinaBernardo Dominic QUALIFIED
Ricardo GauchoFranceAnna Fali NEGOTIATION
Francesco ShinkoArgentinaAnna Fali PROPOSAL
Leon OldroydUnited KingdomIvan Magalhaes UNQUALIFIED
Greenwood BologniaCanadaAsiya Javayant NEW
Murillo MaletFranceAmy Elsner NEW
Greenwood BologniaUnited KingdomAmy Elsner NEW
Wickens NestleBrazilElwin Sharvill PROPOSAL
Ivar PaprockiGermanyStephen Shaw QUALIFIED
Ashley DoeGermanyXuxue Feng PROPOSAL
Antonio CaudyBrazilAmy Elsner RENEWAL
Maisha RulapaughRussiaAsiya Javayant UNQUALIFIED
Aika InouyeRussiaBernardo Dominic NEGOTIATION
Chavez BriddickSpainAnna Fali PROPOSAL
Aika InouyeAustraliaOnyama Limba QUALIFIED
Salvatore StockhamBrazilAmy Elsner NEW
Kadeem FlosiSpainAnna Fali QUALIFIED
Arvin AlbaresFranceAsiya Javayant NEW
Octavia MaletGermanyIoni Bowcher RENEWAL
Jeanfrancois VenereBrazilElwin Sharvill PROPOSAL
Munro FerenczCanadaXuxue Feng NEW
Ricardo GauchoUnited KingdomAsiya Javayant QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiBrazilAnna Fali NEW
Adams MorascaAustraliaElwin Sharvill NEGOTIATION
Kaitlin OstroskyArgentinaAnna Fali NEGOTIATION
Ricardo GauchoRussiaAsiya Javayant QUALIFIED
Maria MarrierIndiaAmy Elsner RENEWAL
Wickens NestleItalyXuxue Feng NEW
Leon OldroydJapanAmy Elsner QUALIFIED
Stacey MacleadUnited KingdomElwin Sharvill NEGOTIATION
Claire TollnerIndiaBernardo Dominic NEGOTIATION
Antonio CaudySpainAsiya Javayant QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottAustralia2025-09-02Rangoni Of Florence RENEWAL42Stephen Shaw
1001Johnson SergiBrazil2025-08-11Commercial Press NEGOTIATION9Ivan Magalhaes
1002Julie StensethItaly2025-08-31Truhlar And Truhlar Attys UNQUALIFIED79Ioni Bowcher
1003Munro FerenczGermany2025-08-26King, Christopher A Esq QUALIFIED4Onyama Limba
1004Chavez BriddickArgentina2025-08-18Feltz Printing Service NEW42Amy Elsner
1005Smith GlickFrance2025-08-11Benton, John B Jr UNQUALIFIED22Anna Fali
1006Ricardo GauchoRussia2025-09-02Feiner Bros QUALIFIED80Ioni Bowcher
1007Tony FollerAustralia2025-08-20King, Christopher A Esq PROPOSAL39Asiya Javayant
1008Rodrigues CampainBrazil2025-08-27Rangoni Of Florence PROPOSAL15Ioni Bowcher
1009Misaki RoysterAustralia2025-08-09Feltz Printing Service QUALIFIED76Asiya Javayant
1010Darci PoquetteUnited Kingdom2025-09-02Rangoni Of Florence NEW62Amy Elsner
1011David DarakjyAustralia2025-08-17Feiner Bros PROPOSAL38Asiya Javayant
1012Faith GillianBrazil2025-08-30Feltz Printing Service UNQUALIFIED94Anna Fali
1013Aditya KuskoGermany2025-08-31Chapman, Ross E Esq QUALIFIED23Xuxue Feng
1014Mujtaba NickaJapan2025-08-19Feltz Printing Service RENEWAL22Asiya Javayant
1015Ashley DoeArgentina2025-09-05Chanay, Jeffrey A Esq QUALIFIED50Stephen Shaw
1016Mayumi KolmetzRussia2025-08-09Buckley Miller Wright NEW82Xuxue Feng
1017Jones VocelkaBrazil2025-08-16Chemel, James L Cpa RENEWAL64Stephen Shaw
1018Tony FollerArgentina2025-08-28Buckley Miller Wright PROPOSAL55Elwin Sharvill
1019Antonio CaudyGermany2025-08-22Benton, John B Jr NEGOTIATION34Elwin Sharvill
1020Antonio CaudyFrance2025-08-29Commercial Press QUALIFIED20Stephen Shaw
1021Julie StensethCanada2025-08-27King, Christopher A Esq QUALIFIED48Anna Fali
1022Maisha RulapaughRussia2025-08-28Feltz Printing Service RENEWAL53Onyama Limba
1023Munro FerenczUnited Kingdom2025-08-11King, Christopher A Esq PROPOSAL37Amy Elsner
1024Arvin AlbaresBrazil2025-08-13Chapman, Ross E Esq UNQUALIFIED3Ioni Bowcher
1025Leon OldroydItaly2025-08-31Buckley Miller Wright NEGOTIATION48Ioni Bowcher
1026Morrow RutaIndia2025-09-04Commercial Press QUALIFIED17Asiya Javayant
1027Isabel BowleyArgentina2025-08-22Rangoni Of Florence PROPOSAL87Ioni Bowcher
1028Morrow RutaBrazil2025-08-31Commercial Press PROPOSAL49Elwin Sharvill
1029Ashley DoeArgentina2025-08-09Truhlar And Truhlar Attys RENEWAL12Onyama Limba
1030Octavia MaletFrance2025-08-28Printing Dimensions NEW43Ivan Magalhaes
1031Stacey MacleadJapan2025-08-10Feltz Printing Service NEGOTIATION9Xuxue Feng
1032Leja CaldareraJapan2025-08-16Rangoni Of Florence UNQUALIFIED77Ivan Magalhaes
1033Munro FerenczGermany2025-08-17Rangoni Of Florence RENEWAL29Elwin Sharvill
1034Leon OldroydJapan2025-08-10Rousseaux, Michael Esq NEW3Ivan Magalhaes
1035Silvio SlusarskiUnited Kingdom2025-08-19Benton, John B Jr QUALIFIED75Amy Elsner
1036Izzy GarufiAustralia2025-08-25King, Christopher A Esq UNQUALIFIED24Ivan Magalhaes
1037Aruna FigeroaSpain2025-08-10Feltz Printing Service RENEWAL97Stephen Shaw
1038Smith GlickIndia2025-08-30Chapman, Ross E Esq QUALIFIED39Ivan Magalhaes
1039Mujtaba NickaItaly2025-08-17Chanay, Jeffrey A Esq QUALIFIED21Anna Fali
1040Cody SaylorsSpain2025-08-27Benton, John B Jr RENEWAL11Stephen Shaw
1041Faith GillianBrazil2025-08-31Rousseaux, Michael Esq QUALIFIED33Ivan Magalhaes
1042Wickens NestleItaly2025-08-16Dorl, James J Esq UNQUALIFIED55Xuxue Feng
1043Kaitlin OstroskyUnited Kingdom2025-08-16Chanay, Jeffrey A Esq QUALIFIED28Xuxue Feng
1044Claire TollnerCanada2025-08-17Rousseaux, Michael Esq NEW37Onyama Limba
1045Emily WhobreyJapan2025-08-23Buckley Miller Wright NEW19Ioni Bowcher
1046Antonio CaudyIndia2025-09-05King, Christopher A Esq QUALIFIED25Anna Fali
1047Adams MorascaFrance2025-08-09Buckley Miller Wright QUALIFIED29Onyama Limba
1048Jeanfrancois VenereItaly2025-09-02Chapman, Ross E Esq RENEWAL68Xuxue Feng
1049Tony FollerUnited Kingdom2025-08-17Commercial Press PROPOSAL60Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereGermanyXuxue Feng PROPOSAL
Isabel BowleyUnited KingdomElwin Sharvill QUALIFIED
Leja CaldareraFranceIvan Magalhaes NEW
Izzy GarufiJapanAmy Elsner PROPOSAL
Izzy GarufiCanadaBernardo Dominic PROPOSAL
Jefferson SchemmerGermanyAnna Fali NEW
Chavez BriddickBrazilIvan Magalhaes PROPOSAL
Leon OldroydAustraliaAsiya Javayant NEGOTIATION
Alejandro PerinRussiaIvan Magalhaes QUALIFIED
Jennifer AmigonItalyAmy Elsner NEW
Julie StensethItalyAnna Fali NEGOTIATION
Sinclair WaycottJapanOnyama Limba QUALIFIED
Morrow RutaGermanyIoni Bowcher NEW
Maria MarrierGermanyAsiya Javayant PROPOSAL
Johnson SergiCanadaIoni Bowcher NEGOTIATION
Francesco ShinkoRussiaIvan Magalhaes NEW
Mayumi KolmetzItalyOnyama Limba RENEWAL
Ashley DoeGermanyElwin Sharvill NEGOTIATION
Arvin AlbaresJapanXuxue Feng RENEWAL
Chavez BriddickIndiaIoni Bowcher NEW
Octavia MaletIndiaAmy Elsner QUALIFIED
Kadeem FlosiAustraliaElwin Sharvill NEW
Arvin AlbaresCanadaBernardo Dominic RENEWAL
Jones VocelkaAustraliaAmy Elsner RENEWAL
Arvin AlbaresFranceOnyama Limba RENEWAL
Jones VocelkaItalyAsiya Javayant NEGOTIATION
Johnson SergiItalyIoni Bowcher PROPOSAL
Aika InouyeIndiaStephen Shaw PROPOSAL
Silvio SlusarskiIndiaStephen Shaw NEGOTIATION
Aditya KuskoRussiaAmy Elsner UNQUALIFIED
Silvio SlusarskiIndiaBernardo Dominic UNQUALIFIED
Emily WhobreyFranceAsiya Javayant PROPOSAL
Chavez BriddickFranceIoni Bowcher QUALIFIED
Aditya KuskoGermanyOnyama Limba UNQUALIFIED
Tony FollerSpainAnna Fali UNQUALIFIED
Morrow RutaAustraliaStephen Shaw NEW
Isabel BowleyArgentinaAmy Elsner RENEWAL
Octavia MaletArgentinaIoni Bowcher QUALIFIED
Arvin AlbaresUnited KingdomXuxue Feng RENEWAL
Greenwood BologniaGermanyElwin Sharvill PROPOSAL
Rodrigues CampainRussiaAmy Elsner NEGOTIATION
Ivar PaprockiJapanBernardo Dominic NEW
Deepesh ChuiArgentinaBernardo Dominic NEW
Jones VocelkaIndiaAnna Fali UNQUALIFIED
Faith GillianCanadaStephen Shaw UNQUALIFIED
Sinclair WaycottIndiaAnna Fali QUALIFIED
Jennifer AmigonGermanyOnyama Limba PROPOSAL
Antonio CaudyBrazilAnna Fali NEGOTIATION
Tony FollerArgentinaBernardo Dominic PROPOSAL
Antonio CaudyItalyBernardo Dominic QUALIFIED
Frozen Columns
Name
David Darakjy
Ivar Paprocki
Wickens Nestle
Julie Stenseth
Munro Ferencz
Sinclair Waycott
Claire Tollner
Francesco Shinko
James Butt
Ivar Paprocki
Munro Ferencz
Alejandro Perin
Aditya Kusko
Mujtaba Nicka
Arvin Albares
Emily Whobrey
Darci Poquette
Jefferson Schemmer
Adams Morasca
Kaitlin Ostrosky
Wickens Nestle
Aruna Figeroa
Greenwood Bolognia
Greenwood Bolognia
Murillo Malet
Wickens Nestle
Adams Morasca
Morrow Ruta
Tony Foller
Salvatore Stockham
Kaitlin Ostrosky
Morrow Ruta
Juan Wieser
James Butt
Claire Tollner
Greenwood Bolognia
Costa Dilliard
Silvio Slusarski
Juan Wieser
Ivar Paprocki
Costa Dilliard
Mayumi Kolmetz
Stacey Maclead
Stacey Maclead
Costa Dilliard
Aika Inouye
Smith Glick
Munro Ferencz
Rodrigues Campain
Munro Ferencz
IdCountryDate
1000Argentina2025-09-04
1001Japan2025-08-21
1002India2025-09-02
1003Australia2025-08-26
1004Japan2025-08-21
1005Japan2025-09-04
1006Japan2025-08-16
1007Japan2025-09-06
1008Canada2025-08-21
1009Spain2025-08-22
1010Australia2025-09-01
1011India2025-08-09
1012Brazil2025-09-03
1013Canada2025-08-08
1014Italy2025-09-04
1015Spain2025-09-03
1016United Kingdom2025-08-21
1017Australia2025-08-22
1018France2025-08-12
1019Japan2025-08-28
1020Australia2025-08-12
1021Japan2025-09-01
1022Russia2025-08-31
1023Russia2025-09-01
1024Australia2025-08-23
1025Australia2025-08-27
1026France2025-08-16
1027Italy2025-08-18
1028India2025-08-08
1029Japan2025-09-01
1030Argentina2025-08-16
1031Canada2025-09-05
1032Italy2025-08-23
1033Germany2025-08-16
1034United Kingdom2025-08-19
1035United Kingdom2025-09-02
1036Germany2025-08-18
1037Russia2025-09-06
1038Argentina2025-08-23
1039Germany2025-09-02
1040Japan2025-08-28
1041Russia2025-08-20
1042Spain2025-09-03
1043Spain2025-09-01
1044Germany2025-08-23
1045Spain2025-09-05
1046Japan2025-08-10
1047Argentina2025-09-02
1048Argentina2025-09-06
1049France2025-08-14

On-Demand Data

NameIdCountryDate
Adams Morasca1000Canada2025-08-28
Kaitlin Ostrosky1001Canada2025-08-13
Greenwood Bolognia1002Japan2025-08-19
Morrow Ruta1003United Kingdom2025-08-08
Claire Tollner1004France2025-08-11
Kadeem Flosi1005India2025-08-24
Jeanfrancois Venere1006France2025-08-27
Claire Tollner1007Japan2025-08-14
Misaki Royster1008Brazil2025-08-16
Mujtaba Nicka1009United Kingdom2025-08-15
Jefferson Schemmer1010Argentina2025-08-16
Octavia Malet1011Australia2025-08-08
Izzy Garufi1012Spain2025-08-31
Jennifer Amigon1013Canada2025-08-11
Leon Oldroyd1014France2025-08-24
Julie Stenseth1015Argentina2025-09-02
Jones Vocelka1016Canada2025-09-04
Morrow Ruta1017Germany2025-08-14
Morrow Ruta1018Canada2025-08-16
Rodrigues Campain1019Brazil2025-08-16
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerJapanAsiya Javayant RENEWAL
Claire TollnerSpainAsiya Javayant RENEWAL
Chavez BriddickFranceAmy Elsner UNQUALIFIED
Johnson SergiCanadaStephen Shaw RENEWAL
Isabel BowleyItalyOnyama Limba NEW
Jennifer AmigonFranceOnyama Limba RENEWAL
Jones VocelkaIndiaIvan Magalhaes QUALIFIED
Alejandro PerinArgentinaXuxue Feng NEGOTIATION
Mujtaba NickaItalyIoni Bowcher QUALIFIED
Chavez BriddickIndiaOnyama Limba RENEWAL
Antonio CaudyGermanyAnna Fali NEGOTIATION
Octavia MaletBrazilXuxue Feng QUALIFIED
Maria MarrierFranceAnna Fali QUALIFIED
Antonio CaudyJapanElwin Sharvill QUALIFIED
Jones VocelkaFranceOnyama Limba NEGOTIATION
Leon OldroydBrazilAmy Elsner NEW
Cody SaylorsBrazilElwin Sharvill NEGOTIATION
Francesco ShinkoUnited KingdomAnna Fali NEGOTIATION
Aika InouyeIndiaOnyama Limba NEW
James ButtFranceElwin Sharvill NEW
Adams MorascaCanadaIoni Bowcher UNQUALIFIED
Clifford RimFranceElwin Sharvill RENEWAL
Misaki RoysterFranceAsiya Javayant QUALIFIED
Tony FollerArgentinaAmy Elsner UNQUALIFIED
Leja CaldareraIndiaXuxue Feng NEW
Claire TollnerSpainIvan Magalhaes PROPOSAL
Izzy GarufiCanadaStephen Shaw QUALIFIED
Clifford RimAustraliaOnyama Limba QUALIFIED
Kadeem FlosiJapanAmy Elsner RENEWAL
Greenwood BologniaRussiaStephen Shaw PROPOSAL
Maisha RulapaughSpainBernardo Dominic RENEWAL
Jones VocelkaRussiaAmy Elsner RENEWAL
Munro FerenczArgentinaAnna Fali PROPOSAL
Emily WhobreyAustraliaAsiya Javayant NEGOTIATION
Ivar PaprockiAustraliaAsiya Javayant PROPOSAL
Leja CaldareraBrazilAmy Elsner QUALIFIED
Julie StensethGermanyAmy Elsner NEGOTIATION
Jones VocelkaUnited KingdomOnyama Limba NEGOTIATION
Jones VocelkaAustraliaIvan Magalhaes UNQUALIFIED
Costa DilliardArgentinaXuxue Feng 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>