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
Juan WieserAustraliaAnna Fali UNQUALIFIED
David DarakjyUnited KingdomIoni Bowcher QUALIFIED
Stacey MacleadIndiaElwin Sharvill NEGOTIATION
Aika InouyeItalyIvan Magalhaes NEW
Morrow RutaUnited KingdomAsiya Javayant NEGOTIATION
Sinclair WaycottFranceIvan Magalhaes QUALIFIED
Leja CaldareraArgentinaElwin Sharvill NEW
David DarakjyRussiaAnna Fali RENEWAL
Maria MarrierFranceAnna Fali NEW
Aruna FigeroaItalyXuxue Feng NEGOTIATION
Clifford RimArgentinaElwin Sharvill RENEWAL
David DarakjySpainAmy Elsner NEGOTIATION
Johnson SergiCanadaElwin Sharvill RENEWAL
Smith GlickJapanOnyama Limba PROPOSAL
Kadeem FlosiIndiaAsiya Javayant UNQUALIFIED
Aika InouyeJapanBernardo Dominic QUALIFIED
Emily WhobreyCanadaIoni Bowcher NEGOTIATION
Mayumi KolmetzItalyOnyama Limba PROPOSAL
Faith GillianGermanyElwin Sharvill RENEWAL
Morrow RutaCanadaIvan Magalhaes NEGOTIATION
Jones VocelkaGermanyAmy Elsner QUALIFIED
Cody SaylorsGermanyBernardo Dominic NEGOTIATION
Kadeem FlosiGermanyAsiya Javayant NEW
Tony FollerBrazilStephen Shaw PROPOSAL
Alejandro PerinUnited KingdomAmy Elsner RENEWAL
Stacey MacleadAustraliaXuxue Feng UNQUALIFIED
Jones VocelkaArgentinaBernardo Dominic QUALIFIED
Jones VocelkaIndiaStephen Shaw NEW
Arvin AlbaresBrazilXuxue Feng RENEWAL
Clifford RimFranceElwin Sharvill NEGOTIATION
Ricardo GauchoIndiaOnyama Limba NEGOTIATION
David DarakjyUnited KingdomOnyama Limba QUALIFIED
Costa DilliardIndiaBernardo Dominic RENEWAL
David DarakjyRussiaElwin Sharvill RENEWAL
Izzy GarufiCanadaIoni Bowcher UNQUALIFIED
Wickens NestleSpainXuxue Feng NEGOTIATION
Leon OldroydIndiaOnyama Limba NEW
Morrow RutaBrazilAmy Elsner NEW
Aditya KuskoItalyAsiya Javayant QUALIFIED
Ashley DoeRussiaStephen Shaw QUALIFIED
Salvatore StockhamArgentinaOnyama Limba QUALIFIED
Greenwood BologniaBrazilElwin Sharvill PROPOSAL
Rodrigues CampainSpainIoni Bowcher NEGOTIATION
Stacey MacleadAustraliaIoni Bowcher RENEWAL
Maria MarrierArgentinaAsiya Javayant NEGOTIATION
Aruna FigeroaIndiaAsiya Javayant UNQUALIFIED
Greenwood BologniaGermanyAmy Elsner UNQUALIFIED
Munro FerenczAustraliaStephen Shaw QUALIFIED
Kadeem FlosiAustraliaAsiya Javayant NEGOTIATION
Emily WhobreyAustraliaXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Faith GillianCanadaAmy Elsner PROPOSAL
Morrow RutaJapanStephen Shaw QUALIFIED
Mayumi KolmetzJapanElwin Sharvill UNQUALIFIED
Alejandro PerinJapanElwin Sharvill RENEWAL
Aika InouyeArgentinaAmy Elsner RENEWAL
Leja CaldareraRussiaStephen Shaw PROPOSAL
Ricardo GauchoSpainElwin Sharvill RENEWAL
Rodrigues CampainItalyAsiya Javayant QUALIFIED
Emily WhobreyJapanStephen Shaw NEW
Silvio SlusarskiArgentinaAnna Fali RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kadeem FlosiRussia2026-05-10Commercial Press NEW6Onyama Limba
1001Francesco ShinkoRussia2026-05-27Feiner Bros RENEWAL93Ioni Bowcher
1002Maria MarrierGermany2026-05-14Benton, John B Jr RENEWAL49Xuxue Feng
1003Munro FerenczJapan2026-05-19Dorl, James J Esq RENEWAL70Onyama Limba
1004Stacey MacleadGermany2026-05-09Chapman, Ross E Esq NEW67Xuxue Feng
1005Smith GlickArgentina2026-05-26Buckley Miller Wright QUALIFIED68Ioni Bowcher
1006Juan WieserUnited Kingdom2026-05-19Chapman, Ross E Esq RENEWAL74Bernardo Dominic
1007Ricardo GauchoBrazil2026-05-04Benton, John B Jr QUALIFIED74Asiya Javayant
1008Aruna FigeroaCanada2026-05-23Morlong Associates PROPOSAL96Anna Fali
1009Tony FollerCanada2026-05-04Feiner Bros QUALIFIED58Asiya Javayant
1010Julie StensethArgentina2026-05-03Chanay, Jeffrey A Esq RENEWAL1Onyama Limba
1011Kaitlin OstroskySpain2026-05-29Benton, John B Jr NEGOTIATION96Bernardo Dominic
1012Antonio CaudyItaly2026-05-16Dorl, James J Esq NEW61Stephen Shaw
1013Chavez BriddickAustralia2026-05-22Chapman, Ross E Esq UNQUALIFIED2Asiya Javayant
1014Misaki RoysterFrance2026-05-09Commercial Press PROPOSAL87Ivan Magalhaes
1015Maria MarrierCanada2026-05-12Benton, John B Jr NEW45Stephen Shaw
1016Jennifer AmigonItaly2026-05-28Truhlar And Truhlar Attys NEW7Elwin Sharvill
1017Ashley DoeBrazil2026-05-15Buckley Miller Wright QUALIFIED64Bernardo Dominic
1018Jefferson SchemmerUnited Kingdom2026-05-06Morlong Associates NEGOTIATION32Amy Elsner
1019Silvio SlusarskiIndia2026-05-08Buckley Miller Wright PROPOSAL77Amy Elsner
1020Murillo MaletGermany2026-05-30Printing Dimensions NEW37Anna Fali
1021Munro FerenczJapan2026-05-29Printing Dimensions UNQUALIFIED87Onyama Limba
1022Arvin AlbaresRussia2026-05-10Rousseaux, Michael Esq NEGOTIATION49Onyama Limba
1023Jennifer AmigonAustralia2026-05-14Chemel, James L Cpa QUALIFIED54Anna Fali
1024Salvatore StockhamArgentina2026-05-15King, Christopher A Esq RENEWAL42Bernardo Dominic
1025Kaitlin OstroskyIndia2026-05-13Rousseaux, Michael Esq NEW83Anna Fali
1026Faith GillianArgentina2026-05-26Rangoni Of Florence UNQUALIFIED71Elwin Sharvill
1027Kaitlin OstroskyUnited Kingdom2026-05-06Rangoni Of Florence UNQUALIFIED2Asiya Javayant
1028Jones VocelkaBrazil2026-05-15Chanay, Jeffrey A Esq PROPOSAL87Bernardo Dominic
1029Leja CaldareraUnited Kingdom2026-05-03Commercial Press RENEWAL53Ioni Bowcher
1030Mayumi KolmetzCanada2026-05-05Commercial Press RENEWAL4Onyama Limba
1031Silvio SlusarskiJapan2026-05-28Rousseaux, Michael Esq NEGOTIATION16Asiya Javayant
1032Misaki RoysterFrance2026-05-11Benton, John B Jr QUALIFIED61Amy Elsner
1033Salvatore StockhamArgentina2026-05-06Buckley Miller Wright NEGOTIATION89Bernardo Dominic
1034Mujtaba NickaJapan2026-05-11Feiner Bros UNQUALIFIED6Asiya Javayant
1035Misaki RoysterJapan2026-05-10Dorl, James J Esq QUALIFIED60Anna Fali
1036Alejandro PerinIndia2026-05-30Truhlar And Truhlar Attys PROPOSAL33Anna Fali
1037Kadeem FlosiArgentina2026-05-20Buckley Miller Wright QUALIFIED97Bernardo Dominic
1038Costa DilliardCanada2026-05-19Rangoni Of Florence NEW78Asiya Javayant
1039Cody SaylorsIndia2026-05-21Feltz Printing Service RENEWAL60Ivan Magalhaes
1040Ivar PaprockiUnited Kingdom2026-05-08Feiner Bros RENEWAL44Stephen Shaw
1041Nicolas IturbideCanada2026-05-06Printing Dimensions NEW48Anna Fali
1042Antonio CaudyCanada2026-05-24Rangoni Of Florence NEGOTIATION43Stephen Shaw
1043Leon OldroydIndia2026-05-28Chanay, Jeffrey A Esq PROPOSAL54Asiya Javayant
1044Leon OldroydIndia2026-05-28Truhlar And Truhlar Attys NEW62Bernardo Dominic
1045Jennifer AmigonItaly2026-05-06King, Christopher A Esq QUALIFIED91Asiya Javayant
1046Emily WhobreyAustralia2026-05-02Commercial Press PROPOSAL16Anna Fali
1047Adams MorascaItaly2026-05-24Chapman, Ross E Esq UNQUALIFIED66Ioni Bowcher
1048Alejandro PerinFrance2026-05-09Dorl, James J Esq UNQUALIFIED35Amy Elsner
1049Salvatore StockhamCanada2026-05-27Dorl, James J Esq QUALIFIED67Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Wickens NestleUnited KingdomBernardo Dominic RENEWAL
Chavez BriddickItalyOnyama Limba QUALIFIED
Claire TollnerJapanOnyama Limba UNQUALIFIED
Darci PoquetteBrazilOnyama Limba QUALIFIED
Julie StensethSpainBernardo Dominic QUALIFIED
Jones VocelkaGermanyAmy Elsner RENEWAL
Izzy GarufiArgentinaIoni Bowcher UNQUALIFIED
Wickens NestleBrazilOnyama Limba QUALIFIED
Deepesh ChuiRussiaStephen Shaw RENEWAL
Tony FollerItalyAnna Fali NEGOTIATION
Stacey MacleadItalyStephen Shaw PROPOSAL
Aditya KuskoCanadaStephen Shaw RENEWAL
Izzy GarufiIndiaAsiya Javayant NEGOTIATION
Maria MarrierFranceAmy Elsner NEGOTIATION
Munro FerenczJapanIvan Magalhaes UNQUALIFIED
Kadeem FlosiBrazilXuxue Feng RENEWAL
Leon OldroydCanadaAnna Fali PROPOSAL
Murillo MaletRussiaBernardo Dominic UNQUALIFIED
Maria MarrierIndiaIoni Bowcher QUALIFIED
Johnson SergiIndiaElwin Sharvill NEW
Antonio CaudyUnited KingdomElwin Sharvill QUALIFIED
Kadeem FlosiCanadaElwin Sharvill QUALIFIED
Claire TollnerRussiaOnyama Limba UNQUALIFIED
Cody SaylorsUnited KingdomAsiya Javayant QUALIFIED
Leon OldroydGermanyBernardo Dominic PROPOSAL
Leon OldroydJapanBernardo Dominic RENEWAL
Tony FollerGermanyBernardo Dominic PROPOSAL
Aditya KuskoGermanyElwin Sharvill QUALIFIED
Leon OldroydBrazilXuxue Feng RENEWAL
Jeanfrancois VenereIndiaOnyama Limba NEW
Kadeem FlosiItalyBernardo Dominic QUALIFIED
Antonio CaudyCanadaBernardo Dominic NEW
Alejandro PerinAustraliaAsiya Javayant NEGOTIATION
Wickens NestleArgentinaAsiya Javayant NEW
Kaitlin OstroskyUnited KingdomStephen Shaw NEW
James ButtFranceAnna Fali QUALIFIED
Silvio SlusarskiIndiaStephen Shaw QUALIFIED
Antonio CaudyIndiaBernardo Dominic NEW
Ricardo GauchoArgentinaStephen Shaw QUALIFIED
Faith GillianIndiaIvan Magalhaes PROPOSAL
Jeanfrancois VenereJapanElwin Sharvill NEW
Francesco ShinkoJapanOnyama Limba PROPOSAL
Leja CaldareraSpainAnna Fali RENEWAL
Johnson SergiRussiaOnyama Limba UNQUALIFIED
Cody SaylorsSpainOnyama Limba RENEWAL
Munro FerenczAustraliaBernardo Dominic NEGOTIATION
Julie StensethBrazilIoni Bowcher QUALIFIED
Misaki RoysterAustraliaBernardo Dominic PROPOSAL
Maria MarrierRussiaBernardo Dominic QUALIFIED
Claire TollnerBrazilStephen Shaw QUALIFIED
Frozen Columns
Name
Wickens Nestle
Chavez Briddick
Deepesh Chui
Isabel Bowley
Ivar Paprocki
Sinclair Waycott
Arvin Albares
Ashley Doe
Ivar Paprocki
Greenwood Bolognia
Mujtaba Nicka
Chavez Briddick
Emily Whobrey
Greenwood Bolognia
Misaki Royster
Stacey Maclead
Misaki Royster
David Darakjy
Ivar Paprocki
Ashley Doe
Mujtaba Nicka
Clifford Rim
Leja Caldarera
Faith Gillian
Ashley Doe
Johnson Sergi
Adams Morasca
Murillo Malet
Juan Wieser
Morrow Ruta
Juan Wieser
Emily Whobrey
Jennifer Amigon
Leja Caldarera
Ashley Doe
Darci Poquette
Greenwood Bolognia
Octavia Malet
Kaitlin Ostrosky
Misaki Royster
Wickens Nestle
Munro Ferencz
Deepesh Chui
Mujtaba Nicka
Nicolas Iturbide
Julie Stenseth
Arvin Albares
Alejandro Perin
Johnson Sergi
Silvio Slusarski
IdCountryDate
1000Argentina2026-05-23
1001Brazil2026-05-22
1002France2026-05-09
1003Spain2026-05-18
1004Canada2026-05-09
1005Brazil2026-05-07
1006Russia2026-05-03
1007Russia2026-05-05
1008India2026-05-27
1009Germany2026-05-11
1010United Kingdom2026-05-26
1011Brazil2026-05-14
1012Argentina2026-05-17
1013Japan2026-05-23
1014Argentina2026-05-20
1015Italy2026-05-30
1016Spain2026-05-27
1017Germany2026-05-20
1018Argentina2026-05-27
1019Germany2026-05-12
1020Japan2026-05-09
1021Australia2026-05-20
1022Germany2026-05-06
1023Japan2026-05-07
1024United Kingdom2026-05-06
1025Japan2026-05-24
1026Argentina2026-05-04
1027United Kingdom2026-05-14
1028Brazil2026-05-08
1029United Kingdom2026-05-06
1030India2026-05-05
1031Germany2026-05-22
1032United Kingdom2026-05-27
1033Germany2026-05-22
1034United Kingdom2026-05-29
1035Russia2026-05-12
1036Japan2026-05-23
1037Russia2026-05-25
1038Brazil2026-05-11
1039Australia2026-05-14
1040Australia2026-05-06
1041Argentina2026-05-31
1042Australia2026-05-04
1043Germany2026-05-15
1044France2026-05-27
1045Canada2026-05-19
1046Argentina2026-05-22
1047France2026-05-30
1048Brazil2026-05-23
1049France2026-05-08

