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
Antonio CaudyItalyElwin Sharvill UNQUALIFIED
Deepesh ChuiGermanyBernardo Dominic UNQUALIFIED
Arvin AlbaresFranceIvan Magalhaes NEW
Nicolas IturbideGermanyAmy Elsner UNQUALIFIED
Jefferson SchemmerRussiaAnna Fali NEGOTIATION
Arvin AlbaresCanadaIoni Bowcher QUALIFIED
Darci PoquetteIndiaOnyama Limba PROPOSAL
Mayumi KolmetzUnited KingdomAsiya Javayant PROPOSAL
Sinclair WaycottItalyElwin Sharvill PROPOSAL
Maisha RulapaughJapanIvan Magalhaes QUALIFIED
Maisha RulapaughUnited KingdomIvan Magalhaes NEGOTIATION
Jennifer AmigonIndiaElwin Sharvill QUALIFIED
Salvatore StockhamBrazilAsiya Javayant PROPOSAL
Aditya KuskoRussiaAnna Fali QUALIFIED
Nicolas IturbideAustraliaIoni Bowcher PROPOSAL
Deepesh ChuiSpainElwin Sharvill QUALIFIED
Munro FerenczRussiaStephen Shaw QUALIFIED
Faith GillianRussiaXuxue Feng RENEWAL
Octavia MaletBrazilBernardo Dominic NEW
Smith GlickItalyOnyama Limba NEGOTIATION
Tony FollerUnited KingdomAsiya Javayant PROPOSAL
Mayumi KolmetzJapanAsiya Javayant PROPOSAL
Smith GlickArgentinaStephen Shaw UNQUALIFIED
Stacey MacleadCanadaXuxue Feng RENEWAL
Ashley DoeSpainAsiya Javayant UNQUALIFIED
Juan WieserGermanyBernardo Dominic UNQUALIFIED
Ivar PaprockiSpainXuxue Feng NEW
Octavia MaletUnited KingdomAnna Fali QUALIFIED
Antonio CaudyFranceStephen Shaw RENEWAL
Wickens NestleBrazilAmy Elsner NEGOTIATION
Jefferson SchemmerBrazilIoni Bowcher PROPOSAL
Cody SaylorsCanadaIoni Bowcher QUALIFIED
Sinclair WaycottFranceAsiya Javayant NEW
Greenwood BologniaJapanXuxue Feng NEW
Aruna FigeroaRussiaAnna Fali NEW
Rodrigues CampainItalyAnna Fali RENEWAL
Jefferson SchemmerArgentinaBernardo Dominic QUALIFIED
Greenwood BologniaIndiaAsiya Javayant PROPOSAL
Misaki RoysterItalyElwin Sharvill RENEWAL
Deepesh ChuiArgentinaOnyama Limba PROPOSAL
Johnson SergiIndiaStephen Shaw RENEWAL
Arvin AlbaresArgentinaAmy Elsner NEGOTIATION
Juan WieserIndiaElwin Sharvill QUALIFIED
Costa DilliardUnited KingdomAnna Fali PROPOSAL
Jefferson SchemmerSpainAmy Elsner UNQUALIFIED
Smith GlickFranceIvan Magalhaes RENEWAL
Jefferson SchemmerIndiaBernardo Dominic UNQUALIFIED
Arvin AlbaresCanadaOnyama Limba RENEWAL
Jeanfrancois VenereFranceAnna Fali NEGOTIATION
Antonio CaudyBrazilStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Costa DilliardItalyXuxue Feng UNQUALIFIED
Juan WieserGermanyAnna Fali NEGOTIATION
Deepesh ChuiAustraliaElwin Sharvill RENEWAL
Maisha RulapaughRussiaAsiya Javayant QUALIFIED
Jefferson SchemmerItalyStephen Shaw UNQUALIFIED
Alejandro PerinItalyXuxue Feng RENEWAL
Octavia MaletArgentinaIvan Magalhaes RENEWAL
Faith GillianIndiaStephen Shaw RENEWAL
Tony FollerGermanyBernardo Dominic RENEWAL
Izzy GarufiItalyAsiya Javayant QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoUnited Kingdom2025-08-27Feltz Printing Service RENEWAL31Onyama Limba
1001Kaitlin OstroskyArgentina2025-08-30Chanay, Jeffrey A Esq PROPOSAL50Ivan Magalhaes
1002Ricardo GauchoSpain2025-09-20Rousseaux, Michael Esq NEGOTIATION1Amy Elsner
1003Ashley DoeItaly2025-08-30Printing Dimensions NEGOTIATION9Ioni Bowcher
1004Costa DilliardFrance2025-09-11Rousseaux, Michael Esq PROPOSAL96Elwin Sharvill
1005Salvatore StockhamFrance2025-09-05Feltz Printing Service UNQUALIFIED34Ivan Magalhaes
1006Isabel BowleyUnited Kingdom2025-08-30Buckley Miller Wright QUALIFIED4Amy Elsner
1007Tony FollerItaly2025-09-01Printing Dimensions UNQUALIFIED44Ivan Magalhaes
1008Tony FollerAustralia2025-09-13Chemel, James L Cpa PROPOSAL50Onyama Limba
1009Juan WieserAustralia2025-08-29Morlong Associates RENEWAL76Stephen Shaw
1010Mayumi KolmetzFrance2025-08-30Dorl, James J Esq RENEWAL69Stephen Shaw
1011Deepesh ChuiFrance2025-09-10Rangoni Of Florence NEGOTIATION43Stephen Shaw
1012Johnson SergiItaly2025-09-22Chemel, James L Cpa NEGOTIATION69Anna Fali
1013Isabel BowleyUnited Kingdom2025-09-04Rousseaux, Michael Esq QUALIFIED94Asiya Javayant
1014Mayumi KolmetzItaly2025-09-23Feltz Printing Service NEGOTIATION67Asiya Javayant
1015Leon OldroydItaly2025-08-27Feltz Printing Service NEW99Ivan Magalhaes
1016Jefferson SchemmerCanada2025-09-15Commercial Press UNQUALIFIED32Amy Elsner
1017Maria MarrierCanada2025-09-08Chanay, Jeffrey A Esq RENEWAL64Ivan Magalhaes
1018Silvio SlusarskiGermany2025-09-24Commercial Press UNQUALIFIED29Anna Fali
1019Misaki RoysterRussia2025-09-08Chemel, James L Cpa QUALIFIED71Amy Elsner
1020Smith GlickRussia2025-09-09Rangoni Of Florence RENEWAL21Onyama Limba
1021Murillo MaletJapan2025-09-13Rangoni Of Florence QUALIFIED56Ioni Bowcher
1022Faith GillianRussia2025-09-04Chanay, Jeffrey A Esq NEGOTIATION34Onyama Limba
1023Kadeem FlosiBrazil2025-09-18Dorl, James J Esq QUALIFIED87Ivan Magalhaes
1024Alejandro PerinJapan2025-09-19King, Christopher A Esq NEGOTIATION56Stephen Shaw
1025James ButtBrazil2025-09-16Buckley Miller Wright NEGOTIATION82Ivan Magalhaes
1026Chavez BriddickGermany2025-09-16Feiner Bros RENEWAL32Amy Elsner
1027Maisha RulapaughBrazil2025-08-31Printing Dimensions QUALIFIED62Xuxue Feng
1028Greenwood BologniaItaly2025-09-18Feiner Bros PROPOSAL55Elwin Sharvill
1029David DarakjyRussia2025-09-03Chapman, Ross E Esq RENEWAL38Stephen Shaw
1030Nicolas IturbideJapan2025-08-27Feiner Bros RENEWAL12Ioni Bowcher
1031Misaki RoysterUnited Kingdom2025-08-29Chapman, Ross E Esq NEW24Amy Elsner
1032Darci PoquetteItaly2025-09-14Printing Dimensions QUALIFIED52Stephen Shaw
1033David DarakjyJapan2025-09-25Truhlar And Truhlar Attys UNQUALIFIED75Bernardo Dominic
1034Munro FerenczRussia2025-08-31Feiner Bros NEW31Ivan Magalhaes
1035Rodrigues CampainAustralia2025-09-01Feltz Printing Service NEGOTIATION35Onyama Limba
1036Munro FerenczBrazil2025-09-23Dorl, James J Esq QUALIFIED6Onyama Limba
1037Sinclair WaycottGermany2025-08-29Benton, John B Jr NEGOTIATION8Ivan Magalhaes
1038Tony FollerJapan2025-09-16Feiner Bros UNQUALIFIED6Anna Fali
1039Jones VocelkaRussia2025-09-14Benton, John B Jr NEGOTIATION58Xuxue Feng
1040Murillo MaletIndia2025-09-17Benton, John B Jr RENEWAL94Xuxue Feng
1041Arvin AlbaresUnited Kingdom2025-08-31Commercial Press QUALIFIED15Stephen Shaw
1042Tony FollerIndia2025-09-16Rangoni Of Florence QUALIFIED36Amy Elsner
1043Salvatore StockhamIndia2025-09-25Feltz Printing Service NEGOTIATION82Elwin Sharvill
1044Aika InouyeGermany2025-09-20Chanay, Jeffrey A Esq QUALIFIED83Bernardo Dominic
1045Ivar PaprockiSpain2025-09-08Morlong Associates RENEWAL20Amy Elsner
1046Maria MarrierSpain2025-09-20Buckley Miller Wright NEW6Elwin Sharvill
1047Francesco ShinkoItaly2025-09-13Buckley Miller Wright UNQUALIFIED15Ioni Bowcher
1048Stacey MacleadUnited Kingdom2025-08-30King, Christopher A Esq UNQUALIFIED36Elwin Sharvill
1049Maisha RulapaughCanada2025-09-17Printing Dimensions QUALIFIED14Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickAustraliaAsiya Javayant UNQUALIFIED
Johnson SergiItalyElwin Sharvill PROPOSAL
Murillo MaletIndiaIoni Bowcher RENEWAL
Mayumi KolmetzBrazilAsiya Javayant UNQUALIFIED
Emily WhobreyIndiaAnna Fali NEGOTIATION
Mujtaba NickaArgentinaAmy Elsner PROPOSAL
Silvio SlusarskiSpainAmy Elsner RENEWAL
Mujtaba NickaBrazilXuxue Feng RENEWAL
Kadeem FlosiJapanBernardo Dominic UNQUALIFIED
Munro FerenczUnited KingdomStephen Shaw UNQUALIFIED
Cody SaylorsGermanyAmy Elsner RENEWAL
Clifford RimIndiaAnna Fali PROPOSAL
Julie StensethIndiaAmy Elsner RENEWAL
Mujtaba NickaFranceStephen Shaw RENEWAL
Aditya KuskoUnited KingdomIoni Bowcher PROPOSAL
Silvio SlusarskiAustraliaIoni Bowcher RENEWAL
Octavia MaletFranceBernardo Dominic PROPOSAL
Johnson SergiGermanyAmy Elsner PROPOSAL
Jeanfrancois VenereSpainStephen Shaw RENEWAL
Isabel BowleyArgentinaElwin Sharvill QUALIFIED
Kaitlin OstroskyRussiaXuxue Feng RENEWAL
Tony FollerCanadaOnyama Limba NEGOTIATION
Aika InouyeRussiaXuxue Feng QUALIFIED
Deepesh ChuiFranceXuxue Feng QUALIFIED
Munro FerenczArgentinaAmy Elsner NEW
Ashley DoeRussiaElwin Sharvill RENEWAL
Faith GillianArgentinaAsiya Javayant QUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant PROPOSAL
Julie StensethCanadaElwin Sharvill RENEWAL
Greenwood BologniaArgentinaAmy Elsner NEW
Murillo MaletCanadaAmy Elsner QUALIFIED
Aika InouyeFranceBernardo Dominic RENEWAL
Izzy GarufiArgentinaAmy Elsner UNQUALIFIED
Stacey MacleadItalyIvan Magalhaes QUALIFIED
Alejandro PerinArgentinaXuxue Feng UNQUALIFIED
Clifford RimSpainOnyama Limba RENEWAL
Juan WieserIndiaAnna Fali NEW
Arvin AlbaresIndiaIoni Bowcher QUALIFIED
Smith GlickAustraliaElwin Sharvill QUALIFIED
Adams MorascaSpainIoni Bowcher NEW
Murillo MaletFranceIoni Bowcher QUALIFIED
Alejandro PerinGermanyIoni Bowcher QUALIFIED
Clifford RimJapanElwin Sharvill NEW
Ivar PaprockiItalyAsiya Javayant UNQUALIFIED
Jones VocelkaRussiaAmy Elsner RENEWAL
Ashley DoeFranceOnyama Limba QUALIFIED
Jeanfrancois VenereArgentinaStephen Shaw QUALIFIED
Alejandro PerinItalyXuxue Feng RENEWAL
Munro FerenczCanadaOnyama Limba NEGOTIATION
Murillo MaletIndiaAmy Elsner RENEWAL
Frozen Columns
Name
Izzy Garufi
Johnson Sergi
Julie Stenseth
Deepesh Chui
Adams Morasca
Clifford Rim
Izzy Garufi
Ricardo Gaucho
Nicolas Iturbide
Munro Ferencz
Mayumi Kolmetz
Leon Oldroyd
Salvatore Stockham
Tony Foller
Misaki Royster
Clifford Rim
Johnson Sergi
Ashley Doe
Kaitlin Ostrosky
Ricardo Gaucho
Greenwood Bolognia
Izzy Garufi
Jones Vocelka
Ashley Doe
Murillo Malet
Nicolas Iturbide
Octavia Malet
James Butt
Rodrigues Campain
Leon Oldroyd
Rodrigues Campain
Emily Whobrey
Misaki Royster
Adams Morasca
Johnson Sergi
Murillo Malet
Johnson Sergi
Salvatore Stockham
Maria Marrier
Salvatore Stockham
Arvin Albares
David Darakjy
Chavez Briddick
Sinclair Waycott
Tony Foller
Antonio Caudy
Stacey Maclead
Ashley Doe
Arvin Albares
Leon Oldroyd
IdCountryDate
1000United Kingdom2025-09-12
1001Canada2025-08-29
1002India2025-09-14
1003Spain2025-09-19
1004Germany2025-09-02
1005Russia2025-09-09
1006Germany2025-08-28
1007United Kingdom2025-09-05
1008Germany2025-09-18
1009France2025-09-17
1010Australia2025-09-08
1011Australia2025-09-22
1012Argentina2025-09-05
1013Germany2025-08-27
1014Argentina2025-09-24
1015Brazil2025-08-31
1016Brazil2025-08-29
1017France2025-09-15
1018United Kingdom2025-09-07
1019Germany2025-09-04
1020Germany2025-09-05
1021United Kingdom2025-09-19
1022Australia2025-09-25
1023Australia2025-08-30
1024Russia2025-09-20
1025Brazil2025-09-10
1026Italy2025-08-28
1027Canada2025-09-09
1028Spain2025-08-29
1029Japan2025-09-17
1030Spain2025-09-01
1031Germany2025-09-10
1032France2025-09-02
1033Argentina2025-09-22
1034Italy2025-09-05
1035India2025-09-09
1036United Kingdom2025-09-13
1037Russia2025-09-21
1038Spain2025-09-13
1039France2025-09-20
1040Italy2025-09-15
1041India2025-09-07
1042Germany2025-09-16
1043Italy2025-08-31
1044Canada2025-09-16
1045France2025-09-19
1046Spain2025-09-22
1047Australia2025-09-10
1048Canada2025-09-05
1049Russia2025-09-12

