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
Jeanfrancois VenereSpainAmy Elsner NEW
Silvio SlusarskiAustraliaAsiya Javayant NEGOTIATION
Juan WieserCanadaAnna Fali NEGOTIATION
Francesco ShinkoAustraliaAnna Fali QUALIFIED
Morrow RutaRussiaIvan Magalhaes NEGOTIATION
Rodrigues CampainJapanStephen Shaw NEW
Claire TollnerItalyBernardo Dominic UNQUALIFIED
Maisha RulapaughBrazilAsiya Javayant NEGOTIATION
Mujtaba NickaJapanBernardo Dominic RENEWAL
Rodrigues CampainGermanyStephen Shaw PROPOSAL
Smith GlickFranceAsiya Javayant UNQUALIFIED
Leja CaldareraFranceAnna Fali NEGOTIATION
Antonio CaudyRussiaBernardo Dominic QUALIFIED
Ashley DoeArgentinaIvan Magalhaes NEGOTIATION
Antonio CaudyArgentinaStephen Shaw NEGOTIATION
Julie StensethRussiaIvan Magalhaes QUALIFIED
Kadeem FlosiBrazilStephen Shaw NEW
Stacey MacleadCanadaBernardo Dominic UNQUALIFIED
Morrow RutaSpainAsiya Javayant NEGOTIATION
Salvatore StockhamBrazilIvan Magalhaes PROPOSAL
James ButtCanadaBernardo Dominic NEW
Cody SaylorsGermanyOnyama Limba QUALIFIED
Claire TollnerUnited KingdomIvan Magalhaes QUALIFIED
Arvin AlbaresArgentinaAnna Fali RENEWAL
Adams MorascaGermanyIvan Magalhaes PROPOSAL
Aruna FigeroaRussiaElwin Sharvill RENEWAL
Silvio SlusarskiUnited KingdomIvan Magalhaes QUALIFIED
Murillo MaletSpainAnna Fali QUALIFIED
David DarakjyJapanXuxue Feng PROPOSAL
Jeanfrancois VenereCanadaAnna Fali NEGOTIATION
Izzy GarufiIndiaAsiya Javayant UNQUALIFIED
Faith GillianItalyStephen Shaw NEGOTIATION
Kadeem FlosiCanadaBernardo Dominic RENEWAL
Ricardo GauchoIndiaAnna Fali QUALIFIED
Octavia MaletItalyIoni Bowcher NEW
Izzy GarufiRussiaAnna Fali RENEWAL
James ButtFranceAmy Elsner UNQUALIFIED
Misaki RoysterUnited KingdomStephen Shaw QUALIFIED
Morrow RutaAustraliaAnna Fali PROPOSAL
Cody SaylorsSpainStephen Shaw NEGOTIATION
Mujtaba NickaJapanBernardo Dominic RENEWAL
Octavia MaletItalyAmy Elsner UNQUALIFIED
Aika InouyeArgentinaElwin Sharvill UNQUALIFIED
Aika InouyeItalyStephen Shaw RENEWAL
Aruna FigeroaAustraliaElwin Sharvill NEGOTIATION
Cody SaylorsBrazilIvan Magalhaes QUALIFIED
Ashley DoeGermanyBernardo Dominic UNQUALIFIED
Leon OldroydArgentinaElwin Sharvill QUALIFIED
Chavez BriddickSpainIvan Magalhaes PROPOSAL
Tony FollerJapanAmy Elsner UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Maisha RulapaughCanadaAmy Elsner RENEWAL
Darci PoquetteGermanyAmy Elsner QUALIFIED
Claire TollnerCanadaStephen Shaw QUALIFIED
Octavia MaletSpainIvan Magalhaes RENEWAL
Deepesh ChuiBrazilStephen Shaw NEW
Clifford RimJapanXuxue Feng NEW
Jefferson SchemmerItalyBernardo Dominic NEGOTIATION
Kadeem FlosiArgentinaElwin Sharvill NEGOTIATION
Darci PoquetteArgentinaElwin Sharvill PROPOSAL
Maisha RulapaughJapanIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000James ButtAustralia2025-09-01Chemel, James L Cpa UNQUALIFIED82Bernardo Dominic
1001Darci PoquetteAustralia2025-09-07King, Christopher A Esq QUALIFIED22Onyama Limba
1002Salvatore StockhamSpain2025-09-16Benton, John B Jr QUALIFIED54Bernardo Dominic
1003Maria MarrierRussia2025-09-13Morlong Associates QUALIFIED13Stephen Shaw
1004Ricardo GauchoBrazil2025-09-08Chemel, James L Cpa RENEWAL83Amy Elsner
1005Mayumi KolmetzJapan2025-09-22Chanay, Jeffrey A Esq NEGOTIATION58Ioni Bowcher
1006Leja CaldareraFrance2025-09-13Commercial Press NEGOTIATION87Ioni Bowcher
1007Munro FerenczIndia2025-09-10Morlong Associates NEW43Bernardo Dominic
1008Kaitlin OstroskyItaly2025-09-16Dorl, James J Esq QUALIFIED54Onyama Limba
1009Antonio CaudyBrazil2025-09-22Buckley Miller Wright UNQUALIFIED31Amy Elsner
1010Maisha RulapaughArgentina2025-08-31Rousseaux, Michael Esq QUALIFIED35Ivan Magalhaes
1011Adams MorascaArgentina2025-09-16Feiner Bros RENEWAL17Amy Elsner
1012Aruna FigeroaUnited Kingdom2025-09-19Feiner Bros QUALIFIED5Onyama Limba
1013Kadeem FlosiJapan2025-09-13Dorl, James J Esq PROPOSAL70Amy Elsner
1014Alejandro PerinBrazil2025-09-13Feiner Bros QUALIFIED49Bernardo Dominic
1015Misaki RoysterJapan2025-09-10Dorl, James J Esq UNQUALIFIED98Ioni Bowcher
1016James ButtBrazil2025-09-25Rousseaux, Michael Esq NEGOTIATION59Asiya Javayant
1017Mujtaba NickaGermany2025-09-08Feiner Bros QUALIFIED72Xuxue Feng
1018Clifford RimArgentina2025-09-23Feiner Bros NEW26Ivan Magalhaes
1019James ButtGermany2025-09-23Dorl, James J Esq RENEWAL2Elwin Sharvill
1020Silvio SlusarskiSpain2025-09-01Rangoni Of Florence NEGOTIATION75Asiya Javayant
1021Aika InouyeItaly2025-09-08Dorl, James J Esq PROPOSAL3Ivan Magalhaes
1022Izzy GarufiBrazil2025-09-23Rangoni Of Florence NEW24Anna Fali
1023Tony FollerFrance2025-09-18King, Christopher A Esq NEGOTIATION97Onyama Limba
1024Aruna FigeroaSpain2025-09-16Chanay, Jeffrey A Esq PROPOSAL76Stephen Shaw
1025Maria MarrierFrance2025-09-09Commercial Press QUALIFIED11Elwin Sharvill
1026Octavia MaletIndia2025-09-12Dorl, James J Esq NEGOTIATION42Asiya Javayant
1027Salvatore StockhamBrazil2025-09-23Rousseaux, Michael Esq PROPOSAL0Onyama Limba
1028Izzy GarufiCanada2025-09-12Morlong Associates PROPOSAL20Anna Fali
1029Aruna FigeroaAustralia2025-09-04Truhlar And Truhlar Attys NEGOTIATION17Anna Fali
1030Julie StensethJapan2025-09-23Rangoni Of Florence NEGOTIATION96Onyama Limba
1031Maria MarrierGermany2025-09-25Rangoni Of Florence NEW35Asiya Javayant
1032Tony FollerFrance2025-09-27Chapman, Ross E Esq UNQUALIFIED9Ioni Bowcher
1033Ashley DoeItaly2025-09-26Benton, John B Jr RENEWAL17Amy Elsner
1034Deepesh ChuiBrazil2025-09-27Chemel, James L Cpa PROPOSAL27Ioni Bowcher
1035Faith GillianRussia2025-09-04Dorl, James J Esq RENEWAL46Ivan Magalhaes
1036Chavez BriddickAustralia2025-09-20Chanay, Jeffrey A Esq QUALIFIED46Asiya Javayant
1037Maria MarrierAustralia2025-09-23King, Christopher A Esq QUALIFIED24Amy Elsner
1038Cody SaylorsUnited Kingdom2025-09-07Feltz Printing Service NEGOTIATION83Onyama Limba
1039Octavia MaletItaly2025-09-02Chemel, James L Cpa NEW82Ioni Bowcher
1040Tony FollerItaly2025-09-12King, Christopher A Esq NEGOTIATION57Onyama Limba
1041Adams MorascaUnited Kingdom2025-09-05Printing Dimensions RENEWAL36Ivan Magalhaes
1042Ricardo GauchoFrance2025-09-16Chapman, Ross E Esq NEW5Ivan Magalhaes
1043Chavez BriddickCanada2025-09-23Feiner Bros UNQUALIFIED79Asiya Javayant
1044Cody SaylorsIndia2025-09-24Chapman, Ross E Esq UNQUALIFIED79Ivan Magalhaes
1045Jones VocelkaJapan2025-09-21Chanay, Jeffrey A Esq PROPOSAL58Onyama Limba
1046Julie StensethItaly2025-09-13Chemel, James L Cpa RENEWAL97Onyama Limba
1047Kadeem FlosiIndia2025-09-04Truhlar And Truhlar Attys QUALIFIED36Amy Elsner
1048James ButtIndia2025-09-14Dorl, James J Esq RENEWAL78Stephen Shaw
1049Octavia MaletBrazil2025-09-18Chapman, Ross E Esq UNQUALIFIED41Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiRussiaElwin Sharvill RENEWAL
Mujtaba NickaSpainBernardo Dominic RENEWAL
Darci PoquetteBrazilStephen Shaw QUALIFIED
Greenwood BologniaItalyAsiya Javayant PROPOSAL
James ButtIndiaAmy Elsner RENEWAL
James ButtItalyIvan Magalhaes NEGOTIATION
Tony FollerFranceAsiya Javayant NEW
Juan WieserCanadaBernardo Dominic RENEWAL
David DarakjyCanadaBernardo Dominic QUALIFIED
Izzy GarufiFranceAnna Fali RENEWAL
Maisha RulapaughFranceAnna Fali NEW
Emily WhobreyJapanBernardo Dominic RENEWAL
Izzy GarufiJapanIvan Magalhaes QUALIFIED
Juan WieserAustraliaAmy Elsner QUALIFIED
Arvin AlbaresArgentinaAsiya Javayant RENEWAL
Costa DilliardAustraliaIoni Bowcher UNQUALIFIED
Francesco ShinkoBrazilBernardo Dominic RENEWAL
Maria MarrierGermanyAsiya Javayant UNQUALIFIED
Adams MorascaRussiaElwin Sharvill NEW
Aruna FigeroaUnited KingdomAnna Fali PROPOSAL
Alejandro PerinCanadaAmy Elsner NEW
Stacey MacleadBrazilIoni Bowcher PROPOSAL
Jeanfrancois VenereUnited KingdomStephen Shaw NEGOTIATION
Maria MarrierCanadaIoni Bowcher NEW
Greenwood BologniaIndiaXuxue Feng RENEWAL
Deepesh ChuiSpainBernardo Dominic NEGOTIATION
Octavia MaletRussiaIvan Magalhaes RENEWAL
James ButtCanadaIvan Magalhaes UNQUALIFIED
Jones VocelkaBrazilOnyama Limba NEGOTIATION
Leja CaldareraCanadaIvan Magalhaes NEW
Jeanfrancois VenereBrazilAsiya Javayant NEGOTIATION
Morrow RutaGermanyIoni Bowcher RENEWAL
Jeanfrancois VenereRussiaAnna Fali NEGOTIATION
Faith GillianRussiaAnna Fali NEW
Leja CaldareraUnited KingdomIvan Magalhaes NEGOTIATION
Ashley DoeRussiaStephen Shaw RENEWAL
Adams MorascaItalyAmy Elsner QUALIFIED
Mayumi KolmetzCanadaStephen Shaw RENEWAL
Cody SaylorsSpainBernardo Dominic UNQUALIFIED
Mujtaba NickaJapanAnna Fali NEW
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Silvio SlusarskiUnited KingdomIoni Bowcher UNQUALIFIED
Jennifer AmigonAustraliaBernardo Dominic UNQUALIFIED
Claire TollnerJapanIoni Bowcher PROPOSAL
Mujtaba NickaArgentinaAmy Elsner UNQUALIFIED
Alejandro PerinAustraliaIvan Magalhaes NEW
Ivar PaprockiSpainBernardo Dominic PROPOSAL
Leon OldroydUnited KingdomIvan Magalhaes RENEWAL
Jones VocelkaRussiaBernardo Dominic NEGOTIATION
James ButtRussiaIvan Magalhaes PROPOSAL
Frozen Columns
Name
Clifford Rim
Aika Inouye
Tony Foller
Smith Glick
Greenwood Bolognia
Izzy Garufi
Izzy Garufi
Arvin Albares
Ivar Paprocki
Maisha Rulapaugh
Munro Ferencz
Rodrigues Campain
Jeanfrancois Venere
Ivar Paprocki
Jennifer Amigon
Aika Inouye
Aruna Figeroa
Darci Poquette
Maria Marrier
Morrow Ruta
Darci Poquette
James Butt
Kaitlin Ostrosky
Sinclair Waycott
Antonio Caudy
Aruna Figeroa
Costa Dilliard
Alejandro Perin
Juan Wieser
Alejandro Perin
Nicolas Iturbide
Faith Gillian
Darci Poquette
Isabel Bowley
Ricardo Gaucho
Ivar Paprocki
Arvin Albares
Munro Ferencz
Emily Whobrey
Kaitlin Ostrosky
Ivar Paprocki
Maria Marrier
Leja Caldarera
Aruna Figeroa
Rodrigues Campain
Darci Poquette
Jones Vocelka
Kaitlin Ostrosky
Kaitlin Ostrosky
David Darakjy
IdCountryDate
1000Japan2025-09-19
1001Canada2025-09-16
1002Russia2025-09-02
1003Germany2025-08-30
1004Spain2025-09-22
1005Japan2025-09-14
1006Brazil2025-09-21
1007Spain2025-08-30
1008Japan2025-09-26
1009Brazil2025-09-18
1010Australia2025-09-07
1011Brazil2025-09-14
1012Russia2025-09-07
1013United Kingdom2025-08-30
1014Italy2025-09-15
1015Australia2025-09-18
1016Australia2025-09-12
1017Spain2025-09-12
1018Australia2025-09-27
1019India2025-08-29
1020United Kingdom2025-09-02
1021Russia2025-09-04
1022Canada2025-09-12
1023Argentina2025-09-04
1024Russia2025-09-05
1025Brazil2025-09-16
1026India2025-09-06
1027Japan2025-09-17
1028United Kingdom2025-09-05
1029Japan2025-09-23
1030Canada2025-09-11
1031Spain2025-09-01
1032Russia2025-09-21
1033United Kingdom2025-09-20
1034Italy2025-09-12
1035Japan2025-09-02
1036India2025-08-31
1037Spain2025-09-13
1038Canada2025-09-01
1039Germany2025-09-07
1040Spain2025-09-01
1041France2025-09-14
1042India2025-09-01
1043Italy2025-09-09
1044United Kingdom2025-09-17
1045Italy2025-09-06
1046India2025-09-17
1047Russia2025-09-15
1048Argentina2025-09-03
1049Italy2025-09-06

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000Australia2025-09-25
Juan Wieser1001Italy2025-09-20
Jones Vocelka1002Germany2025-09-26
Mujtaba Nicka1003India2025-09-26
Aditya Kusko1004United Kingdom2025-09-20
Adams Morasca1005Brazil2025-09-18
Leon Oldroyd1006Japan2025-09-27
Claire Tollner1007Japan2025-09-13
Adams Morasca1008Japan2025-09-23
Jeanfrancois Venere1009Russia2025-09-21
Jones Vocelka1010India2025-09-01
Ivar Paprocki1011Brazil2025-09-19
Clifford Rim1012Russia2025-08-30
Aruna Figeroa1013Argentina2025-09-08
Emily Whobrey1014Germany2025-09-25
Claire Tollner1015United Kingdom2025-09-02
Chavez Briddick1016Italy2025-09-07
Kadeem Flosi1017Argentina2025-09-01
Emily Whobrey1018India2025-09-12
Maria Marrier1019India2025-09-06
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aditya KuskoIndiaAnna Fali UNQUALIFIED
Silvio SlusarskiCanadaOnyama Limba UNQUALIFIED
Jefferson SchemmerSpainIoni Bowcher QUALIFIED
Leon OldroydBrazilBernardo Dominic RENEWAL
Chavez BriddickFranceIoni Bowcher RENEWAL
Mujtaba NickaSpainOnyama Limba QUALIFIED
Deepesh ChuiArgentinaStephen Shaw UNQUALIFIED
Salvatore StockhamSpainXuxue Feng NEGOTIATION
Costa DilliardIndiaOnyama Limba NEW
Faith GillianSpainBernardo Dominic NEGOTIATION
Murillo MaletFranceIvan Magalhaes PROPOSAL
Claire TollnerJapanElwin Sharvill UNQUALIFIED
Rodrigues CampainItalyAmy Elsner NEW
Deepesh ChuiSpainAsiya Javayant RENEWAL
Kaitlin OstroskyIndiaIvan Magalhaes NEW
Munro FerenczSpainOnyama Limba UNQUALIFIED
Jones VocelkaArgentinaIvan Magalhaes NEW
Kadeem FlosiSpainBernardo Dominic RENEWAL
Silvio SlusarskiSpainIoni Bowcher QUALIFIED
David DarakjyAustraliaAmy Elsner PROPOSAL
Jeanfrancois VenereRussiaIvan Magalhaes RENEWAL
Clifford RimArgentinaIvan Magalhaes UNQUALIFIED
Jones VocelkaSpainStephen Shaw NEW
James ButtAustraliaElwin Sharvill PROPOSAL
Smith GlickJapanElwin Sharvill QUALIFIED
Chavez BriddickRussiaAsiya Javayant QUALIFIED
Faith GillianJapanStephen Shaw RENEWAL
Cody SaylorsBrazilStephen Shaw PROPOSAL
Aruna FigeroaUnited KingdomOnyama Limba PROPOSAL
Smith GlickAustraliaIvan Magalhaes PROPOSAL
Claire TollnerRussiaIvan Magalhaes PROPOSAL
Kadeem FlosiFranceIvan Magalhaes UNQUALIFIED
Murillo MaletCanadaXuxue Feng NEGOTIATION
Jones VocelkaRussiaAsiya Javayant QUALIFIED
Aika InouyeUnited KingdomOnyama Limba QUALIFIED
David DarakjyFranceOnyama Limba UNQUALIFIED
Jennifer AmigonIndiaStephen Shaw RENEWAL
Juan WieserRussiaIvan Magalhaes QUALIFIED
Wickens NestleIndiaAmy Elsner NEW
Francesco ShinkoItalyStephen Shaw NEW

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