On-Demand Data

NameIdCountryDate
Wickens Nestle1000Canada2026-05-28
Ricardo Gaucho1001Canada2026-05-13
Isabel Bowley1002Argentina2026-05-13
Antonio Caudy1003United Kingdom2026-05-31
Kaitlin Ostrosky1004Japan2026-05-10
Darci Poquette1005Germany2026-05-20
Salvatore Stockham1006Italy2026-05-17
Deepesh Chui1007Canada2026-05-30
Jeanfrancois Venere1008Germany2026-05-29
Jeanfrancois Venere1009Canada2026-05-29
Cody Saylors1010France2026-05-21
Adams Morasca1011France2026-05-08
Maisha Rulapaugh1012France2026-05-26
Aika Inouye1013India2026-05-21
Darci Poquette1014Argentina2026-05-21
Francesco Shinko1015United Kingdom2026-05-17
Octavia Malet1016Argentina2026-05-06
Misaki Royster1017Spain2026-05-21
Juan Wieser1018Germany2026-05-21
Antonio Caudy1019Russia2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Maisha RulapaughIndiaXuxue Feng UNQUALIFIED
Mayumi KolmetzItalyAmy Elsner NEW
Aruna FigeroaBrazilOnyama Limba NEW
Francesco ShinkoJapanXuxue Feng NEGOTIATION
Johnson SergiFranceXuxue Feng PROPOSAL
James ButtCanadaAsiya Javayant QUALIFIED
Alejandro PerinBrazilStephen Shaw QUALIFIED
Darci PoquetteJapanAnna Fali NEW
Mayumi KolmetzUnited KingdomOnyama Limba NEW
Aditya KuskoFranceStephen Shaw UNQUALIFIED
Mujtaba NickaItalyBernardo Dominic NEGOTIATION
Greenwood BologniaRussiaXuxue Feng NEGOTIATION
Munro FerenczFranceAsiya Javayant NEGOTIATION
Rodrigues CampainItalyOnyama Limba UNQUALIFIED
Stacey MacleadUnited KingdomElwin Sharvill NEW
Alejandro PerinAustraliaBernardo Dominic NEGOTIATION
Maria MarrierRussiaXuxue Feng QUALIFIED
Izzy GarufiArgentinaIvan Magalhaes RENEWAL
Nicolas IturbideFranceAsiya Javayant QUALIFIED
Greenwood BologniaCanadaOnyama Limba NEW
Leja CaldareraGermanyAmy Elsner NEGOTIATION
Leja CaldareraAustraliaIoni Bowcher RENEWAL
Mujtaba NickaAustraliaIvan Magalhaes NEGOTIATION
Cody SaylorsFranceAmy Elsner NEGOTIATION
Aditya KuskoFranceIvan Magalhaes UNQUALIFIED
Morrow RutaBrazilOnyama Limba NEW
Chavez BriddickUnited KingdomAmy Elsner NEW
Aruna FigeroaIndiaOnyama Limba PROPOSAL
Misaki RoysterBrazilXuxue Feng RENEWAL
Emily WhobreyArgentinaOnyama Limba UNQUALIFIED
Costa DilliardSpainBernardo Dominic UNQUALIFIED
Silvio SlusarskiArgentinaXuxue Feng PROPOSAL
Morrow RutaIndiaBernardo Dominic NEW
Adams MorascaUnited KingdomAsiya Javayant NEW
Murillo MaletBrazilAmy Elsner PROPOSAL
Munro FerenczUnited KingdomBernardo Dominic NEW
Kadeem FlosiBrazilOnyama Limba QUALIFIED
Kaitlin OstroskyIndiaAmy Elsner NEGOTIATION
Stacey MacleadRussiaIoni Bowcher PROPOSAL
Ashley DoeFranceElwin Sharvill 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>