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
Julie StensethRussiaElwin Sharvill UNQUALIFIED
Isabel BowleyArgentinaElwin Sharvill UNQUALIFIED
Mayumi KolmetzJapanElwin Sharvill RENEWAL
Faith GillianArgentinaAsiya Javayant RENEWAL
Adams MorascaRussiaBernardo Dominic UNQUALIFIED
James ButtItalyAsiya Javayant RENEWAL
Ivar PaprockiBrazilIvan Magalhaes PROPOSAL
Kadeem FlosiFranceAsiya Javayant QUALIFIED
Ashley DoeUnited KingdomAmy Elsner UNQUALIFIED
Johnson SergiSpainAmy Elsner NEW
Chavez BriddickUnited KingdomXuxue Feng UNQUALIFIED
Cody SaylorsCanadaOnyama Limba RENEWAL
Costa DilliardSpainOnyama Limba QUALIFIED
Darci PoquetteFranceAnna Fali PROPOSAL
Jeanfrancois VenereRussiaAnna Fali NEW
Costa DilliardIndiaIvan Magalhaes NEW
Misaki RoysterCanadaIoni Bowcher QUALIFIED
Jennifer AmigonAustraliaAsiya Javayant UNQUALIFIED
Aika InouyeGermanyBernardo Dominic NEW
Jennifer AmigonRussiaOnyama Limba PROPOSAL
Costa DilliardCanadaXuxue Feng NEGOTIATION
Ivar PaprockiSpainBernardo Dominic PROPOSAL
Ivar PaprockiArgentinaIvan Magalhaes PROPOSAL
Darci PoquetteGermanyIoni Bowcher PROPOSAL
Darci PoquetteCanadaXuxue Feng NEW
Izzy GarufiSpainBernardo Dominic RENEWAL
Mayumi KolmetzCanadaAnna Fali QUALIFIED
Chavez BriddickIndiaOnyama Limba NEGOTIATION
Ricardo GauchoItalyAnna Fali NEW
Chavez BriddickArgentinaXuxue Feng RENEWAL
Antonio CaudyAustraliaAmy Elsner NEGOTIATION
Kaitlin OstroskyJapanOnyama Limba PROPOSAL
Smith GlickUnited KingdomIoni Bowcher UNQUALIFIED
Maisha RulapaughAustraliaIvan Magalhaes UNQUALIFIED
Izzy GarufiJapanIoni Bowcher PROPOSAL
Izzy GarufiArgentinaAsiya Javayant RENEWAL
Morrow RutaArgentinaXuxue Feng UNQUALIFIED
Ashley DoeSpainAsiya Javayant PROPOSAL
Darci PoquetteRussiaOnyama Limba QUALIFIED
Kaitlin OstroskyBrazilAmy Elsner RENEWAL
Ivar PaprockiArgentinaXuxue Feng NEGOTIATION
Munro FerenczAustraliaAmy Elsner PROPOSAL
Tony FollerGermanyXuxue Feng PROPOSAL
Alejandro PerinUnited KingdomStephen Shaw RENEWAL
Deepesh ChuiGermanyIoni Bowcher PROPOSAL
Tony FollerItalyAmy Elsner RENEWAL
Arvin AlbaresGermanyIoni Bowcher NEGOTIATION
Jeanfrancois VenereCanadaAmy Elsner NEW
Cody SaylorsUnited KingdomAnna Fali UNQUALIFIED
Adams MorascaFranceIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamJapanIvan Magalhaes UNQUALIFIED
Antonio CaudyArgentinaAnna Fali RENEWAL
Leja CaldareraItalyStephen Shaw PROPOSAL
Salvatore StockhamJapanAnna Fali PROPOSAL
Kadeem FlosiJapanIoni Bowcher PROPOSAL
Tony FollerArgentinaStephen Shaw NEGOTIATION
Ivar PaprockiJapanAnna Fali UNQUALIFIED
Ashley DoeJapanIoni Bowcher RENEWAL
Emily WhobreyUnited KingdomElwin Sharvill PROPOSAL
Stacey MacleadFranceBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Greenwood BologniaIndia2025-10-13Rousseaux, Michael Esq NEW88Bernardo Dominic
1001Salvatore StockhamArgentina2025-09-27Morlong Associates NEW36Elwin Sharvill
1002Cody SaylorsUnited Kingdom2025-10-16Rangoni Of Florence QUALIFIED23Amy Elsner
1003Silvio SlusarskiArgentina2025-09-25Chanay, Jeffrey A Esq NEW71Ivan Magalhaes
1004Morrow RutaGermany2025-10-17Rangoni Of Florence PROPOSAL23Anna Fali
1005Aika InouyeBrazil2025-10-12Chapman, Ross E Esq NEW80Bernardo Dominic
1006Kadeem FlosiSpain2025-09-27Truhlar And Truhlar Attys RENEWAL91Anna Fali
1007Stacey MacleadCanada2025-09-30Buckley Miller Wright UNQUALIFIED36Anna Fali
1008Arvin AlbaresJapan2025-10-18Rangoni Of Florence UNQUALIFIED15Onyama Limba
1009Smith GlickCanada2025-10-11Rangoni Of Florence UNQUALIFIED55Stephen Shaw
1010Maisha RulapaughFrance2025-10-17Morlong Associates RENEWAL82Xuxue Feng
1011Greenwood BologniaJapan2025-10-08Printing Dimensions RENEWAL57Bernardo Dominic
1012Clifford RimJapan2025-10-04Truhlar And Truhlar Attys NEW55Ivan Magalhaes
1013Sinclair WaycottItaly2025-10-13Buckley Miller Wright NEW34Xuxue Feng
1014Kaitlin OstroskyAustralia2025-10-16King, Christopher A Esq RENEWAL49Anna Fali
1015David DarakjyItaly2025-10-07King, Christopher A Esq UNQUALIFIED28Anna Fali
1016Johnson SergiArgentina2025-10-13Chanay, Jeffrey A Esq RENEWAL78Onyama Limba
1017Smith GlickGermany2025-09-21Rousseaux, Michael Esq PROPOSAL38Stephen Shaw
1018Murillo MaletGermany2025-10-06Printing Dimensions PROPOSAL60Xuxue Feng
1019Jefferson SchemmerFrance2025-09-24Feltz Printing Service NEGOTIATION95Anna Fali
1020Julie StensethAustralia2025-10-03Rousseaux, Michael Esq RENEWAL53Xuxue Feng
1021Costa DilliardSpain2025-09-20Chanay, Jeffrey A Esq RENEWAL93Onyama Limba
1022Morrow RutaFrance2025-09-30Dorl, James J Esq UNQUALIFIED65Stephen Shaw
1023Mujtaba NickaJapan2025-09-28Feiner Bros NEGOTIATION61Stephen Shaw
1024Aruna FigeroaUnited Kingdom2025-10-17Chanay, Jeffrey A Esq NEW24Asiya Javayant
1025Costa DilliardArgentina2025-10-03Rousseaux, Michael Esq QUALIFIED76Stephen Shaw
1026Isabel BowleyItaly2025-10-13Morlong Associates NEW97Anna Fali
1027Julie StensethIndia2025-10-12Benton, John B Jr RENEWAL16Asiya Javayant
1028Izzy GarufiRussia2025-09-22Benton, John B Jr RENEWAL18Asiya Javayant
1029Jefferson SchemmerUnited Kingdom2025-10-19Chemel, James L Cpa NEW49Stephen Shaw
1030Leja CaldareraIndia2025-10-17Feltz Printing Service NEW64Bernardo Dominic
1031Costa DilliardGermany2025-10-17Chanay, Jeffrey A Esq PROPOSAL17Anna Fali
1032Rodrigues CampainSpain2025-10-13Printing Dimensions NEW58Elwin Sharvill
1033Octavia MaletItaly2025-10-12Feiner Bros NEW0Ivan Magalhaes
1034David DarakjyUnited Kingdom2025-10-03Morlong Associates QUALIFIED66Stephen Shaw
1035Wickens NestleGermany2025-10-02Feltz Printing Service UNQUALIFIED76Asiya Javayant
1036Juan WieserJapan2025-10-02Chapman, Ross E Esq QUALIFIED61Elwin Sharvill
1037Ivar PaprockiArgentina2025-10-02Rangoni Of Florence UNQUALIFIED93Amy Elsner
1038Juan WieserUnited Kingdom2025-10-12Rousseaux, Michael Esq RENEWAL50Asiya Javayant
1039Chavez BriddickArgentina2025-09-28Feltz Printing Service QUALIFIED51Ioni Bowcher
1040Maisha RulapaughCanada2025-09-27Chanay, Jeffrey A Esq NEW34Ioni Bowcher
1041Greenwood BologniaGermany2025-10-06Rousseaux, Michael Esq QUALIFIED71Anna Fali
1042Silvio SlusarskiUnited Kingdom2025-10-17Feltz Printing Service NEW2Stephen Shaw
1043Stacey MacleadCanada2025-09-24Chemel, James L Cpa PROPOSAL47Xuxue Feng
1044Julie StensethAustralia2025-09-27Chapman, Ross E Esq UNQUALIFIED55Anna Fali
1045Aika InouyeFrance2025-09-25Chemel, James L Cpa QUALIFIED6Bernardo Dominic
1046Jeanfrancois VenereCanada2025-09-27Chapman, Ross E Esq NEW36Bernardo Dominic
1047Darci PoquetteFrance2025-10-15Truhlar And Truhlar Attys RENEWAL27Asiya Javayant
1048Clifford RimUnited Kingdom2025-10-17Rangoni Of Florence QUALIFIED23Amy Elsner
1049Claire TollnerItaly2025-09-23Morlong Associates NEW96Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Julie StensethJapanIvan Magalhaes NEW
Darci PoquetteCanadaStephen Shaw NEGOTIATION
Jefferson SchemmerAustraliaAsiya Javayant NEGOTIATION
Emily WhobreyAustraliaStephen Shaw QUALIFIED
Aruna FigeroaFranceXuxue Feng QUALIFIED
Claire TollnerRussiaIvan Magalhaes UNQUALIFIED
Mayumi KolmetzRussiaXuxue Feng RENEWAL
Munro FerenczUnited KingdomStephen Shaw PROPOSAL
Faith GillianRussiaXuxue Feng NEW
Adams MorascaJapanAmy Elsner PROPOSAL
Mayumi KolmetzRussiaAnna Fali NEGOTIATION
Rodrigues CampainSpainElwin Sharvill RENEWAL
Emily WhobreyGermanyBernardo Dominic NEGOTIATION
Morrow RutaAustraliaIoni Bowcher NEGOTIATION
Munro FerenczArgentinaIoni Bowcher PROPOSAL
Ivar PaprockiItalyOnyama Limba PROPOSAL
Kadeem FlosiFranceOnyama Limba RENEWAL
Smith GlickGermanyStephen Shaw RENEWAL
Antonio CaudyAustraliaAnna Fali UNQUALIFIED
Francesco ShinkoGermanyIoni Bowcher NEGOTIATION
Antonio CaudyFranceAsiya Javayant UNQUALIFIED
Octavia MaletSpainBernardo Dominic NEW
Isabel BowleyRussiaStephen Shaw NEW
Silvio SlusarskiBrazilAmy Elsner QUALIFIED
Johnson SergiGermanyBernardo Dominic NEW
Darci PoquetteJapanAmy Elsner QUALIFIED
Leon OldroydIndiaAmy Elsner PROPOSAL
Isabel BowleyCanadaBernardo Dominic NEGOTIATION
Stacey MacleadUnited KingdomOnyama Limba NEGOTIATION
Nicolas IturbideBrazilIoni Bowcher PROPOSAL
Antonio CaudySpainOnyama Limba QUALIFIED
Morrow RutaArgentinaStephen Shaw NEW
Juan WieserGermanyStephen Shaw PROPOSAL
Ricardo GauchoSpainOnyama Limba PROPOSAL
Francesco ShinkoJapanAsiya Javayant NEW
Jeanfrancois VenereUnited KingdomElwin Sharvill PROPOSAL
Jeanfrancois VenereGermanyIvan Magalhaes QUALIFIED
Darci PoquetteBrazilBernardo Dominic QUALIFIED
Nicolas IturbideSpainAsiya Javayant RENEWAL
Aika InouyeItalyIoni Bowcher PROPOSAL
Maisha RulapaughUnited KingdomOnyama Limba RENEWAL
Jennifer AmigonArgentinaAsiya Javayant RENEWAL
Octavia MaletUnited KingdomAnna Fali PROPOSAL
Wickens NestleUnited KingdomIoni Bowcher QUALIFIED
Tony FollerCanadaOnyama Limba UNQUALIFIED
Tony FollerAustraliaAmy Elsner UNQUALIFIED
Rodrigues CampainArgentinaIoni Bowcher QUALIFIED
Izzy GarufiCanadaBernardo Dominic UNQUALIFIED
Munro FerenczJapanAmy Elsner QUALIFIED
James ButtFranceAsiya Javayant UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Misaki Royster
Jennifer Amigon
Leja Caldarera
Darci Poquette
Mayumi Kolmetz
Leja Caldarera
Munro Ferencz
Tony Foller
Ivar Paprocki
Greenwood Bolognia
Maria Marrier
Cody Saylors
Ricardo Gaucho
Alejandro Perin
Tony Foller
Silvio Slusarski
Kaitlin Ostrosky
Arvin Albares
Jennifer Amigon
Munro Ferencz
Faith Gillian
Jeanfrancois Venere
Jefferson Schemmer
Maria Marrier
Maisha Rulapaugh
Clifford Rim
Misaki Royster
Smith Glick
Jennifer Amigon
Faith Gillian
Aruna Figeroa
Salvatore Stockham
Alejandro Perin
Faith Gillian
Leon Oldroyd
Antonio Caudy
Deepesh Chui
Adams Morasca
Cody Saylors
Johnson Sergi
Izzy Garufi
Leon Oldroyd
Misaki Royster
Greenwood Bolognia
Faith Gillian
Misaki Royster
Smith Glick
Ashley Doe
Kadeem Flosi
IdCountryDate
1000India2025-10-17
1001Canada2025-10-15
1002India2025-10-18
1003Brazil2025-10-02
1004Argentina2025-10-11
1005Germany2025-10-10
1006India2025-09-26
1007India2025-09-30
1008Russia2025-10-06
1009Australia2025-10-12
1010Germany2025-10-10
1011United Kingdom2025-10-17
1012India2025-10-17
1013Brazil2025-10-06
1014Argentina2025-09-26
1015United Kingdom2025-09-30
1016Brazil2025-10-04
1017Italy2025-10-19
1018Brazil2025-10-14
1019United Kingdom2025-10-14
1020Brazil2025-10-13
1021India2025-10-18
1022Japan2025-10-12
1023United Kingdom2025-10-08
1024Italy2025-09-23
1025Germany2025-09-29
1026Australia2025-09-29
1027Germany2025-10-01
1028Canada2025-09-21
1029Germany2025-09-21
1030Russia2025-10-02
1031Japan2025-10-17
1032Italy2025-10-03
1033Italy2025-10-06
1034Brazil2025-09-27
1035Russia2025-09-28
1036Australia2025-10-14
1037Germany2025-10-05
1038Brazil2025-10-06
1039Canada2025-09-21
1040Spain2025-10-19
1041Australia2025-10-14
1042Italy2025-10-19
1043Japan2025-10-18
1044France2025-10-17
1045Italy2025-09-28
1046Italy2025-10-07
1047Australia2025-10-05
1048Spain2025-09-30
1049Germany2025-09-26

