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
Ashley DoeSpainIvan Magalhaes NEGOTIATION
Leja CaldareraFranceBernardo Dominic NEW
Maria MarrierIndiaIoni Bowcher UNQUALIFIED
Clifford RimCanadaXuxue Feng PROPOSAL
Ricardo GauchoRussiaElwin Sharvill NEW
Nicolas IturbideFranceIvan Magalhaes NEW
Isabel BowleyCanadaXuxue Feng UNQUALIFIED
Maisha RulapaughUnited KingdomBernardo Dominic NEW
Adams MorascaGermanyAnna Fali NEGOTIATION
Munro FerenczFranceStephen Shaw NEW
Silvio SlusarskiCanadaAmy Elsner RENEWAL
Mayumi KolmetzUnited KingdomIvan Magalhaes NEW
Aditya KuskoBrazilXuxue Feng RENEWAL
Octavia MaletBrazilXuxue Feng NEGOTIATION
Antonio CaudyItalyIoni Bowcher UNQUALIFIED
Mujtaba NickaGermanyBernardo Dominic RENEWAL
Alejandro PerinArgentinaElwin Sharvill UNQUALIFIED
Murillo MaletSpainOnyama Limba NEW
Morrow RutaFranceBernardo Dominic PROPOSAL
Clifford RimSpainIoni Bowcher PROPOSAL
Adams MorascaAustraliaElwin Sharvill NEW
Aruna FigeroaRussiaAmy Elsner QUALIFIED
Chavez BriddickGermanyIvan Magalhaes NEW
James ButtUnited KingdomElwin Sharvill NEW
Kaitlin OstroskyRussiaIoni Bowcher PROPOSAL
Johnson SergiUnited KingdomOnyama Limba QUALIFIED
Kadeem FlosiBrazilOnyama Limba QUALIFIED
Maria MarrierGermanyXuxue Feng PROPOSAL
Cody SaylorsItalyOnyama Limba NEGOTIATION
Ivar PaprockiArgentinaIvan Magalhaes RENEWAL
Maria MarrierFranceAnna Fali RENEWAL
Aika InouyeCanadaAmy Elsner UNQUALIFIED
Leon OldroydCanadaStephen Shaw NEGOTIATION
Aika InouyeJapanXuxue Feng NEGOTIATION
Ricardo GauchoArgentinaIoni Bowcher RENEWAL
Jones VocelkaFranceOnyama Limba PROPOSAL
Salvatore StockhamJapanBernardo Dominic PROPOSAL
Nicolas IturbideSpainIoni Bowcher NEGOTIATION
Claire TollnerFranceAnna Fali PROPOSAL
Mayumi KolmetzBrazilAsiya Javayant QUALIFIED
Silvio SlusarskiBrazilAnna Fali QUALIFIED
Clifford RimSpainOnyama Limba QUALIFIED
Octavia MaletSpainAsiya Javayant NEGOTIATION
Johnson SergiIndiaOnyama Limba RENEWAL
Nicolas IturbideGermanyIvan Magalhaes PROPOSAL
Ashley DoeItalyOnyama Limba QUALIFIED
Aditya KuskoSpainIoni Bowcher UNQUALIFIED
Rodrigues CampainArgentinaIvan Magalhaes QUALIFIED
Leon OldroydSpainBernardo Dominic RENEWAL
Costa DilliardCanadaIoni Bowcher NEW
Horizontal
NameCountryRepresentativeStatus
Wickens NestleItalyElwin Sharvill NEGOTIATION
Johnson SergiGermanyIvan Magalhaes QUALIFIED
Ashley DoeSpainBernardo Dominic UNQUALIFIED
Kaitlin OstroskyRussiaOnyama Limba NEW
Octavia MaletIndiaBernardo Dominic NEW
Silvio SlusarskiJapanElwin Sharvill NEGOTIATION
David DarakjySpainStephen Shaw NEW
Ivar PaprockiGermanyXuxue Feng NEW
Mujtaba NickaCanadaXuxue Feng PROPOSAL
James ButtItalyAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyCanada2026-04-18Dorl, James J Esq RENEWAL23Bernardo Dominic
1001Jones VocelkaItaly2026-04-24Rangoni Of Florence NEGOTIATION72Stephen Shaw
1002Jefferson SchemmerBrazil2026-04-24Morlong Associates UNQUALIFIED66Ivan Magalhaes
1003Aika InouyeUnited Kingdom2026-04-19Buckley Miller Wright RENEWAL81Anna Fali
1004James ButtFrance2026-04-09Buckley Miller Wright QUALIFIED92Asiya Javayant
1005Emily WhobreyUnited Kingdom2026-04-06Chemel, James L Cpa PROPOSAL83Amy Elsner
1006Deepesh ChuiRussia2026-04-17Buckley Miller Wright PROPOSAL56Amy Elsner
1007Jefferson SchemmerBrazil2026-04-28Commercial Press QUALIFIED74Amy Elsner
1008Jefferson SchemmerJapan2026-04-06Chapman, Ross E Esq QUALIFIED77Elwin Sharvill
1009Munro FerenczGermany2026-04-17Rangoni Of Florence NEGOTIATION47Ioni Bowcher
1010Nicolas IturbideFrance2026-04-03Chemel, James L Cpa PROPOSAL60Xuxue Feng
1011Stacey MacleadAustralia2026-04-23Morlong Associates QUALIFIED5Ivan Magalhaes
1012Leon OldroydJapan2026-04-17Feiner Bros UNQUALIFIED61Ioni Bowcher
1013Darci PoquetteFrance2026-04-16Chemel, James L Cpa UNQUALIFIED27Elwin Sharvill
1014David DarakjyArgentina2026-04-21Truhlar And Truhlar Attys NEW32Ioni Bowcher
1015Leja CaldareraIndia2026-04-11Feiner Bros NEW78Xuxue Feng
1016Isabel BowleyGermany2026-04-30Printing Dimensions NEW63Anna Fali
1017Chavez BriddickGermany2026-04-08Chapman, Ross E Esq NEW84Stephen Shaw
1018Salvatore StockhamCanada2026-04-10Dorl, James J Esq RENEWAL40Bernardo Dominic
1019Antonio CaudyCanada2026-04-28Chemel, James L Cpa PROPOSAL32Ivan Magalhaes
1020Maisha RulapaughItaly2026-04-04Dorl, James J Esq QUALIFIED81Amy Elsner
1021Julie StensethGermany2026-05-02Benton, John B Jr RENEWAL26Asiya Javayant
1022Antonio CaudyCanada2026-04-16Dorl, James J Esq UNQUALIFIED62Ioni Bowcher
1023Isabel BowleyAustralia2026-04-28Rangoni Of Florence UNQUALIFIED81Anna Fali
1024Adams MorascaGermany2026-04-19King, Christopher A Esq PROPOSAL2Asiya Javayant
1025Tony FollerSpain2026-04-23Dorl, James J Esq QUALIFIED44Ivan Magalhaes
1026Darci PoquetteFrance2026-04-22Truhlar And Truhlar Attys RENEWAL20Anna Fali
1027Morrow RutaFrance2026-04-21Chapman, Ross E Esq PROPOSAL4Onyama Limba
1028Costa DilliardUnited Kingdom2026-04-19King, Christopher A Esq NEGOTIATION32Ivan Magalhaes
1029Leon OldroydJapan2026-04-14Morlong Associates NEGOTIATION50Bernardo Dominic
1030Jefferson SchemmerCanada2026-04-17Commercial Press PROPOSAL64Bernardo Dominic
1031Nicolas IturbideGermany2026-04-14Feiner Bros UNQUALIFIED81Onyama Limba
1032Jennifer AmigonItaly2026-04-25Feiner Bros UNQUALIFIED65Asiya Javayant
1033David DarakjyAustralia2026-05-02Chapman, Ross E Esq RENEWAL39Ioni Bowcher
1034Francesco ShinkoJapan2026-04-17Morlong Associates RENEWAL95Stephen Shaw
1035James ButtBrazil2026-04-27Commercial Press RENEWAL97Amy Elsner
1036Ricardo GauchoGermany2026-04-13Rangoni Of Florence NEGOTIATION88Anna Fali
1037Ashley DoeAustralia2026-04-07Chemel, James L Cpa NEW47Stephen Shaw
1038Juan WieserUnited Kingdom2026-04-27Truhlar And Truhlar Attys QUALIFIED65Elwin Sharvill
1039Jefferson SchemmerItaly2026-04-08Feltz Printing Service UNQUALIFIED92Asiya Javayant
1040Tony FollerGermany2026-04-30Buckley Miller Wright NEW44Xuxue Feng
1041Arvin AlbaresFrance2026-04-09Chanay, Jeffrey A Esq NEW28Xuxue Feng
1042Izzy GarufiItaly2026-04-21Buckley Miller Wright QUALIFIED7Xuxue Feng
1043Wickens NestleBrazil2026-04-15Feiner Bros QUALIFIED50Amy Elsner
1044Sinclair WaycottGermany2026-04-27Feiner Bros PROPOSAL69Ioni Bowcher
1045Maria MarrierAustralia2026-05-02Rangoni Of Florence RENEWAL81Onyama Limba
1046Johnson SergiBrazil2026-04-16King, Christopher A Esq PROPOSAL71Elwin Sharvill
1047Johnson SergiSpain2026-04-22Rangoni Of Florence NEGOTIATION14Ivan Magalhaes
1048Jefferson SchemmerCanada2026-04-12Morlong Associates NEGOTIATION76Anna Fali
1049Smith GlickGermany2026-04-07King, Christopher A Esq NEGOTIATION65Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Jones VocelkaRussiaAnna Fali PROPOSAL
Jennifer AmigonAustraliaAsiya Javayant NEW
Deepesh ChuiItalyOnyama Limba RENEWAL
Jones VocelkaUnited KingdomElwin Sharvill PROPOSAL
Nicolas IturbideSpainStephen Shaw NEW
Kaitlin OstroskyFranceIvan Magalhaes UNQUALIFIED
Ashley DoeBrazilXuxue Feng RENEWAL
Juan WieserRussiaIoni Bowcher NEGOTIATION
Jeanfrancois VenereItalyAnna Fali UNQUALIFIED
Antonio CaudyJapanIvan Magalhaes NEW
Stacey MacleadIndiaBernardo Dominic NEW
Jennifer AmigonBrazilOnyama Limba RENEWAL
Johnson SergiItalyIvan Magalhaes NEW
Greenwood BologniaSpainIoni Bowcher PROPOSAL
Mujtaba NickaCanadaAmy Elsner UNQUALIFIED
Stacey MacleadItalyXuxue Feng UNQUALIFIED
Cody SaylorsItalyAmy Elsner NEW
Chavez BriddickBrazilAsiya Javayant NEW
Octavia MaletBrazilBernardo Dominic QUALIFIED
Ricardo GauchoUnited KingdomIoni Bowcher UNQUALIFIED
Izzy GarufiFranceXuxue Feng NEW
Aditya KuskoArgentinaAsiya Javayant PROPOSAL
Mayumi KolmetzFranceStephen Shaw QUALIFIED
Deepesh ChuiGermanyIoni Bowcher RENEWAL
Francesco ShinkoArgentinaElwin Sharvill PROPOSAL
Arvin AlbaresSpainAsiya Javayant QUALIFIED
Cody SaylorsJapanAmy Elsner QUALIFIED
Jones VocelkaSpainIvan Magalhaes QUALIFIED
David DarakjyAustraliaElwin Sharvill RENEWAL
Murillo MaletGermanyBernardo Dominic QUALIFIED
Jennifer AmigonItalyAsiya Javayant UNQUALIFIED
Wickens NestleRussiaIvan Magalhaes QUALIFIED
Alejandro PerinBrazilIoni Bowcher QUALIFIED
Mayumi KolmetzJapanElwin Sharvill NEW
Silvio SlusarskiUnited KingdomAsiya Javayant RENEWAL
Tony FollerArgentinaOnyama Limba NEW
Jefferson SchemmerRussiaBernardo Dominic RENEWAL
Silvio SlusarskiJapanBernardo Dominic UNQUALIFIED
Silvio SlusarskiRussiaXuxue Feng UNQUALIFIED
Deepesh ChuiIndiaStephen Shaw UNQUALIFIED
Maisha RulapaughAustraliaStephen Shaw NEGOTIATION
Cody SaylorsBrazilBernardo Dominic NEGOTIATION
Maria MarrierItalyOnyama Limba QUALIFIED
Clifford RimGermanyAmy Elsner RENEWAL
Leja CaldareraCanadaIvan Magalhaes NEW
Antonio CaudyCanadaIvan Magalhaes NEW
Jennifer AmigonFranceXuxue Feng RENEWAL
Leon OldroydRussiaIvan Magalhaes RENEWAL
Wickens NestleCanadaXuxue Feng PROPOSAL
Rodrigues CampainSpainStephen Shaw UNQUALIFIED
Frozen Columns
Name
Julie Stenseth
Kadeem Flosi
Murillo Malet
Jones Vocelka
Stacey Maclead
Johnson Sergi
Maria Marrier
Maisha Rulapaugh
Stacey Maclead
Wickens Nestle
Darci Poquette
Ivar Paprocki
Costa Dilliard
Clifford Rim
Rodrigues Campain
Greenwood Bolognia
Tony Foller
Claire Tollner
Ashley Doe
Smith Glick
Johnson Sergi
Greenwood Bolognia
Leon Oldroyd
Arvin Albares
Francesco Shinko
James Butt
Faith Gillian
David Darakjy
Aika Inouye
Jefferson Schemmer
Adams Morasca
Silvio Slusarski
Mujtaba Nicka
Claire Tollner
Stacey Maclead
Misaki Royster
Isabel Bowley
Izzy Garufi
Greenwood Bolognia
Deepesh Chui
Leon Oldroyd
Aika Inouye
Wickens Nestle
Arvin Albares
Ashley Doe
Claire Tollner
Maria Marrier
Sinclair Waycott
Juan Wieser
Deepesh Chui
IdCountryDate
1000Spain2026-04-03
1001Italy2026-04-19
1002Argentina2026-04-22
1003France2026-04-09
1004Italy2026-04-28
1005Spain2026-04-15
1006France2026-04-29
1007Spain2026-04-10
1008Russia2026-04-19
1009Japan2026-04-23
1010Germany2026-04-19
1011Russia2026-04-22
1012Spain2026-04-18
1013Argentina2026-04-15
1014Canada2026-04-30
1015Germany2026-04-30
1016Brazil2026-04-28
1017Germany2026-04-13
1018India2026-04-22
1019India2026-04-20
1020Germany2026-04-11
1021United Kingdom2026-04-13
1022Japan2026-04-04
1023Japan2026-04-21
1024Japan2026-04-03
1025Russia2026-04-24
1026India2026-04-28
1027Canada2026-04-21
1028Germany2026-04-20
1029India2026-04-07
1030Brazil2026-04-26
1031Germany2026-04-26
1032Russia2026-04-13
1033Argentina2026-05-01
1034Spain2026-04-19
1035France2026-04-26
1036United Kingdom2026-04-23
1037Germany2026-04-11
1038Brazil2026-04-21
1039Australia2026-04-25
1040Germany2026-04-07
1041Spain2026-04-06
1042United Kingdom2026-04-23
1043Australia2026-04-11
1044Argentina2026-04-16
1045Brazil2026-04-03
1046India2026-04-30
1047France2026-04-21
1048Australia2026-04-04
1049United Kingdom2026-04-24

