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
Adams MorascaItalyIvan Magalhaes NEW
Alejandro PerinAustraliaBernardo Dominic QUALIFIED
Cody SaylorsUnited KingdomOnyama Limba NEW
Rodrigues CampainItalyAnna Fali UNQUALIFIED
Sinclair WaycottRussiaXuxue Feng RENEWAL
Maisha RulapaughSpainIoni Bowcher RENEWAL
Costa DilliardCanadaIoni Bowcher RENEWAL
Morrow RutaIndiaStephen Shaw NEGOTIATION
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
David DarakjyAustraliaIoni Bowcher UNQUALIFIED
Kadeem FlosiUnited KingdomElwin Sharvill NEW
Izzy GarufiSpainAsiya Javayant RENEWAL
Jones VocelkaAustraliaIoni Bowcher PROPOSAL
Francesco ShinkoBrazilElwin Sharvill UNQUALIFIED
Kadeem FlosiBrazilAsiya Javayant QUALIFIED
Maria MarrierBrazilElwin Sharvill RENEWAL
Mujtaba NickaIndiaBernardo Dominic UNQUALIFIED
Isabel BowleyArgentinaOnyama Limba RENEWAL
Silvio SlusarskiFranceAmy Elsner NEW
Morrow RutaUnited KingdomStephen Shaw UNQUALIFIED
James ButtJapanAsiya Javayant RENEWAL
Aruna FigeroaSpainAmy Elsner PROPOSAL
Leja CaldareraFranceBernardo Dominic NEGOTIATION
Maria MarrierJapanAnna Fali NEGOTIATION
Chavez BriddickItalyIoni Bowcher RENEWAL
Aditya KuskoRussiaAmy Elsner RENEWAL
Aika InouyeSpainAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaXuxue Feng NEW
James ButtRussiaIvan Magalhaes RENEWAL
Greenwood BologniaIndiaAsiya Javayant PROPOSAL
Ricardo GauchoCanadaBernardo Dominic UNQUALIFIED
Jeanfrancois VenereRussiaIvan Magalhaes RENEWAL
James ButtSpainXuxue Feng NEW
Octavia MaletBrazilAmy Elsner QUALIFIED
Mujtaba NickaIndiaElwin Sharvill NEW
Aika InouyeAustraliaOnyama Limba RENEWAL
Cody SaylorsAustraliaAsiya Javayant NEGOTIATION
Greenwood BologniaArgentinaXuxue Feng NEGOTIATION
Emily WhobreyFranceAnna Fali UNQUALIFIED
Antonio CaudyCanadaStephen Shaw QUALIFIED
Chavez BriddickUnited KingdomOnyama Limba QUALIFIED
Jefferson SchemmerUnited KingdomOnyama Limba NEGOTIATION
Deepesh ChuiBrazilAsiya Javayant QUALIFIED
Wickens NestleIndiaIvan Magalhaes QUALIFIED
Aika InouyeUnited KingdomIoni Bowcher PROPOSAL
Nicolas IturbideUnited KingdomXuxue Feng PROPOSAL
Maria MarrierFranceOnyama Limba UNQUALIFIED
Greenwood BologniaItalyElwin Sharvill QUALIFIED
Maisha RulapaughFranceAmy Elsner NEGOTIATION
Jeanfrancois VenereItalyIvan Magalhaes QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Darci PoquetteFranceIvan Magalhaes NEW
Juan WieserSpainIoni Bowcher UNQUALIFIED
Jennifer AmigonJapanElwin Sharvill RENEWAL
Smith GlickSpainElwin Sharvill RENEWAL
Ivar PaprockiFranceStephen Shaw NEGOTIATION
Sinclair WaycottBrazilOnyama Limba NEW
Ivar PaprockiArgentinaXuxue Feng UNQUALIFIED
Leon OldroydBrazilAmy Elsner NEW
Jeanfrancois VenereItalyOnyama Limba PROPOSAL
Jefferson SchemmerSpainXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jefferson SchemmerArgentina2025-09-17Morlong Associates UNQUALIFIED51Asiya Javayant
1001Adams MorascaJapan2025-10-03King, Christopher A Esq NEW64Xuxue Feng
1002Morrow RutaUnited Kingdom2025-09-16King, Christopher A Esq NEW7Elwin Sharvill
1003Darci PoquetteUnited Kingdom2025-10-05Dorl, James J Esq NEGOTIATION47Amy Elsner
1004Claire TollnerArgentina2025-10-09Dorl, James J Esq RENEWAL88Ioni Bowcher
1005Costa DilliardCanada2025-10-05Buckley Miller Wright UNQUALIFIED19Anna Fali
1006Misaki RoysterCanada2025-09-28Feltz Printing Service QUALIFIED4Anna Fali
1007Murillo MaletGermany2025-09-24Rangoni Of Florence PROPOSAL85Ivan Magalhaes
1008Juan WieserSpain2025-09-27Rangoni Of Florence QUALIFIED95Onyama Limba
1009Antonio CaudyFrance2025-09-20Buckley Miller Wright PROPOSAL80Onyama Limba
1010Deepesh ChuiGermany2025-09-20Feltz Printing Service PROPOSAL84Elwin Sharvill
1011Smith GlickSpain2025-09-27Feiner Bros RENEWAL25Onyama Limba
1012Alejandro PerinFrance2025-09-28Truhlar And Truhlar Attys QUALIFIED5Amy Elsner
1013Kaitlin OstroskyBrazil2025-10-02Commercial Press NEW12Stephen Shaw
1014Stacey MacleadAustralia2025-09-30Commercial Press PROPOSAL13Amy Elsner
1015Johnson SergiBrazil2025-09-20Buckley Miller Wright QUALIFIED6Bernardo Dominic
1016Faith GillianItaly2025-09-23Chapman, Ross E Esq RENEWAL50Amy Elsner
1017Aika InouyeAustralia2025-09-26Feltz Printing Service NEGOTIATION71Bernardo Dominic
1018Aruna FigeroaCanada2025-10-10Truhlar And Truhlar Attys NEGOTIATION91Ivan Magalhaes
1019Ivar PaprockiGermany2025-10-08Morlong Associates UNQUALIFIED27Amy Elsner
1020Silvio SlusarskiAustralia2025-10-10Chanay, Jeffrey A Esq NEW72Ioni Bowcher
1021Ashley DoeArgentina2025-09-28King, Christopher A Esq QUALIFIED9Ivan Magalhaes
1022Kadeem FlosiJapan2025-10-02Chanay, Jeffrey A Esq PROPOSAL86Onyama Limba
1023Murillo MaletCanada2025-10-04King, Christopher A Esq PROPOSAL60Ioni Bowcher
1024David DarakjyBrazil2025-09-22Chapman, Ross E Esq NEGOTIATION94Asiya Javayant
1025Kadeem FlosiJapan2025-10-01Commercial Press PROPOSAL23Ioni Bowcher
1026Jeanfrancois VenereGermany2025-10-08Truhlar And Truhlar Attys RENEWAL41Bernardo Dominic
1027Ricardo GauchoIndia2025-09-14Chanay, Jeffrey A Esq PROPOSAL27Onyama Limba
1028Clifford RimAustralia2025-09-21Benton, John B Jr NEGOTIATION91Ivan Magalhaes
1029Kaitlin OstroskyArgentina2025-09-17Feltz Printing Service NEGOTIATION41Ioni Bowcher
1030Jeanfrancois VenereItaly2025-10-12Morlong Associates RENEWAL78Amy Elsner
1031Maria MarrierFrance2025-09-25Rangoni Of Florence UNQUALIFIED60Stephen Shaw
1032Chavez BriddickBrazil2025-09-14Morlong Associates QUALIFIED8Ivan Magalhaes
1033Isabel BowleySpain2025-10-04Truhlar And Truhlar Attys NEW77Amy Elsner
1034Greenwood BologniaItaly2025-10-02Feiner Bros NEW51Asiya Javayant
1035Izzy GarufiItaly2025-09-26Feiner Bros RENEWAL69Ivan Magalhaes
1036Murillo MaletJapan2025-09-19Buckley Miller Wright PROPOSAL48Anna Fali
1037Misaki RoysterItaly2025-09-16Printing Dimensions NEW2Elwin Sharvill
1038Morrow RutaJapan2025-09-20Feltz Printing Service QUALIFIED39Amy Elsner
1039James ButtIndia2025-10-12Buckley Miller Wright RENEWAL84Onyama Limba
1040Jefferson SchemmerUnited Kingdom2025-09-22Feltz Printing Service PROPOSAL10Ivan Magalhaes
1041Aika InouyeSpain2025-09-22Buckley Miller Wright QUALIFIED4Ivan Magalhaes
1042Aruna FigeroaIndia2025-10-05Rousseaux, Michael Esq NEW30Amy Elsner
1043Leja CaldareraAustralia2025-10-01Chemel, James L Cpa PROPOSAL32Ioni Bowcher
1044Nicolas IturbideJapan2025-09-21Rangoni Of Florence UNQUALIFIED4Asiya Javayant
1045Silvio SlusarskiIndia2025-10-01King, Christopher A Esq UNQUALIFIED26Bernardo Dominic
1046Mayumi KolmetzCanada2025-09-15Rangoni Of Florence NEGOTIATION82Bernardo Dominic
1047Tony FollerAustralia2025-10-01Dorl, James J Esq RENEWAL86Amy Elsner
1048Leja CaldareraAustralia2025-10-03Truhlar And Truhlar Attys PROPOSAL43Amy Elsner
1049Costa DilliardGermany2025-10-06Buckley Miller Wright UNQUALIFIED10Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Jeanfrancois VenereIndiaXuxue Feng NEGOTIATION
Cody SaylorsIndiaAnna Fali RENEWAL
Aditya KuskoItalyIoni Bowcher RENEWAL
Juan WieserRussiaStephen Shaw NEW
Francesco ShinkoArgentinaIvan Magalhaes QUALIFIED
Aika InouyeCanadaAsiya Javayant UNQUALIFIED
Ashley DoeRussiaElwin Sharvill RENEWAL
Clifford RimBrazilBernardo Dominic NEW
Aditya KuskoUnited KingdomBernardo Dominic RENEWAL
Kadeem FlosiAustraliaXuxue Feng NEGOTIATION
David DarakjyCanadaOnyama Limba PROPOSAL
Tony FollerSpainIoni Bowcher NEW
Salvatore StockhamAustraliaIoni Bowcher UNQUALIFIED
Maisha RulapaughSpainIoni Bowcher PROPOSAL
Izzy GarufiJapanAsiya Javayant NEW
Ivar PaprockiArgentinaStephen Shaw PROPOSAL
Stacey MacleadGermanyAmy Elsner PROPOSAL
Cody SaylorsFranceAnna Fali QUALIFIED
Kadeem FlosiBrazilAmy Elsner PROPOSAL
Murillo MaletBrazilAnna Fali PROPOSAL
Stacey MacleadSpainStephen Shaw RENEWAL
Costa DilliardBrazilIoni Bowcher NEGOTIATION
Cody SaylorsCanadaIvan Magalhaes NEW
Leon OldroydIndiaElwin Sharvill QUALIFIED
Chavez BriddickCanadaXuxue Feng PROPOSAL
Murillo MaletUnited KingdomElwin Sharvill QUALIFIED
Rodrigues CampainCanadaElwin Sharvill NEW
Emily WhobreyBrazilAnna Fali UNQUALIFIED
Izzy GarufiRussiaElwin Sharvill NEW
Chavez BriddickBrazilAmy Elsner RENEWAL
Aika InouyeArgentinaElwin Sharvill RENEWAL
Darci PoquetteAustraliaAsiya Javayant QUALIFIED
Jones VocelkaFranceBernardo Dominic RENEWAL
Sinclair WaycottCanadaAmy Elsner UNQUALIFIED
Deepesh ChuiCanadaStephen Shaw QUALIFIED
Octavia MaletArgentinaIvan Magalhaes RENEWAL
Antonio CaudyArgentinaAnna Fali PROPOSAL
Tony FollerJapanXuxue Feng UNQUALIFIED
Izzy GarufiAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottUnited KingdomOnyama Limba PROPOSAL
Maria MarrierBrazilOnyama Limba UNQUALIFIED
Chavez BriddickFranceXuxue Feng UNQUALIFIED
Maisha RulapaughItalyIoni Bowcher NEGOTIATION
Jones VocelkaCanadaAsiya Javayant NEW
Morrow RutaCanadaOnyama Limba QUALIFIED
David DarakjyBrazilStephen Shaw UNQUALIFIED
Aika InouyeUnited KingdomAmy Elsner RENEWAL
Mayumi KolmetzArgentinaAmy Elsner NEGOTIATION
Rodrigues CampainAustraliaIoni Bowcher NEW
Salvatore StockhamIndiaOnyama Limba NEGOTIATION
Frozen Columns
Name
Aika Inouye
Darci Poquette
Alejandro Perin
Greenwood Bolognia
Maria Marrier
Leja Caldarera
Leja Caldarera
Jeanfrancois Venere
Silvio Slusarski
Julie Stenseth
Izzy Garufi
Clifford Rim
James Butt
Jones Vocelka
Greenwood Bolognia
Misaki Royster
Leon Oldroyd
Salvatore Stockham
Stacey Maclead
Chavez Briddick
Chavez Briddick
Morrow Ruta
Aditya Kusko
Leon Oldroyd
Murillo Malet
Smith Glick
Ashley Doe
Alejandro Perin
Adams Morasca
Faith Gillian
Ricardo Gaucho
Cody Saylors
Wickens Nestle
Mayumi Kolmetz
Julie Stenseth
Jefferson Schemmer
Jones Vocelka
Deepesh Chui
Stacey Maclead
Nicolas Iturbide
Aika Inouye
Greenwood Bolognia
Johnson Sergi
Adams Morasca
Greenwood Bolognia
Arvin Albares
Stacey Maclead
Mujtaba Nicka
Ivar Paprocki
Stacey Maclead
IdCountryDate
1000France2025-09-19
1001Russia2025-10-11
1002Germany2025-09-16
1003Japan2025-10-06
1004Russia2025-10-11
1005Brazil2025-09-21
1006Australia2025-10-05
1007United Kingdom2025-10-01
1008Canada2025-10-12
1009Australia2025-10-13
1010India2025-10-05
1011Spain2025-09-25
1012Germany2025-09-19
1013Italy2025-09-14
1014Germany2025-09-25
1015Canada2025-10-06
1016Italy2025-09-17
1017Canada2025-09-24
1018United Kingdom2025-10-08
1019Brazil2025-09-27
1020Australia2025-09-15
1021United Kingdom2025-10-07
1022Spain2025-10-10
1023Argentina2025-10-10
1024United Kingdom2025-09-25
1025Canada2025-10-12
1026Japan2025-10-10
1027Argentina2025-10-02
1028Russia2025-09-16
1029Brazil2025-09-23
1030Argentina2025-10-06
1031Canada2025-09-28
1032Argentina2025-09-28
1033Spain2025-09-16
1034Australia2025-09-26
1035Germany2025-10-13
1036Germany2025-09-23
1037Japan2025-09-16
1038France2025-09-24
1039Canada2025-10-08
1040Japan2025-09-23
1041Australia2025-10-13
1042Germany2025-10-08
1043Italy2025-09-23
1044Brazil2025-09-26
1045United Kingdom2025-09-28
1046Japan2025-09-21
1047India2025-10-02
1048India2025-10-03
1049Russia2025-09-29

