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
Stacey MacleadAustraliaIvan Magalhaes QUALIFIED
Munro FerenczIndiaAmy Elsner RENEWAL
Rodrigues CampainFranceAnna Fali UNQUALIFIED
Misaki RoysterFranceAmy Elsner PROPOSAL
Leon OldroydBrazilOnyama Limba NEGOTIATION
Isabel BowleyIndiaIvan Magalhaes NEW
Isabel BowleyRussiaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereGermanyXuxue Feng PROPOSAL
Maisha RulapaughUnited KingdomOnyama Limba UNQUALIFIED
Mujtaba NickaIndiaElwin Sharvill PROPOSAL
Aika InouyeAustraliaIvan Magalhaes NEGOTIATION
Maria MarrierGermanyAmy Elsner QUALIFIED
Jennifer AmigonArgentinaAmy Elsner NEW
Murillo MaletItalyIoni Bowcher PROPOSAL
Ivar PaprockiItalyIvan Magalhaes NEGOTIATION
Sinclair WaycottArgentinaAsiya Javayant NEW
Smith GlickAustraliaBernardo Dominic NEGOTIATION
Kadeem FlosiSpainXuxue Feng NEGOTIATION
Emily WhobreyArgentinaIoni Bowcher NEGOTIATION
Clifford RimRussiaAsiya Javayant UNQUALIFIED
James ButtIndiaStephen Shaw QUALIFIED
Wickens NestleJapanIoni Bowcher NEGOTIATION
Munro FerenczBrazilIoni Bowcher PROPOSAL
Deepesh ChuiFranceBernardo Dominic NEGOTIATION
Jeanfrancois VenereCanadaOnyama Limba RENEWAL
Leon OldroydGermanyIvan Magalhaes NEW
Isabel BowleyRussiaXuxue Feng NEW
Munro FerenczSpainAnna Fali NEGOTIATION
Octavia MaletJapanXuxue Feng UNQUALIFIED
Arvin AlbaresItalyStephen Shaw NEW
Johnson SergiFranceXuxue Feng NEGOTIATION
Ashley DoeIndiaIvan Magalhaes PROPOSAL
Kadeem FlosiCanadaElwin Sharvill PROPOSAL
Maria MarrierUnited KingdomStephen Shaw NEGOTIATION
Kadeem FlosiCanadaElwin Sharvill UNQUALIFIED
Francesco ShinkoUnited KingdomStephen Shaw QUALIFIED
Ashley DoeFranceIoni Bowcher NEGOTIATION
Arvin AlbaresAustraliaBernardo Dominic NEW
Ivar PaprockiBrazilIvan Magalhaes NEGOTIATION
Smith GlickItalyIvan Magalhaes NEGOTIATION
Maria MarrierBrazilXuxue Feng QUALIFIED
Costa DilliardItalyStephen Shaw NEW
Morrow RutaJapanIvan Magalhaes QUALIFIED
Maria MarrierBrazilBernardo Dominic NEW
David DarakjyFranceBernardo Dominic NEGOTIATION
Maria MarrierAustraliaIoni Bowcher NEGOTIATION
Alejandro PerinUnited KingdomStephen Shaw NEW
Smith GlickGermanyIoni Bowcher PROPOSAL
Aika InouyeItalyAmy Elsner QUALIFIED
Darci PoquetteRussiaElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Juan WieserUnited KingdomBernardo Dominic PROPOSAL
Kadeem FlosiItalyStephen Shaw UNQUALIFIED
Smith GlickSpainStephen Shaw NEGOTIATION
Jones VocelkaBrazilStephen Shaw PROPOSAL
Antonio CaudyJapanIoni Bowcher RENEWAL
Faith GillianIndiaAsiya Javayant NEW
Alejandro PerinArgentinaAsiya Javayant UNQUALIFIED
Alejandro PerinBrazilOnyama Limba PROPOSAL
Kadeem FlosiRussiaXuxue Feng PROPOSAL
Darci PoquetteItalyXuxue Feng RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiAustralia2025-08-14Buckley Miller Wright NEGOTIATION59Elwin Sharvill
1001Julie StensethJapan2025-08-23Rousseaux, Michael Esq RENEWAL90Anna Fali
1002Alejandro PerinSpain2025-09-04King, Christopher A Esq RENEWAL67Stephen Shaw
1003Faith GillianJapan2025-08-21King, Christopher A Esq RENEWAL39Bernardo Dominic
1004Deepesh ChuiIndia2025-08-29Benton, John B Jr UNQUALIFIED6Ioni Bowcher
1005Faith GillianAustralia2025-09-06Rousseaux, Michael Esq RENEWAL42Stephen Shaw
1006Aditya KuskoSpain2025-09-06Rangoni Of Florence PROPOSAL48Asiya Javayant
1007Darci PoquetteGermany2025-08-17Dorl, James J Esq UNQUALIFIED48Bernardo Dominic
1008Munro FerenczIndia2025-08-23Feiner Bros PROPOSAL45Bernardo Dominic
1009Jennifer AmigonCanada2025-08-15Buckley Miller Wright NEGOTIATION40Ivan Magalhaes
1010Clifford RimIndia2025-08-22Buckley Miller Wright PROPOSAL39Elwin Sharvill
1011Izzy GarufiIndia2025-09-03Chemel, James L Cpa QUALIFIED36Stephen Shaw
1012Izzy GarufiItaly2025-08-19Feiner Bros RENEWAL8Amy Elsner
1013Aruna FigeroaUnited Kingdom2025-09-05Chanay, Jeffrey A Esq NEW86Xuxue Feng
1014Leja CaldareraJapan2025-08-22Printing Dimensions PROPOSAL46Bernardo Dominic
1015Ashley DoeAustralia2025-08-14Feltz Printing Service QUALIFIED97Anna Fali
1016Sinclair WaycottIndia2025-08-28Chemel, James L Cpa UNQUALIFIED37Amy Elsner
1017Kadeem FlosiArgentina2025-08-28Printing Dimensions NEW14Bernardo Dominic
1018Adams MorascaItaly2025-09-06Chapman, Ross E Esq UNQUALIFIED80Stephen Shaw
1019Nicolas IturbideCanada2025-09-07Chapman, Ross E Esq PROPOSAL73Xuxue Feng
1020Wickens NestleRussia2025-09-01Printing Dimensions NEGOTIATION47Onyama Limba
1021Cody SaylorsGermany2025-08-21Dorl, James J Esq PROPOSAL56Stephen Shaw
1022Wickens NestleArgentina2025-09-09Rangoni Of Florence NEW62Elwin Sharvill
1023James ButtRussia2025-08-31Commercial Press NEW70Ivan Magalhaes
1024Mayumi KolmetzArgentina2025-08-22Feltz Printing Service RENEWAL98Xuxue Feng
1025Jefferson SchemmerRussia2025-08-18Benton, John B Jr UNQUALIFIED96Elwin Sharvill
1026Munro FerenczUnited Kingdom2025-08-27Feiner Bros NEW20Ioni Bowcher
1027Silvio SlusarskiUnited Kingdom2025-08-30King, Christopher A Esq PROPOSAL50Bernardo Dominic
1028Chavez BriddickSpain2025-08-14King, Christopher A Esq NEW92Asiya Javayant
1029Ivar PaprockiFrance2025-08-14Commercial Press PROPOSAL94Elwin Sharvill
1030Smith GlickArgentina2025-09-07Rangoni Of Florence QUALIFIED5Stephen Shaw
1031Deepesh ChuiRussia2025-09-07Feltz Printing Service RENEWAL27Anna Fali
1032Darci PoquetteAustralia2025-09-01King, Christopher A Esq NEW71Xuxue Feng
1033Mayumi KolmetzBrazil2025-09-08Chemel, James L Cpa RENEWAL55Xuxue Feng
1034Francesco ShinkoRussia2025-09-02Truhlar And Truhlar Attys QUALIFIED54Bernardo Dominic
1035Faith GillianAustralia2025-08-29Feltz Printing Service RENEWAL1Ivan Magalhaes
1036Aruna FigeroaCanada2025-09-08Dorl, James J Esq QUALIFIED11Anna Fali
1037Kadeem FlosiSpain2025-08-31Rangoni Of Florence QUALIFIED25Asiya Javayant
1038Misaki RoysterItaly2025-08-24Chapman, Ross E Esq PROPOSAL82Ivan Magalhaes
1039Alejandro PerinJapan2025-08-26Truhlar And Truhlar Attys NEGOTIATION46Anna Fali
1040Stacey MacleadFrance2025-08-18Printing Dimensions RENEWAL25Elwin Sharvill
1041Kadeem FlosiGermany2025-08-25Rousseaux, Michael Esq NEGOTIATION81Asiya Javayant
1042Silvio SlusarskiBrazil2025-08-20Truhlar And Truhlar Attys UNQUALIFIED31Stephen Shaw
1043Johnson SergiRussia2025-08-17Rangoni Of Florence RENEWAL74Bernardo Dominic
1044Arvin AlbaresFrance2025-08-26Chemel, James L Cpa NEW88Anna Fali
1045Maria MarrierJapan2025-08-13Rangoni Of Florence NEW82Xuxue Feng
1046Claire TollnerItaly2025-08-11Feltz Printing Service QUALIFIED43Asiya Javayant
1047Octavia MaletGermany2025-08-23Commercial Press NEW55Anna Fali
1048Leja CaldareraItaly2025-08-31Chanay, Jeffrey A Esq RENEWAL13Asiya Javayant
1049Aruna FigeroaArgentina2025-08-29King, Christopher A Esq UNQUALIFIED9Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaJapanAmy Elsner NEGOTIATION
Clifford RimCanadaAmy Elsner PROPOSAL
David DarakjyFranceOnyama Limba UNQUALIFIED
Munro FerenczBrazilIvan Magalhaes PROPOSAL
Darci PoquetteSpainAsiya Javayant QUALIFIED
Leja CaldareraUnited KingdomAmy Elsner QUALIFIED
Faith GillianIndiaXuxue Feng UNQUALIFIED
Salvatore StockhamArgentinaAsiya Javayant NEGOTIATION
Maisha RulapaughBrazilAsiya Javayant QUALIFIED
Sinclair WaycottGermanyIoni Bowcher UNQUALIFIED
Aika InouyeRussiaIvan Magalhaes UNQUALIFIED
Octavia MaletSpainElwin Sharvill PROPOSAL
Greenwood BologniaIndiaAnna Fali QUALIFIED
Julie StensethBrazilAsiya Javayant QUALIFIED
Morrow RutaArgentinaBernardo Dominic NEW
Morrow RutaFranceAsiya Javayant RENEWAL
Mayumi KolmetzAustraliaAmy Elsner UNQUALIFIED
Darci PoquetteSpainAsiya Javayant NEGOTIATION
Ashley DoeRussiaAnna Fali NEGOTIATION
Emily WhobreyFranceBernardo Dominic RENEWAL
Antonio CaudyUnited KingdomAnna Fali NEGOTIATION
Izzy GarufiGermanyIvan Magalhaes UNQUALIFIED
Julie StensethArgentinaElwin Sharvill NEW
Claire TollnerFranceAmy Elsner UNQUALIFIED
Chavez BriddickSpainOnyama Limba PROPOSAL
Mayumi KolmetzGermanyStephen Shaw NEW
Aditya KuskoJapanBernardo Dominic NEW
Stacey MacleadAustraliaAmy Elsner RENEWAL
Octavia MaletIndiaElwin Sharvill NEW
Sinclair WaycottFranceBernardo Dominic RENEWAL
Costa DilliardUnited KingdomXuxue Feng NEW
Maria MarrierAustraliaStephen Shaw RENEWAL
Murillo MaletAustraliaBernardo Dominic NEGOTIATION
Arvin AlbaresBrazilXuxue Feng RENEWAL
Arvin AlbaresBrazilBernardo Dominic RENEWAL
Stacey MacleadCanadaIoni Bowcher NEW
Ashley DoeUnited KingdomXuxue Feng PROPOSAL
Chavez BriddickAustraliaElwin Sharvill NEW
Smith GlickRussiaStephen Shaw QUALIFIED
Leja CaldareraSpainIvan Magalhaes PROPOSAL
Izzy GarufiFranceIvan Magalhaes NEW
Isabel BowleyIndiaStephen Shaw NEW
James ButtGermanyAsiya Javayant UNQUALIFIED
Morrow RutaCanadaBernardo Dominic UNQUALIFIED
Maria MarrierIndiaIvan Magalhaes RENEWAL
Salvatore StockhamJapanIvan Magalhaes NEW
Jennifer AmigonBrazilIoni Bowcher UNQUALIFIED
Rodrigues CampainItalyXuxue Feng QUALIFIED
Emily WhobreyBrazilIoni Bowcher UNQUALIFIED
Isabel BowleyGermanyIvan Magalhaes NEGOTIATION
Frozen Columns
Name
Kaitlin Ostrosky
Deepesh Chui
Julie Stenseth
Emily Whobrey
Greenwood Bolognia
Adams Morasca
Misaki Royster
Deepesh Chui
Ashley Doe
Jefferson Schemmer
Izzy Garufi
Wickens Nestle
Izzy Garufi
Mayumi Kolmetz
Morrow Ruta
Octavia Malet
Izzy Garufi
Maisha Rulapaugh
Faith Gillian
Johnson Sergi
Mujtaba Nicka
Cody Saylors
Francesco Shinko
Morrow Ruta
Jones Vocelka
Johnson Sergi
David Darakjy
Salvatore Stockham
Chavez Briddick
Smith Glick
Munro Ferencz
Aditya Kusko
Costa Dilliard
Leja Caldarera
Munro Ferencz
Kadeem Flosi
Sinclair Waycott
Darci Poquette
Chavez Briddick
Rodrigues Campain
Ashley Doe
Octavia Malet
Arvin Albares
Jennifer Amigon
Kadeem Flosi
Chavez Briddick
Leon Oldroyd
Ivar Paprocki
Costa Dilliard
Leon Oldroyd
IdCountryDate
1000Spain2025-09-08
1001Russia2025-08-21
1002Argentina2025-08-20
1003India2025-09-04
1004Canada2025-08-24
1005Germany2025-08-11
1006Brazil2025-08-11
1007Argentina2025-09-06
1008Spain2025-08-14
1009Argentina2025-09-06
1010Argentina2025-09-05
1011Brazil2025-09-02
1012Australia2025-08-15
1013Brazil2025-08-21
1014India2025-08-24
1015Argentina2025-09-01
1016Argentina2025-09-08
1017Germany2025-08-12
1018Russia2025-08-19
1019Canada2025-08-12
1020Canada2025-08-14
1021Brazil2025-08-27
1022India2025-08-23
1023Russia2025-08-14
1024France2025-08-17
1025Argentina2025-09-06
1026France2025-08-23
1027Germany2025-09-01
1028Italy2025-09-06
1029Spain2025-08-13
1030Russia2025-08-27
1031United Kingdom2025-08-20
1032India2025-09-09
1033Brazil2025-08-21
1034Germany2025-08-19
1035Brazil2025-08-13
1036Germany2025-09-04
1037France2025-08-28
1038Italy2025-08-27
1039Russia2025-08-25
1040India2025-08-11
1041Argentina2025-09-08
1042United Kingdom2025-08-12
1043Russia2025-08-21
1044Germany2025-08-19
1045Italy2025-09-04
1046Australia2025-08-20
1047Japan2025-09-04
1048Argentina2025-08-28
1049Brazil2025-09-05