On-Demand Data

NameIdCountryDate
Faith Gillian1000Russia2026-04-15
Francesco Shinko1001Canada2026-04-11
Cody Saylors1002Australia2026-04-03
Clifford Rim1003Argentina2026-04-17
Jeanfrancois Venere1004Spain2026-04-30
Clifford Rim1005India2026-04-17
Clifford Rim1006Canada2026-04-28
Kadeem Flosi1007United Kingdom2026-04-13
Nicolas Iturbide1008Japan2026-04-06
Jeanfrancois Venere1009Spain2026-04-22
Aika Inouye1010Argentina2026-04-21
Aditya Kusko1011Argentina2026-04-06
Jones Vocelka1012Italy2026-04-11
Nicolas Iturbide1013Russia2026-04-12
Murillo Malet1014Japan2026-04-16
Greenwood Bolognia1015Spain2026-04-27
Tony Foller1016Canada2026-05-02
Rodrigues Campain1017Canada2026-04-10
Octavia Malet1018India2026-04-04
Faith Gillian1019Argentina2026-04-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Emily WhobreyItalyAmy Elsner UNQUALIFIED
Ricardo GauchoCanadaAnna Fali QUALIFIED
Murillo MaletCanadaElwin Sharvill UNQUALIFIED
Emily WhobreyGermanyBernardo Dominic PROPOSAL
Ricardo GauchoJapanElwin Sharvill UNQUALIFIED
Ricardo GauchoRussiaBernardo Dominic UNQUALIFIED
Kaitlin OstroskyUnited KingdomElwin Sharvill RENEWAL
Stacey MacleadBrazilIoni Bowcher RENEWAL
Juan WieserIndiaBernardo Dominic NEGOTIATION
Aika InouyeBrazilIoni Bowcher NEGOTIATION
Leon OldroydUnited KingdomStephen Shaw RENEWAL
Stacey MacleadUnited KingdomOnyama Limba RENEWAL
Clifford RimSpainIvan Magalhaes NEW
Ivar PaprockiUnited KingdomOnyama Limba RENEWAL
Kaitlin OstroskyUnited KingdomXuxue Feng RENEWAL
Tony FollerArgentinaAnna Fali NEGOTIATION
Maisha RulapaughGermanyAnna Fali QUALIFIED
Izzy GarufiBrazilIvan Magalhaes PROPOSAL
Claire TollnerIndiaElwin Sharvill NEGOTIATION
Chavez BriddickUnited KingdomIoni Bowcher NEGOTIATION
Misaki RoysterUnited KingdomStephen Shaw UNQUALIFIED
Julie StensethAustraliaAnna Fali UNQUALIFIED
Alejandro PerinIndiaIoni Bowcher QUALIFIED
Costa DilliardFranceAmy Elsner PROPOSAL
Leon OldroydSpainBernardo Dominic QUALIFIED
Maisha RulapaughArgentinaOnyama Limba QUALIFIED
Aditya KuskoIndiaAsiya Javayant RENEWAL
Ivar PaprockiItalyAmy Elsner RENEWAL
Jeanfrancois VenereRussiaElwin Sharvill NEW
Ashley DoeFranceBernardo Dominic PROPOSAL
Isabel BowleyFranceAmy Elsner QUALIFIED
Salvatore StockhamJapanIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereJapanBernardo Dominic RENEWAL
Isabel BowleyAustraliaXuxue Feng UNQUALIFIED
Isabel BowleyFranceBernardo Dominic QUALIFIED
Adams MorascaIndiaStephen Shaw NEGOTIATION
Morrow RutaBrazilAsiya Javayant NEGOTIATION
Wickens NestleCanadaXuxue Feng PROPOSAL
Isabel BowleyUnited KingdomStephen Shaw NEGOTIATION
Darci PoquetteUnited KingdomIvan Magalhaes 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>