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
Jones VocelkaCanadaAmy Elsner QUALIFIED
Ricardo GauchoIndiaAnna Fali UNQUALIFIED
Francesco ShinkoIndiaOnyama Limba RENEWAL
Mujtaba NickaFranceAnna Fali UNQUALIFIED
Nicolas IturbideBrazilIvan Magalhaes UNQUALIFIED
Izzy GarufiUnited KingdomIvan Magalhaes NEW
Deepesh ChuiIndiaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereIndiaStephen Shaw QUALIFIED
Mayumi KolmetzIndiaIoni Bowcher UNQUALIFIED
Greenwood BologniaUnited KingdomOnyama Limba NEW
Jefferson SchemmerBrazilBernardo Dominic QUALIFIED
Kaitlin OstroskyItalyElwin Sharvill UNQUALIFIED
Emily WhobreyAustraliaAsiya Javayant PROPOSAL
Aruna FigeroaBrazilAsiya Javayant RENEWAL
Ricardo GauchoFranceXuxue Feng PROPOSAL
Sinclair WaycottIndiaOnyama Limba UNQUALIFIED
Arvin AlbaresJapanElwin Sharvill PROPOSAL
Mayumi KolmetzArgentinaIvan Magalhaes QUALIFIED
Silvio SlusarskiAustraliaBernardo Dominic RENEWAL
Mujtaba NickaItalyStephen Shaw NEW
Izzy GarufiRussiaIvan Magalhaes QUALIFIED
Tony FollerFranceAsiya Javayant UNQUALIFIED
Mujtaba NickaCanadaOnyama Limba PROPOSAL
Cody SaylorsCanadaAsiya Javayant UNQUALIFIED
Alejandro PerinFranceOnyama Limba NEW
Aruna FigeroaIndiaAsiya Javayant UNQUALIFIED
Ivar PaprockiSpainAsiya Javayant RENEWAL
Clifford RimCanadaStephen Shaw UNQUALIFIED
Cody SaylorsFranceAmy Elsner RENEWAL
Misaki RoysterIndiaAnna Fali RENEWAL
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Alejandro PerinAustraliaOnyama Limba NEW
Costa DilliardAustraliaIoni Bowcher NEGOTIATION
David DarakjyFranceAmy Elsner RENEWAL
Rodrigues CampainCanadaAmy Elsner QUALIFIED
Smith GlickFranceAsiya Javayant PROPOSAL
Octavia MaletUnited KingdomIoni Bowcher QUALIFIED
Faith GillianSpainAsiya Javayant QUALIFIED
Jeanfrancois VenereSpainAmy Elsner NEGOTIATION
Jeanfrancois VenereGermanyIvan Magalhaes UNQUALIFIED
Emily WhobreyBrazilIoni Bowcher NEW
Emily WhobreyGermanyStephen Shaw PROPOSAL
Darci PoquetteIndiaIvan Magalhaes NEGOTIATION
Arvin AlbaresJapanAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinIndiaAmy Elsner NEGOTIATION
Emily WhobreyBrazilBernardo Dominic UNQUALIFIED
Stacey MacleadGermanyIoni Bowcher RENEWAL
Maria MarrierUnited KingdomElwin Sharvill RENEWAL
Julie StensethUnited KingdomOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaArgentinaStephen Shaw UNQUALIFIED
Cody SaylorsIndiaStephen Shaw QUALIFIED
Darci PoquetteUnited KingdomOnyama Limba RENEWAL
Izzy GarufiArgentinaAmy Elsner NEW
Aruna FigeroaSpainAmy Elsner UNQUALIFIED
Tony FollerBrazilAmy Elsner NEGOTIATION
Clifford RimAustraliaAsiya Javayant QUALIFIED
Antonio CaudyCanadaXuxue Feng PROPOSAL
Isabel BowleyCanadaAsiya Javayant PROPOSAL
Isabel BowleyUnited KingdomXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerGermany2025-08-05Truhlar And Truhlar Attys NEW98Ioni Bowcher
1001Silvio SlusarskiBrazil2025-07-31Dorl, James J Esq NEGOTIATION40Elwin Sharvill
1002Kaitlin OstroskyItaly2025-07-13King, Christopher A Esq NEGOTIATION82Stephen Shaw
1003Aika InouyeRussia2025-07-12King, Christopher A Esq RENEWAL19Anna Fali
1004Clifford RimRussia2025-07-15Buckley Miller Wright QUALIFIED83Asiya Javayant
1005Clifford RimRussia2025-08-02Feltz Printing Service RENEWAL26Xuxue Feng
1006David DarakjyUnited Kingdom2025-07-19Buckley Miller Wright QUALIFIED10Anna Fali
1007Julie StensethAustralia2025-07-15Rangoni Of Florence QUALIFIED3Amy Elsner
1008Smith GlickUnited Kingdom2025-07-20Morlong Associates NEW48Ivan Magalhaes
1009Kaitlin OstroskyFrance2025-08-07Chemel, James L Cpa RENEWAL6Elwin Sharvill
1010Clifford RimBrazil2025-07-10King, Christopher A Esq PROPOSAL71Xuxue Feng
1011Jefferson SchemmerArgentina2025-07-25Printing Dimensions QUALIFIED63Ivan Magalhaes
1012Misaki RoysterArgentina2025-07-29Feltz Printing Service QUALIFIED97Xuxue Feng
1013Nicolas IturbideSpain2025-08-01Dorl, James J Esq RENEWAL85Bernardo Dominic
1014Nicolas IturbideRussia2025-07-24Morlong Associates PROPOSAL52Xuxue Feng
1015Faith GillianItaly2025-07-24Feltz Printing Service RENEWAL24Ivan Magalhaes
1016Greenwood BologniaBrazil2025-07-25Rousseaux, Michael Esq PROPOSAL76Stephen Shaw
1017David DarakjyIndia2025-07-29Printing Dimensions RENEWAL37Stephen Shaw
1018Costa DilliardArgentina2025-07-20Morlong Associates UNQUALIFIED53Xuxue Feng
1019Arvin AlbaresSpain2025-07-11Buckley Miller Wright RENEWAL86Xuxue Feng
1020Maria MarrierItaly2025-07-20Morlong Associates RENEWAL92Anna Fali
1021Isabel BowleyAustralia2025-07-24Chemel, James L Cpa NEW68Ivan Magalhaes
1022Deepesh ChuiItaly2025-07-13Commercial Press RENEWAL79Xuxue Feng
1023Jones VocelkaItaly2025-07-18Truhlar And Truhlar Attys PROPOSAL53Amy Elsner
1024Nicolas IturbideArgentina2025-08-05Chemel, James L Cpa NEGOTIATION98Elwin Sharvill
1025Leja CaldareraCanada2025-07-19Chemel, James L Cpa NEGOTIATION86Xuxue Feng
1026Julie StensethGermany2025-07-15Feiner Bros PROPOSAL85Amy Elsner
1027Leon OldroydSpain2025-07-24Dorl, James J Esq QUALIFIED23Bernardo Dominic
1028Julie StensethFrance2025-07-20Truhlar And Truhlar Attys NEGOTIATION71Anna Fali
1029Nicolas IturbideIndia2025-07-21Buckley Miller Wright UNQUALIFIED49Anna Fali
1030Stacey MacleadAustralia2025-07-09Morlong Associates QUALIFIED44Anna Fali
1031Izzy GarufiUnited Kingdom2025-07-23Chapman, Ross E Esq UNQUALIFIED78Elwin Sharvill
1032Smith GlickFrance2025-08-02Truhlar And Truhlar Attys PROPOSAL70Bernardo Dominic
1033Julie StensethJapan2025-07-12Truhlar And Truhlar Attys RENEWAL10Ioni Bowcher
1034Adams MorascaAustralia2025-08-05King, Christopher A Esq PROPOSAL19Anna Fali
1035Julie StensethRussia2025-07-15Morlong Associates PROPOSAL1Asiya Javayant
1036Leja CaldareraAustralia2025-07-18Chemel, James L Cpa UNQUALIFIED53Stephen Shaw
1037Clifford RimCanada2025-08-02Buckley Miller Wright QUALIFIED68Xuxue Feng
1038Ivar PaprockiIndia2025-07-16Feiner Bros NEW5Anna Fali
1039Leon OldroydBrazil2025-07-14Feiner Bros NEGOTIATION90Ivan Magalhaes
1040Sinclair WaycottCanada2025-08-01Feltz Printing Service QUALIFIED63Stephen Shaw
1041Emily WhobreyAustralia2025-07-12Printing Dimensions QUALIFIED52Bernardo Dominic
1042Julie StensethBrazil2025-07-24Printing Dimensions QUALIFIED48Amy Elsner
1043Chavez BriddickBrazil2025-07-25Benton, John B Jr NEW70Onyama Limba
1044Mujtaba NickaCanada2025-07-23Chanay, Jeffrey A Esq PROPOSAL95Anna Fali
1045Mujtaba NickaCanada2025-07-11Dorl, James J Esq PROPOSAL19Amy Elsner
1046Juan WieserAustralia2025-07-29Feiner Bros UNQUALIFIED52Asiya Javayant
1047Aika InouyeItaly2025-07-10Buckley Miller Wright UNQUALIFIED91Stephen Shaw
1048Ashley DoeIndia2025-07-11Feltz Printing Service RENEWAL44Ioni Bowcher
1049Salvatore StockhamUnited Kingdom2025-07-13Chanay, Jeffrey A Esq NEW15Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Johnson SergiBrazilAnna Fali NEW
Misaki RoysterBrazilStephen Shaw PROPOSAL
Jennifer AmigonSpainXuxue Feng NEW
Smith GlickSpainStephen Shaw RENEWAL
Morrow RutaUnited KingdomIoni Bowcher QUALIFIED
James ButtUnited KingdomIvan Magalhaes NEGOTIATION
Ashley DoeCanadaAsiya Javayant QUALIFIED
Arvin AlbaresCanadaAnna Fali NEGOTIATION
Antonio CaudyCanadaAsiya Javayant UNQUALIFIED
Faith GillianItalyElwin Sharvill PROPOSAL
Faith GillianUnited KingdomXuxue Feng RENEWAL
Ricardo GauchoItalyAnna Fali PROPOSAL
Clifford RimGermanyOnyama Limba NEGOTIATION
Jones VocelkaCanadaElwin Sharvill NEGOTIATION
Wickens NestleJapanAnna Fali NEGOTIATION
Clifford RimIndiaBernardo Dominic NEGOTIATION
Misaki RoysterAustraliaAnna Fali RENEWAL
Aditya KuskoFranceAmy Elsner NEW
Faith GillianItalyStephen Shaw NEGOTIATION
Chavez BriddickItalyAnna Fali QUALIFIED
Emily WhobreyJapanAmy Elsner PROPOSAL
Mayumi KolmetzArgentinaXuxue Feng UNQUALIFIED
Stacey MacleadBrazilIoni Bowcher PROPOSAL
Darci PoquetteItalyBernardo Dominic QUALIFIED
Isabel BowleyIndiaStephen Shaw NEGOTIATION
Aditya KuskoIndiaIoni Bowcher NEW
Darci PoquetteIndiaAsiya Javayant QUALIFIED
Julie StensethItalyStephen Shaw RENEWAL
Isabel BowleyFranceStephen Shaw NEW
Sinclair WaycottItalyIvan Magalhaes NEW
Isabel BowleyIndiaStephen Shaw NEW
Kadeem FlosiSpainAsiya Javayant RENEWAL
Aika InouyeFranceBernardo Dominic NEW
Mujtaba NickaUnited KingdomStephen Shaw NEW
Juan WieserUnited KingdomAmy Elsner UNQUALIFIED
Aditya KuskoIndiaElwin Sharvill PROPOSAL
Silvio SlusarskiJapanIoni Bowcher NEGOTIATION
Claire TollnerIndiaAnna Fali QUALIFIED
Aruna FigeroaBrazilBernardo Dominic UNQUALIFIED
Mujtaba NickaGermanyOnyama Limba NEGOTIATION
Juan WieserCanadaOnyama Limba PROPOSAL
Antonio CaudyAustraliaElwin Sharvill QUALIFIED
Clifford RimJapanAnna Fali QUALIFIED
Aika InouyeBrazilXuxue Feng QUALIFIED
Aditya KuskoAustraliaAnna Fali RENEWAL
Darci PoquetteItalyXuxue Feng NEW
Cody SaylorsIndiaIoni Bowcher NEW
Cody SaylorsSpainAsiya Javayant NEGOTIATION
Clifford RimArgentinaElwin Sharvill NEW
Maisha RulapaughArgentinaAsiya Javayant NEW
Frozen Columns
Name
Chavez Briddick
Mujtaba Nicka
Stacey Maclead
Jefferson Schemmer
Mayumi Kolmetz
Mujtaba Nicka
Arvin Albares
Johnson Sergi
Adams Morasca
Rodrigues Campain
Aika Inouye
Claire Tollner
Stacey Maclead
Silvio Slusarski
Julie Stenseth
Smith Glick
Nicolas Iturbide
Ivar Paprocki
Jeanfrancois Venere
Nicolas Iturbide
Munro Ferencz
Arvin Albares
Julie Stenseth
Munro Ferencz
Misaki Royster
Aika Inouye
Darci Poquette
David Darakjy
Emily Whobrey
Aditya Kusko
Johnson Sergi
Leon Oldroyd
Kaitlin Ostrosky
Julie Stenseth
Costa Dilliard
Rodrigues Campain
Alejandro Perin
Claire Tollner
Adams Morasca
Ivar Paprocki
Misaki Royster
Francesco Shinko
Chavez Briddick
Morrow Ruta
Silvio Slusarski
Salvatore Stockham
Silvio Slusarski
Jones Vocelka
David Darakjy
Maisha Rulapaugh
IdCountryDate
1000Italy2025-07-17
1001Canada2025-08-07
1002Spain2025-07-12
1003Brazil2025-07-20
1004France2025-07-18
1005Australia2025-07-15
1006India2025-07-16
1007United Kingdom2025-08-04
1008Australia2025-07-29
1009Brazil2025-07-20
1010Argentina2025-07-24
1011Spain2025-07-21
1012Russia2025-07-16
1013Germany2025-07-20
1014Italy2025-07-23
1015Italy2025-07-23
1016Russia2025-07-22
1017India2025-07-23
1018Italy2025-08-06
1019Brazil2025-08-05
1020Australia2025-07-16
1021Japan2025-07-18
1022Germany2025-07-23
1023Spain2025-07-30
1024Italy2025-08-02
1025Spain2025-08-01
1026India2025-07-31
1027India2025-08-07
1028India2025-08-04
1029France2025-07-09
1030France2025-07-12
1031Germany2025-08-07
1032Japan2025-08-04
1033Brazil2025-07-25
1034India2025-08-06
1035United Kingdom2025-07-24
1036India2025-07-30
1037Italy2025-07-19
1038United Kingdom2025-07-25
1039Canada2025-07-16
1040France2025-07-22
1041Argentina2025-07-21
1042Germany2025-08-01
1043United Kingdom2025-07-10
1044Russia2025-07-24
1045United Kingdom2025-07-16
1046France2025-07-16
1047United Kingdom2025-07-25
1048Japan2025-07-24
1049Italy2025-07-19

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Russia2025-07-16
Nicolas Iturbide1001Germany2025-08-05
Aditya Kusko1002France2025-07-11
Misaki Royster1003Italy2025-08-04
Misaki Royster1004Germany2025-08-07
Wickens Nestle1005Brazil2025-08-03
Jeanfrancois Venere1006Argentina2025-08-02
Kadeem Flosi1007Brazil2025-08-06
Jefferson Schemmer1008Australia2025-07-24
Morrow Ruta1009Canada2025-07-24
Mujtaba Nicka1010Russia2025-07-29
Wickens Nestle1011United Kingdom2025-07-25
Costa Dilliard1012Canada2025-07-15
Silvio Slusarski1013India2025-08-07
Adams Morasca1014United Kingdom2025-07-29
Chavez Briddick1015Argentina2025-07-15
Kadeem Flosi1016Australia2025-08-02
Cody Saylors1017Russia2025-08-06
Antonio Caudy1018Argentina2025-07-12
Alejandro Perin1019United Kingdom2025-07-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainCanadaAnna Fali NEGOTIATION
Jones VocelkaUnited KingdomIoni Bowcher NEGOTIATION
Claire TollnerCanadaAnna Fali PROPOSAL
Juan WieserJapanAnna Fali UNQUALIFIED
Greenwood BologniaUnited KingdomStephen Shaw UNQUALIFIED
Maisha RulapaughUnited KingdomAnna Fali PROPOSAL
Emily WhobreyCanadaBernardo Dominic NEW
Stacey MacleadAustraliaXuxue Feng PROPOSAL
David DarakjyGermanyIoni Bowcher NEGOTIATION
Julie StensethGermanyOnyama Limba NEW
David DarakjyAustraliaBernardo Dominic NEGOTIATION
Claire TollnerBrazilAnna Fali QUALIFIED
Chavez BriddickFranceAsiya Javayant UNQUALIFIED
Ashley DoeUnited KingdomStephen Shaw PROPOSAL
Wickens NestleRussiaIoni Bowcher UNQUALIFIED
Octavia MaletAustraliaAmy Elsner NEGOTIATION
Johnson SergiSpainAmy Elsner RENEWAL
Johnson SergiIndiaStephen Shaw NEW
Ivar PaprockiCanadaElwin Sharvill UNQUALIFIED
Faith GillianItalyXuxue Feng QUALIFIED
Silvio SlusarskiSpainXuxue Feng PROPOSAL
Salvatore StockhamAustraliaAmy Elsner QUALIFIED
Kadeem FlosiJapanBernardo Dominic RENEWAL
Sinclair WaycottArgentinaBernardo Dominic PROPOSAL
Murillo MaletIndiaAsiya Javayant QUALIFIED
Wickens NestleRussiaAnna Fali PROPOSAL
Francesco ShinkoItalyStephen Shaw NEW
Leja CaldareraAustraliaElwin Sharvill PROPOSAL
David DarakjyFranceOnyama Limba QUALIFIED
Mujtaba NickaCanadaStephen Shaw NEW
Ricardo GauchoUnited KingdomAnna Fali UNQUALIFIED
Maisha RulapaughIndiaIvan Magalhaes PROPOSAL
Aditya KuskoRussiaBernardo Dominic NEGOTIATION
Ashley DoeBrazilIoni Bowcher NEGOTIATION
Ivar PaprockiRussiaBernardo Dominic NEW
Morrow RutaRussiaBernardo Dominic NEW
Johnson SergiArgentinaStephen Shaw RENEWAL
Aditya KuskoIndiaAsiya Javayant RENEWAL
Rodrigues CampainArgentinaXuxue Feng NEW
David DarakjySpainIoni 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>