On-Demand Data

NameIdCountryDate
Johnson Sergi1000Italy2025-08-22
Silvio Slusarski1001Australia2025-08-20
Salvatore Stockham1002United Kingdom2025-08-20
Smith Glick1003Japan2025-09-03
Leja Caldarera1004Japan2025-08-23
Nicolas Iturbide1005Brazil2025-08-28
Sinclair Waycott1006Spain2025-09-03
Kaitlin Ostrosky1007France2025-08-27
Greenwood Bolognia1008Russia2025-08-16
Leja Caldarera1009India2025-08-24
Claire Tollner1010Spain2025-08-21
Kaitlin Ostrosky1011India2025-08-25
Aditya Kusko1012Spain2025-08-27
Antonio Caudy1013France2025-08-13
Octavia Malet1014Spain2025-08-26
Juan Wieser1015Brazil2025-09-06
Juan Wieser1016France2025-09-04
James Butt1017Russia2025-08-21
Costa Dilliard1018Brazil2025-08-14
Arvin Albares1019Spain2025-08-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Johnson SergiIndiaIvan Magalhaes PROPOSAL
Nicolas IturbideFranceIoni Bowcher NEGOTIATION
Jones VocelkaArgentinaAnna Fali PROPOSAL
Octavia MaletGermanyXuxue Feng NEGOTIATION
Kadeem FlosiItalyStephen Shaw QUALIFIED
Jones VocelkaArgentinaElwin Sharvill PROPOSAL
Chavez BriddickSpainStephen Shaw NEW
James ButtFranceStephen Shaw RENEWAL
Murillo MaletCanadaAsiya Javayant QUALIFIED
Stacey MacleadSpainAsiya Javayant UNQUALIFIED
Chavez BriddickItalyIoni Bowcher PROPOSAL
Aika InouyeAustraliaOnyama Limba RENEWAL
Octavia MaletBrazilAsiya Javayant NEW
Ashley DoeGermanyOnyama Limba QUALIFIED
Jennifer AmigonAustraliaOnyama Limba UNQUALIFIED
Emily WhobreyFranceAmy Elsner QUALIFIED
Darci PoquetteItalyOnyama Limba NEGOTIATION
Aditya KuskoIndiaElwin Sharvill NEGOTIATION
Aruna FigeroaRussiaXuxue Feng QUALIFIED
Costa DilliardBrazilElwin Sharvill PROPOSAL
Cody SaylorsItalyStephen Shaw RENEWAL
Cody SaylorsUnited KingdomAmy Elsner NEW
Jefferson SchemmerCanadaElwin Sharvill NEGOTIATION
Silvio SlusarskiSpainStephen Shaw NEGOTIATION
Munro FerenczFranceXuxue Feng QUALIFIED
Mujtaba NickaBrazilStephen Shaw UNQUALIFIED
Tony FollerIndiaOnyama Limba QUALIFIED
Juan WieserItalyIoni Bowcher RENEWAL
Aika InouyeAustraliaAsiya Javayant QUALIFIED
Cody SaylorsBrazilXuxue Feng RENEWAL
Julie StensethCanadaStephen Shaw NEGOTIATION
Arvin AlbaresArgentinaAsiya Javayant NEW
Octavia MaletGermanyAmy Elsner PROPOSAL
Greenwood BologniaBrazilIvan Magalhaes NEGOTIATION
Silvio SlusarskiUnited KingdomIvan Magalhaes UNQUALIFIED
Aika InouyeCanadaElwin Sharvill NEW
Leja CaldareraUnited KingdomIvan Magalhaes UNQUALIFIED
Munro FerenczIndiaAnna Fali QUALIFIED
Smith GlickIndiaAmy Elsner NEW
Mayumi KolmetzUnited KingdomAnna Fali 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>