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
Mujtaba NickaBrazilXuxue Feng UNQUALIFIED
Smith GlickItalyStephen Shaw QUALIFIED
Jeanfrancois VenereItalyXuxue Feng NEGOTIATION
Kadeem FlosiUnited KingdomXuxue Feng QUALIFIED
Jeanfrancois VenereGermanyIoni Bowcher QUALIFIED
Julie StensethIndiaAnna Fali UNQUALIFIED
Rodrigues CampainIndiaIoni Bowcher NEW
Wickens NestleItalyOnyama Limba NEGOTIATION
Smith GlickGermanyAmy Elsner UNQUALIFIED
Jefferson SchemmerIndiaIvan Magalhaes UNQUALIFIED
Leon OldroydRussiaXuxue Feng RENEWAL
Mujtaba NickaUnited KingdomOnyama Limba UNQUALIFIED
Wickens NestleCanadaXuxue Feng RENEWAL
Costa DilliardAustraliaAsiya Javayant UNQUALIFIED
Octavia MaletFranceBernardo Dominic NEW
Antonio CaudyFranceAnna Fali UNQUALIFIED
Arvin AlbaresGermanyXuxue Feng UNQUALIFIED
Francesco ShinkoGermanyIoni Bowcher NEGOTIATION
Mayumi KolmetzSpainIoni Bowcher UNQUALIFIED
Munro FerenczCanadaAnna Fali QUALIFIED
Kaitlin OstroskyItalyElwin Sharvill QUALIFIED
Chavez BriddickArgentinaXuxue Feng NEGOTIATION
Jennifer AmigonGermanyXuxue Feng NEW
Jones VocelkaBrazilAnna Fali NEW
Mayumi KolmetzIndiaAmy Elsner NEW
Costa DilliardBrazilStephen Shaw UNQUALIFIED
Leon OldroydIndiaAsiya Javayant QUALIFIED
Izzy GarufiItalyXuxue Feng NEW
Aditya KuskoItalyIoni Bowcher NEW
Jennifer AmigonSpainElwin Sharvill UNQUALIFIED
Jennifer AmigonGermanyIoni Bowcher NEW
Aruna FigeroaItalyXuxue Feng QUALIFIED
Kaitlin OstroskyJapanElwin Sharvill QUALIFIED
Antonio CaudyIndiaAsiya Javayant PROPOSAL
Aditya KuskoItalyAsiya Javayant NEGOTIATION
Smith GlickBrazilElwin Sharvill PROPOSAL
Cody SaylorsFranceAsiya Javayant NEGOTIATION
Leja CaldareraBrazilBernardo Dominic RENEWAL
Mujtaba NickaJapanAsiya Javayant UNQUALIFIED
Clifford RimCanadaAsiya Javayant QUALIFIED
Izzy GarufiAustraliaIoni Bowcher UNQUALIFIED
Faith GillianAustraliaStephen Shaw RENEWAL
Kaitlin OstroskyBrazilIoni Bowcher UNQUALIFIED
Cody SaylorsUnited KingdomAsiya Javayant NEW
Smith GlickArgentinaIvan Magalhaes PROPOSAL
Leon OldroydIndiaOnyama Limba RENEWAL
Octavia MaletBrazilBernardo Dominic NEGOTIATION
Aika InouyeItalyXuxue Feng RENEWAL
Jefferson SchemmerItalyAsiya Javayant PROPOSAL
Clifford RimSpainStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Tony FollerRussiaIvan Magalhaes NEGOTIATION
David DarakjyArgentinaXuxue Feng RENEWAL
Misaki RoysterIndiaIvan Magalhaes NEGOTIATION
Juan WieserRussiaOnyama Limba NEW
Sinclair WaycottAustraliaElwin Sharvill PROPOSAL
Emily WhobreyJapanAsiya Javayant PROPOSAL
Greenwood BologniaIndiaElwin Sharvill RENEWAL
Alejandro PerinBrazilAsiya Javayant RENEWAL
Claire TollnerFranceIoni Bowcher RENEWAL
Darci PoquetteJapanOnyama Limba PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoSpain2025-07-20Printing Dimensions NEGOTIATION32Onyama Limba
1001Murillo MaletIndia2025-08-04Chemel, James L Cpa UNQUALIFIED35Anna Fali
1002Rodrigues CampainGermany2025-08-03Printing Dimensions UNQUALIFIED73Stephen Shaw
1003Cody SaylorsCanada2025-07-27Chapman, Ross E Esq UNQUALIFIED68Ivan Magalhaes
1004Mayumi KolmetzGermany2025-08-07Dorl, James J Esq PROPOSAL48Stephen Shaw
1005Jefferson SchemmerIndia2025-08-07Benton, John B Jr RENEWAL86Xuxue Feng
1006Juan WieserJapan2025-08-09King, Christopher A Esq PROPOSAL93Bernardo Dominic
1007Johnson SergiGermany2025-08-08Printing Dimensions UNQUALIFIED50Xuxue Feng
1008Mujtaba NickaItaly2025-07-31Dorl, James J Esq NEGOTIATION7Anna Fali
1009Salvatore StockhamAustralia2025-08-07Rousseaux, Michael Esq UNQUALIFIED53Ivan Magalhaes
1010Juan WieserAustralia2025-08-15Commercial Press PROPOSAL55Anna Fali
1011Salvatore StockhamItaly2025-07-26Rousseaux, Michael Esq NEGOTIATION46Ivan Magalhaes
1012Greenwood BologniaFrance2025-07-28Rangoni Of Florence NEW33Amy Elsner
1013Stacey MacleadUnited Kingdom2025-08-12Buckley Miller Wright RENEWAL8Ioni Bowcher
1014Greenwood BologniaCanada2025-07-25Benton, John B Jr PROPOSAL57Amy Elsner
1015Tony FollerRussia2025-08-11Chapman, Ross E Esq NEW69Elwin Sharvill
1016Ashley DoeArgentina2025-07-22Buckley Miller Wright QUALIFIED85Onyama Limba
1017Leon OldroydItaly2025-08-09Morlong Associates NEW21Amy Elsner
1018Darci PoquetteIndia2025-08-05Truhlar And Truhlar Attys PROPOSAL78Elwin Sharvill
1019Ricardo GauchoBrazil2025-08-01Commercial Press NEW24Bernardo Dominic
1020Darci PoquetteIndia2025-08-13Chanay, Jeffrey A Esq QUALIFIED94Ivan Magalhaes
1021Tony FollerArgentina2025-08-04Buckley Miller Wright RENEWAL5Bernardo Dominic
1022Antonio CaudyIndia2025-08-02King, Christopher A Esq NEW50Onyama Limba
1023Julie StensethRussia2025-08-01Truhlar And Truhlar Attys RENEWAL30Asiya Javayant
1024David DarakjyItaly2025-07-22Chemel, James L Cpa QUALIFIED87Ioni Bowcher
1025Aditya KuskoIndia2025-08-14Benton, John B Jr RENEWAL69Stephen Shaw
1026Maria MarrierJapan2025-08-07Feiner Bros NEW39Amy Elsner
1027Jeanfrancois VenereSpain2025-08-08Feiner Bros NEGOTIATION79Ioni Bowcher
1028Jones VocelkaBrazil2025-07-27Rousseaux, Michael Esq NEW84Bernardo Dominic
1029Claire TollnerAustralia2025-08-04Truhlar And Truhlar Attys NEGOTIATION11Anna Fali
1030Jones VocelkaJapan2025-08-13Chemel, James L Cpa NEW40Elwin Sharvill
1031Mujtaba NickaIndia2025-07-29Feiner Bros PROPOSAL74Amy Elsner
1032Faith GillianFrance2025-07-25Rousseaux, Michael Esq NEGOTIATION66Elwin Sharvill
1033Aika InouyeRussia2025-07-27Chanay, Jeffrey A Esq RENEWAL2Asiya Javayant
1034Kaitlin OstroskyRussia2025-07-18Feltz Printing Service PROPOSAL60Onyama Limba
1035Aruna FigeroaBrazil2025-07-23Dorl, James J Esq NEW15Bernardo Dominic
1036Ivar PaprockiAustralia2025-08-05Commercial Press RENEWAL84Onyama Limba
1037Clifford RimRussia2025-07-30King, Christopher A Esq RENEWAL5Xuxue Feng
1038Kadeem FlosiUnited Kingdom2025-07-31Truhlar And Truhlar Attys QUALIFIED0Ioni Bowcher
1039Juan WieserJapan2025-08-08Commercial Press NEGOTIATION3Amy Elsner
1040Misaki RoysterUnited Kingdom2025-08-10King, Christopher A Esq UNQUALIFIED66Amy Elsner
1041Jefferson SchemmerSpain2025-08-03Dorl, James J Esq RENEWAL75Ioni Bowcher
1042Faith GillianItaly2025-07-31Chemel, James L Cpa NEGOTIATION77Elwin Sharvill
1043Rodrigues CampainSpain2025-08-10Morlong Associates NEGOTIATION72Asiya Javayant
1044Claire TollnerRussia2025-07-22Chapman, Ross E Esq UNQUALIFIED64Amy Elsner
1045Maisha RulapaughCanada2025-07-17Dorl, James J Esq RENEWAL31Amy Elsner
1046Munro FerenczCanada2025-07-17Dorl, James J Esq PROPOSAL72Asiya Javayant
1047Emily WhobreyJapan2025-08-02Truhlar And Truhlar Attys UNQUALIFIED28Asiya Javayant
1048James ButtAustralia2025-08-11Truhlar And Truhlar Attys NEGOTIATION86Onyama Limba
1049Johnson SergiBrazil2025-07-31Chemel, James L Cpa QUALIFIED46Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoSpainAnna Fali QUALIFIED
Morrow RutaFranceIoni Bowcher NEW
Stacey MacleadArgentinaBernardo Dominic PROPOSAL
Emily WhobreyAustraliaAsiya Javayant PROPOSAL
Arvin AlbaresItalyElwin Sharvill UNQUALIFIED
Costa DilliardCanadaXuxue Feng QUALIFIED
Costa DilliardGermanyElwin Sharvill RENEWAL
Cody SaylorsUnited KingdomAmy Elsner RENEWAL
Ricardo GauchoJapanAsiya Javayant NEW
Costa DilliardArgentinaBernardo Dominic NEGOTIATION
Greenwood BologniaArgentinaXuxue Feng NEW
Antonio CaudyUnited KingdomAnna Fali NEGOTIATION
Adams MorascaFranceAmy Elsner NEW
Jones VocelkaFranceStephen Shaw PROPOSAL
Murillo MaletJapanStephen Shaw PROPOSAL
Deepesh ChuiRussiaBernardo Dominic UNQUALIFIED
Maisha RulapaughIndiaElwin Sharvill RENEWAL
Chavez BriddickJapanAnna Fali NEGOTIATION
Clifford RimSpainOnyama Limba NEGOTIATION
Nicolas IturbideIndiaBernardo Dominic QUALIFIED
David DarakjyJapanOnyama Limba NEW
Claire TollnerCanadaAsiya Javayant RENEWAL
Juan WieserUnited KingdomOnyama Limba NEGOTIATION
Deepesh ChuiFranceIvan Magalhaes UNQUALIFIED
Mayumi KolmetzItalyOnyama Limba QUALIFIED
Octavia MaletRussiaXuxue Feng NEW
Tony FollerCanadaAmy Elsner UNQUALIFIED
Tony FollerRussiaAsiya Javayant NEW
Arvin AlbaresGermanyAmy Elsner RENEWAL
Leja CaldareraArgentinaElwin Sharvill UNQUALIFIED
Mujtaba NickaFranceElwin Sharvill NEW
Deepesh ChuiIndiaStephen Shaw UNQUALIFIED
Claire TollnerJapanXuxue Feng NEGOTIATION
Antonio CaudyRussiaIoni Bowcher UNQUALIFIED
Emily WhobreyGermanyIoni Bowcher NEW
Francesco ShinkoFranceBernardo Dominic NEW
Ashley DoeAustraliaXuxue Feng QUALIFIED
Ricardo GauchoUnited KingdomIoni Bowcher RENEWAL
Rodrigues CampainGermanyOnyama Limba PROPOSAL
Wickens NestleFranceIvan Magalhaes NEGOTIATION
Greenwood BologniaBrazilIvan Magalhaes PROPOSAL
Jones VocelkaItalyAnna Fali NEGOTIATION
Aditya KuskoAustraliaStephen Shaw RENEWAL
Rodrigues CampainJapanAsiya Javayant NEGOTIATION
Jones VocelkaArgentinaBernardo Dominic PROPOSAL
Salvatore StockhamJapanStephen Shaw NEW
Leon OldroydFranceIvan Magalhaes UNQUALIFIED
Rodrigues CampainSpainAsiya Javayant NEW
Cody SaylorsUnited KingdomXuxue Feng PROPOSAL
Wickens NestleItalyXuxue Feng RENEWAL
Frozen Columns
Name
Maisha Rulapaugh
Rodrigues Campain
Aruna Figeroa
Claire Tollner
Munro Ferencz
Nicolas Iturbide
Sinclair Waycott
Silvio Slusarski
Adams Morasca
Jeanfrancois Venere
Misaki Royster
Mujtaba Nicka
Deepesh Chui
Jefferson Schemmer
Isabel Bowley
Chavez Briddick
Kadeem Flosi
Maisha Rulapaugh
Salvatore Stockham
Antonio Caudy
Claire Tollner
Murillo Malet
Francesco Shinko
Francesco Shinko
Wickens Nestle
James Butt
Emily Whobrey
Aruna Figeroa
Mujtaba Nicka
Wickens Nestle
Kaitlin Ostrosky
Francesco Shinko
Faith Gillian
Aditya Kusko
Leon Oldroyd
Ashley Doe
Murillo Malet
Nicolas Iturbide
Mujtaba Nicka
Cody Saylors
Chavez Briddick
Kadeem Flosi
Mayumi Kolmetz
Ashley Doe
Nicolas Iturbide
Aika Inouye
Munro Ferencz
Costa Dilliard
Izzy Garufi
Maria Marrier
IdCountryDate
1000Canada2025-07-18
1001Spain2025-08-12
1002Spain2025-08-05
1003France2025-07-18
1004Brazil2025-07-26
1005India2025-07-30
1006Australia2025-07-31
1007Spain2025-07-20
1008Australia2025-07-17
1009United Kingdom2025-07-22
1010Canada2025-08-02
1011Japan2025-08-08
1012Brazil2025-07-24
1013Spain2025-08-04
1014Japan2025-07-27
1015Canada2025-08-04
1016Germany2025-07-25
1017United Kingdom2025-08-12
1018Canada2025-07-30
1019Spain2025-08-02
1020Japan2025-08-09
1021Germany2025-08-13
1022Brazil2025-08-13
1023Germany2025-08-01
1024Australia2025-08-01
1025Spain2025-08-07
1026Spain2025-08-14
1027Brazil2025-08-06
1028Canada2025-08-11
1029Canada2025-08-14
1030Italy2025-08-04
1031India2025-07-17
1032Brazil2025-08-14
1033France2025-08-10
1034Russia2025-08-15
1035United Kingdom2025-07-30
1036India2025-07-25
1037India2025-08-02
1038Russia2025-07-22
1039Germany2025-07-23
1040France2025-08-12
1041India2025-07-23
1042Italy2025-08-06
1043France2025-08-01
1044France2025-07-22
1045Argentina2025-07-17
1046United Kingdom2025-08-11
1047Australia2025-08-15
1048France2025-07-18
1049Canada2025-08-03