On-Demand Data

NameIdCountryDate
Alejandro Perin1000Canada2025-10-03
Mujtaba Nicka1001Brazil2025-10-09
Mujtaba Nicka1002Australia2025-10-10
Isabel Bowley1003India2025-09-15
James Butt1004Italy2025-09-25
Jeanfrancois Venere1005Germany2025-10-07
Alejandro Perin1006Japan2025-09-16
Salvatore Stockham1007Argentina2025-09-29
James Butt1008Canada2025-10-13
Sinclair Waycott1009France2025-09-15
Clifford Rim1010Russia2025-10-13
Smith Glick1011Brazil2025-09-29
Aditya Kusko1012Argentina2025-09-27
Murillo Malet1013Germany2025-10-10
Claire Tollner1014Canada2025-10-10
Francesco Shinko1015India2025-10-10
Maisha Rulapaugh1016Argentina2025-09-25
Emily Whobrey1017India2025-09-26
Rodrigues Campain1018Russia2025-10-12
Mujtaba Nicka1019Italy2025-10-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeGermanyStephen Shaw QUALIFIED
Jeanfrancois VenereIndiaOnyama Limba RENEWAL
Kadeem FlosiJapanBernardo Dominic QUALIFIED
Maria MarrierIndiaOnyama Limba PROPOSAL
Wickens NestleItalyOnyama Limba NEW
Clifford RimUnited KingdomIoni Bowcher RENEWAL
Izzy GarufiBrazilIoni Bowcher PROPOSAL
Greenwood BologniaAustraliaOnyama Limba UNQUALIFIED
James ButtCanadaXuxue Feng UNQUALIFIED
Jefferson SchemmerUnited KingdomStephen Shaw UNQUALIFIED
Kadeem FlosiGermanyStephen Shaw RENEWAL
Murillo MaletSpainIoni Bowcher QUALIFIED
Alejandro PerinSpainElwin Sharvill UNQUALIFIED
Costa DilliardFranceBernardo Dominic PROPOSAL
Morrow RutaJapanAsiya Javayant NEGOTIATION
Smith GlickFranceAnna Fali NEGOTIATION
Morrow RutaJapanElwin Sharvill QUALIFIED
Juan WieserFranceXuxue Feng UNQUALIFIED
Isabel BowleyIndiaAnna Fali UNQUALIFIED
Maria MarrierArgentinaAnna Fali RENEWAL
Wickens NestleBrazilIoni Bowcher NEW
David DarakjyFranceAnna Fali QUALIFIED
Mujtaba NickaCanadaAnna Fali QUALIFIED
Ivar PaprockiFranceAmy Elsner PROPOSAL
Rodrigues CampainIndiaAmy Elsner QUALIFIED
Stacey MacleadGermanyStephen Shaw PROPOSAL
Mayumi KolmetzRussiaIoni Bowcher NEW
Izzy GarufiGermanyStephen Shaw NEW
Ashley DoeBrazilAmy Elsner RENEWAL
James ButtAustraliaAsiya Javayant NEGOTIATION
Munro FerenczAustraliaOnyama Limba PROPOSAL
Aika InouyeGermanyAnna Fali UNQUALIFIED
Mayumi KolmetzFranceStephen Shaw UNQUALIFIED
Julie StensethCanadaElwin Sharvill UNQUALIFIED
Mujtaba NickaAustraliaIvan Magalhaes PROPOSAL
James ButtIndiaAnna Fali NEW
Maria MarrierAustraliaStephen Shaw NEGOTIATION
Aruna FigeroaBrazilXuxue Feng QUALIFIED
Francesco ShinkoCanadaIoni Bowcher UNQUALIFIED
Sinclair WaycottSpainXuxue Feng 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>