On-Demand Data

NameIdCountryDate
Arvin Albares1000Argentina2025-09-17
Julie Stenseth1001Russia2025-09-02
Ashley Doe1002Germany2025-09-23
Jennifer Amigon1003India2025-09-11
Emily Whobrey1004Brazil2025-09-24
Jennifer Amigon1005Canada2025-08-31
Rodrigues Campain1006Australia2025-09-18
Alejandro Perin1007Argentina2025-08-29
James Butt1008United Kingdom2025-09-16
Antonio Caudy1009Canada2025-09-07
Johnson Sergi1010Spain2025-09-13
Cody Saylors1011Germany2025-09-10
James Butt1012United Kingdom2025-08-28
Leon Oldroyd1013Italy2025-08-28
Isabel Bowley1014Australia2025-08-27
Maria Marrier1015India2025-09-16
Deepesh Chui1016Brazil2025-09-10
Jones Vocelka1017Spain2025-09-16
Aruna Figeroa1018Australia2025-09-10
Alejandro Perin1019Spain2025-09-09
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Juan WieserJapanIoni Bowcher QUALIFIED
Leon OldroydFranceIoni Bowcher NEW
Rodrigues CampainRussiaOnyama Limba NEGOTIATION
Morrow RutaCanadaIvan Magalhaes PROPOSAL
Jennifer AmigonBrazilXuxue Feng QUALIFIED
Rodrigues CampainGermanyElwin Sharvill RENEWAL
Maria MarrierRussiaElwin Sharvill RENEWAL
Leon OldroydItalyElwin Sharvill PROPOSAL
Kadeem FlosiItalyBernardo Dominic NEGOTIATION
Jennifer AmigonFranceAmy Elsner RENEWAL
Maria MarrierRussiaAmy Elsner QUALIFIED
Claire TollnerRussiaAnna Fali QUALIFIED
Darci PoquetteAustraliaIoni Bowcher QUALIFIED
Smith GlickRussiaAnna Fali NEW
Cody SaylorsRussiaElwin Sharvill UNQUALIFIED
Antonio CaudyIndiaIvan Magalhaes NEGOTIATION
Aika InouyeFranceAnna Fali UNQUALIFIED
Darci PoquetteSpainIoni Bowcher PROPOSAL
Julie StensethArgentinaXuxue Feng RENEWAL
Kadeem FlosiIndiaBernardo Dominic RENEWAL
Leja CaldareraSpainAmy Elsner RENEWAL
Leon OldroydCanadaElwin Sharvill NEW
Clifford RimUnited KingdomElwin Sharvill QUALIFIED
Kaitlin OstroskyUnited KingdomElwin Sharvill QUALIFIED
Mujtaba NickaGermanyIoni Bowcher RENEWAL
Juan WieserCanadaElwin Sharvill NEGOTIATION
Alejandro PerinAustraliaAnna Fali NEGOTIATION
Arvin AlbaresRussiaIoni Bowcher UNQUALIFIED
David DarakjyIndiaOnyama Limba RENEWAL
Murillo MaletAustraliaAmy Elsner NEGOTIATION
Aika InouyeRussiaBernardo Dominic QUALIFIED
Wickens NestleFranceOnyama Limba NEGOTIATION
Ricardo GauchoRussiaStephen Shaw NEW
Aditya KuskoIndiaAmy Elsner NEGOTIATION
Nicolas IturbideAustraliaIoni Bowcher UNQUALIFIED
Jones VocelkaSpainBernardo Dominic RENEWAL
Antonio CaudyGermanyOnyama Limba NEW
Antonio CaudyItalyBernardo Dominic QUALIFIED
Murillo MaletSpainElwin Sharvill NEW
Silvio SlusarskiAustraliaAsiya Javayant QUALIFIED

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