On-Demand Data

NameIdCountryDate
Jones Vocelka1000Italy2025-07-20
Deepesh Chui1001Russia2025-07-29
Antonio Caudy1002United Kingdom2025-07-29
Adams Morasca1003France2025-08-05
Leon Oldroyd1004Italy2025-07-18
Greenwood Bolognia1005Brazil2025-07-29
Rodrigues Campain1006Brazil2025-08-13
Misaki Royster1007Spain2025-08-11
Juan Wieser1008Canada2025-07-17
Antonio Caudy1009France2025-07-24
Isabel Bowley1010Japan2025-08-08
Munro Ferencz1011France2025-07-23
Jones Vocelka1012Brazil2025-07-23
Kaitlin Ostrosky1013Italy2025-07-20
Smith Glick1014United Kingdom2025-07-27
Aditya Kusko1015Spain2025-08-06
Aruna Figeroa1016United Kingdom2025-07-22
Rodrigues Campain1017Spain2025-08-14
Mujtaba Nicka1018Italy2025-07-25
Ricardo Gaucho1019Australia2025-08-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
David DarakjyJapanIvan Magalhaes NEW
Adams MorascaAustraliaStephen Shaw NEGOTIATION
Faith GillianIndiaIvan Magalhaes QUALIFIED
Chavez BriddickIndiaXuxue Feng QUALIFIED
Silvio SlusarskiJapanAnna Fali RENEWAL
Ashley DoeSpainBernardo Dominic NEW
Kaitlin OstroskyBrazilOnyama Limba NEGOTIATION
Sinclair WaycottBrazilAmy Elsner QUALIFIED
Morrow RutaSpainElwin Sharvill PROPOSAL
Aditya KuskoGermanyIvan Magalhaes NEGOTIATION
Ricardo GauchoGermanyIvan Magalhaes NEGOTIATION
Izzy GarufiAustraliaXuxue Feng QUALIFIED
Isabel BowleyJapanBernardo Dominic QUALIFIED
Jeanfrancois VenereFranceIoni Bowcher QUALIFIED
Chavez BriddickAustraliaAnna Fali PROPOSAL
James ButtFranceBernardo Dominic UNQUALIFIED
Johnson SergiItalyAsiya Javayant PROPOSAL
Leja CaldareraGermanyAnna Fali NEGOTIATION
Munro FerenczJapanIvan Magalhaes QUALIFIED
Sinclair WaycottGermanyAsiya Javayant PROPOSAL
Leja CaldareraFranceXuxue Feng UNQUALIFIED
Jones VocelkaItalyElwin Sharvill RENEWAL
Kadeem FlosiCanadaOnyama Limba NEW
Kaitlin OstroskySpainElwin Sharvill NEGOTIATION
Maria MarrierIndiaAnna Fali QUALIFIED
Antonio CaudySpainAnna Fali RENEWAL
Claire TollnerCanadaAsiya Javayant QUALIFIED
Mayumi KolmetzAustraliaAsiya Javayant NEW
Juan WieserUnited KingdomIvan Magalhaes NEW
Ivar PaprockiAustraliaElwin Sharvill NEGOTIATION
Ivar PaprockiJapanBernardo Dominic QUALIFIED
Stacey MacleadArgentinaXuxue Feng NEW
Juan WieserIndiaXuxue Feng PROPOSAL
Isabel BowleyBrazilXuxue Feng QUALIFIED
Jones VocelkaBrazilIoni Bowcher NEGOTIATION
Kadeem FlosiIndiaAsiya Javayant UNQUALIFIED
Jefferson SchemmerGermanyAmy Elsner QUALIFIED
Rodrigues CampainItalyElwin Sharvill QUALIFIED
Darci PoquetteBrazilElwin Sharvill RENEWAL
Ashley DoeAustraliaAnna Fali 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>