On-Demand Data

NameIdCountryDate
Aika Inouye1000France2025-10-11
Nicolas Iturbide1001Russia2025-09-26
Silvio Slusarski1002India2025-10-05
Murillo Malet1003United Kingdom2025-10-15
Deepesh Chui1004Germany2025-09-23
Cody Saylors1005Japan2025-10-14
Jones Vocelka1006Spain2025-09-30
Costa Dilliard1007Russia2025-10-18
Arvin Albares1008Brazil2025-10-19
Jefferson Schemmer1009Brazil2025-10-19
Jennifer Amigon1010Spain2025-10-03
Munro Ferencz1011Germany2025-10-18
Julie Stenseth1012Russia2025-10-17
Ricardo Gaucho1013Japan2025-10-07
Leon Oldroyd1014Canada2025-09-22
Greenwood Bolognia1015Japan2025-09-27
Kadeem Flosi1016Argentina2025-10-11
Munro Ferencz1017Germany2025-10-08
Costa Dilliard1018Russia2025-10-05
Francesco Shinko1019Canada2025-10-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Isabel BowleyJapanAsiya Javayant PROPOSAL
Ivar PaprockiItalyStephen Shaw PROPOSAL
Maisha RulapaughCanadaXuxue Feng UNQUALIFIED
Juan WieserSpainAnna Fali QUALIFIED
Morrow RutaGermanyElwin Sharvill NEW
Jefferson SchemmerAustraliaElwin Sharvill UNQUALIFIED
Clifford RimAustraliaBernardo Dominic NEW
Leon OldroydIndiaIvan Magalhaes NEGOTIATION
Smith GlickItalyElwin Sharvill RENEWAL
Maria MarrierUnited KingdomXuxue Feng NEW
Ashley DoeBrazilXuxue Feng NEGOTIATION
Stacey MacleadAustraliaIvan Magalhaes UNQUALIFIED
Maisha RulapaughArgentinaOnyama Limba QUALIFIED
Maisha RulapaughIndiaStephen Shaw QUALIFIED
James ButtUnited KingdomBernardo Dominic PROPOSAL
Faith GillianUnited KingdomAnna Fali UNQUALIFIED
Leon OldroydIndiaAmy Elsner QUALIFIED
Nicolas IturbideRussiaAmy Elsner RENEWAL
Ivar PaprockiJapanIoni Bowcher UNQUALIFIED
Nicolas IturbideFranceIvan Magalhaes PROPOSAL
Costa DilliardRussiaAsiya Javayant NEW
Murillo MaletItalyAsiya Javayant PROPOSAL
Adams MorascaRussiaIoni Bowcher NEGOTIATION
Jones VocelkaSpainBernardo Dominic QUALIFIED
Leon OldroydRussiaXuxue Feng RENEWAL
Maisha RulapaughFranceAnna Fali RENEWAL
Tony FollerArgentinaAsiya Javayant NEW
Ashley DoeArgentinaXuxue Feng NEW
Sinclair WaycottJapanAsiya Javayant QUALIFIED
Octavia MaletFranceOnyama Limba RENEWAL
Aditya KuskoBrazilElwin Sharvill NEGOTIATION
Clifford RimJapanIvan Magalhaes PROPOSAL
Smith GlickIndiaStephen Shaw UNQUALIFIED
Darci PoquetteAustraliaAnna Fali NEGOTIATION
Emily WhobreyBrazilIoni Bowcher NEGOTIATION
Cody SaylorsFranceAmy Elsner PROPOSAL
Munro FerenczGermanyIoni Bowcher NEGOTIATION
Munro FerenczJapanStephen Shaw QUALIFIED
Maria MarrierRussiaXuxue Feng RENEWAL
Claire TollnerJapanOnyama Limba 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>