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
Ivar PaprockiBrazilXuxue Feng NEGOTIATION
Leja CaldareraItalyElwin Sharvill NEGOTIATION
Cody SaylorsFranceXuxue Feng UNQUALIFIED
Silvio SlusarskiArgentinaBernardo Dominic QUALIFIED
Kadeem FlosiFranceIoni Bowcher RENEWAL
Aika InouyeRussiaOnyama Limba UNQUALIFIED
Misaki RoysterJapanStephen Shaw RENEWAL
Antonio CaudyIndiaOnyama Limba NEGOTIATION
Alejandro PerinUnited KingdomStephen Shaw UNQUALIFIED
Jones VocelkaRussiaOnyama Limba NEW
Jennifer AmigonAustraliaAnna Fali QUALIFIED
Ricardo GauchoSpainOnyama Limba PROPOSAL
James ButtUnited KingdomXuxue Feng PROPOSAL
Darci PoquetteItalyIoni Bowcher NEGOTIATION
Arvin AlbaresUnited KingdomStephen Shaw NEGOTIATION
Faith GillianFranceElwin Sharvill PROPOSAL
Julie StensethRussiaBernardo Dominic UNQUALIFIED
Chavez BriddickIndiaIvan Magalhaes NEGOTIATION
Adams MorascaJapanBernardo Dominic NEGOTIATION
Costa DilliardUnited KingdomOnyama Limba UNQUALIFIED
Rodrigues CampainGermanyAsiya Javayant QUALIFIED
Mayumi KolmetzAustraliaXuxue Feng NEW
Antonio CaudyIndiaStephen Shaw UNQUALIFIED
Aditya KuskoGermanyXuxue Feng NEW
Tony FollerArgentinaIvan Magalhaes QUALIFIED
Mayumi KolmetzFranceBernardo Dominic PROPOSAL
Jefferson SchemmerUnited KingdomAsiya Javayant NEW
Adams MorascaBrazilAsiya Javayant UNQUALIFIED
Aruna FigeroaFranceOnyama Limba RENEWAL
Kaitlin OstroskyBrazilOnyama Limba NEW
James ButtFranceAnna Fali QUALIFIED
David DarakjyArgentinaAnna Fali RENEWAL
Cody SaylorsRussiaIvan Magalhaes RENEWAL
Leja CaldareraItalyOnyama Limba NEW
Leon OldroydIndiaAsiya Javayant PROPOSAL
Claire TollnerBrazilStephen Shaw NEGOTIATION
Costa DilliardIndiaStephen Shaw PROPOSAL
Izzy GarufiSpainAnna Fali NEW
Faith GillianSpainElwin Sharvill QUALIFIED
Sinclair WaycottJapanBernardo Dominic PROPOSAL
Arvin AlbaresRussiaAmy Elsner QUALIFIED
Costa DilliardBrazilStephen Shaw UNQUALIFIED
Isabel BowleyUnited KingdomAsiya Javayant PROPOSAL
Arvin AlbaresIndiaIvan Magalhaes PROPOSAL
Munro FerenczSpainAnna Fali RENEWAL
Kadeem FlosiSpainAmy Elsner UNQUALIFIED
Aika InouyeGermanyBernardo Dominic UNQUALIFIED
Aika InouyeAustraliaOnyama Limba NEGOTIATION
James ButtCanadaIvan Magalhaes NEGOTIATION
Antonio CaudyItalyIoni Bowcher PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Adams MorascaRussiaElwin Sharvill RENEWAL
Costa DilliardBrazilAnna Fali PROPOSAL
Aruna FigeroaJapanOnyama Limba UNQUALIFIED
Mayumi KolmetzCanadaBernardo Dominic QUALIFIED
Antonio CaudyItalyElwin Sharvill QUALIFIED
Silvio SlusarskiSpainAmy Elsner PROPOSAL
Jefferson SchemmerFranceAnna Fali NEGOTIATION
Mayumi KolmetzArgentinaAmy Elsner UNQUALIFIED
Munro FerenczArgentinaStephen Shaw QUALIFIED
Darci PoquetteSpainXuxue Feng PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoCanada2026-05-18Buckley Miller Wright UNQUALIFIED34Amy Elsner
1001Kadeem FlosiJapan2026-05-01Morlong Associates QUALIFIED7Ivan Magalhaes
1002Rodrigues CampainGermany2026-05-24Feiner Bros NEGOTIATION16Bernardo Dominic
1003Kaitlin OstroskyGermany2026-05-03Buckley Miller Wright PROPOSAL47Amy Elsner
1004Misaki RoysterJapan2026-05-27Chanay, Jeffrey A Esq NEW65Asiya Javayant
1005Claire TollnerItaly2026-05-19Chemel, James L Cpa RENEWAL70Amy Elsner
1006Antonio CaudySpain2026-04-29Feltz Printing Service UNQUALIFIED47Stephen Shaw
1007David DarakjySpain2026-05-06Morlong Associates UNQUALIFIED49Ivan Magalhaes
1008Aditya KuskoUnited Kingdom2026-05-03Morlong Associates NEGOTIATION18Elwin Sharvill
1009Sinclair WaycottIndia2026-05-14Printing Dimensions RENEWAL17Asiya Javayant
1010Ricardo GauchoSpain2026-05-23Commercial Press RENEWAL64Amy Elsner
1011Antonio CaudyBrazil2026-05-09King, Christopher A Esq RENEWAL24Onyama Limba
1012Izzy GarufiCanada2026-05-17Benton, John B Jr RENEWAL74Amy Elsner
1013Mujtaba NickaArgentina2026-05-01Feltz Printing Service QUALIFIED66Bernardo Dominic
1014Jennifer AmigonIndia2026-05-10Morlong Associates RENEWAL35Ivan Magalhaes
1015Mujtaba NickaItaly2026-05-20Chanay, Jeffrey A Esq UNQUALIFIED28Amy Elsner
1016Arvin AlbaresSpain2026-05-03Buckley Miller Wright UNQUALIFIED0Ioni Bowcher
1017Jefferson SchemmerBrazil2026-05-04Commercial Press RENEWAL60Amy Elsner
1018Aditya KuskoArgentina2026-05-26Feiner Bros NEGOTIATION16Elwin Sharvill
1019Ivar PaprockiArgentina2026-05-05Chemel, James L Cpa NEW35Bernardo Dominic
1020Adams MorascaJapan2026-04-28Feltz Printing Service UNQUALIFIED8Stephen Shaw
1021Mayumi KolmetzSpain2026-05-09Dorl, James J Esq PROPOSAL13Amy Elsner
1022Munro FerenczJapan2026-05-12Rousseaux, Michael Esq PROPOSAL93Ioni Bowcher
1023Claire TollnerSpain2026-05-15Commercial Press RENEWAL40Asiya Javayant
1024Jefferson SchemmerArgentina2026-05-24Rangoni Of Florence UNQUALIFIED37Onyama Limba
1025James ButtBrazil2026-05-06Feltz Printing Service PROPOSAL6Ioni Bowcher
1026Greenwood BologniaFrance2026-05-03Chapman, Ross E Esq UNQUALIFIED46Elwin Sharvill
1027Deepesh ChuiIndia2026-05-24Feiner Bros UNQUALIFIED10Ioni Bowcher
1028Johnson SergiFrance2026-05-14Rousseaux, Michael Esq QUALIFIED77Stephen Shaw
1029Chavez BriddickSpain2026-05-20Rousseaux, Michael Esq NEGOTIATION73Elwin Sharvill
1030Smith GlickArgentina2026-05-08Benton, John B Jr UNQUALIFIED28Stephen Shaw
1031Rodrigues CampainCanada2026-05-08Benton, John B Jr NEW87Asiya Javayant
1032Arvin AlbaresBrazil2026-05-25Printing Dimensions QUALIFIED50Ioni Bowcher
1033Julie StensethBrazil2026-05-22Rangoni Of Florence NEGOTIATION96Ivan Magalhaes
1034Francesco ShinkoItaly2026-05-01Chapman, Ross E Esq NEGOTIATION55Bernardo Dominic
1035Julie StensethIndia2026-05-07Truhlar And Truhlar Attys PROPOSAL0Onyama Limba
1036Misaki RoysterIndia2026-05-22King, Christopher A Esq PROPOSAL55Elwin Sharvill
1037Claire TollnerBrazil2026-05-06Buckley Miller Wright PROPOSAL55Xuxue Feng
1038Leon OldroydFrance2026-05-06Feltz Printing Service NEW67Asiya Javayant
1039Silvio SlusarskiAustralia2026-05-22Dorl, James J Esq NEW35Elwin Sharvill
1040Mayumi KolmetzAustralia2026-05-24Chemel, James L Cpa NEW44Amy Elsner
1041Ashley DoeArgentina2026-05-23Printing Dimensions UNQUALIFIED7Anna Fali
1042James ButtItaly2026-05-19Rousseaux, Michael Esq UNQUALIFIED78Stephen Shaw
1043Kadeem FlosiFrance2026-05-27Truhlar And Truhlar Attys QUALIFIED24Asiya Javayant
1044Chavez BriddickUnited Kingdom2026-05-06Buckley Miller Wright NEW15Stephen Shaw
1045Maisha RulapaughBrazil2026-04-29Printing Dimensions PROPOSAL29Xuxue Feng
1046Maria MarrierRussia2026-04-30Buckley Miller Wright NEGOTIATION60Anna Fali
1047Munro FerenczGermany2026-05-09Chapman, Ross E Esq RENEWAL67Stephen Shaw
1048Nicolas IturbideRussia2026-04-29King, Christopher A Esq NEGOTIATION73Amy Elsner
1049Claire TollnerIndia2026-05-25Rousseaux, Michael Esq NEW90Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Mujtaba NickaAustraliaAmy Elsner QUALIFIED
Faith GillianBrazilXuxue Feng NEGOTIATION
Mayumi KolmetzCanadaOnyama Limba UNQUALIFIED
Jones VocelkaAustraliaIvan Magalhaes PROPOSAL
Isabel BowleyUnited KingdomOnyama Limba QUALIFIED
Jeanfrancois VenereRussiaXuxue Feng RENEWAL
Sinclair WaycottRussiaIvan Magalhaes RENEWAL
Misaki RoysterJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereUnited KingdomOnyama Limba UNQUALIFIED
Jones VocelkaUnited KingdomXuxue Feng UNQUALIFIED
Wickens NestleBrazilIvan Magalhaes QUALIFIED
Maisha RulapaughItalyIoni Bowcher UNQUALIFIED
Chavez BriddickItalyXuxue Feng RENEWAL
Silvio SlusarskiSpainStephen Shaw NEGOTIATION
Faith GillianJapanIoni Bowcher NEGOTIATION
Jeanfrancois VenereIndiaAnna Fali NEW
Wickens NestleCanadaBernardo Dominic NEGOTIATION
Aika InouyeIndiaAnna Fali RENEWAL
Alejandro PerinUnited KingdomIoni Bowcher RENEWAL
Jeanfrancois VenereBrazilElwin Sharvill NEGOTIATION
Aruna FigeroaArgentinaOnyama Limba PROPOSAL
Johnson SergiBrazilStephen Shaw RENEWAL
Antonio CaudyArgentinaAmy Elsner NEGOTIATION
Isabel BowleyCanadaIvan Magalhaes NEW
Murillo MaletIndiaIvan Magalhaes RENEWAL
Darci PoquetteArgentinaAsiya Javayant QUALIFIED
Maria MarrierBrazilXuxue Feng UNQUALIFIED
Isabel BowleyArgentinaAnna Fali NEGOTIATION
Stacey MacleadItalyIvan Magalhaes NEGOTIATION
Sinclair WaycottGermanyAnna Fali RENEWAL
Smith GlickFranceIoni Bowcher NEW
Tony FollerFranceAsiya Javayant NEW
Johnson SergiRussiaAmy Elsner UNQUALIFIED
Ricardo GauchoAustraliaAnna Fali RENEWAL
Antonio CaudyBrazilXuxue Feng RENEWAL
Francesco ShinkoArgentinaElwin Sharvill PROPOSAL
Clifford RimGermanyAmy Elsner NEGOTIATION
Claire TollnerAustraliaAnna Fali NEGOTIATION
Greenwood BologniaFranceXuxue Feng RENEWAL
Ricardo GauchoSpainXuxue Feng UNQUALIFIED
Jefferson SchemmerCanadaAsiya Javayant NEW
Leon OldroydCanadaAmy Elsner QUALIFIED
Mujtaba NickaRussiaAsiya Javayant RENEWAL
Aditya KuskoFranceElwin Sharvill NEW
Leon OldroydArgentinaAmy Elsner RENEWAL
Leja CaldareraGermanyXuxue Feng NEW
Adams MorascaCanadaStephen Shaw NEGOTIATION
Greenwood BologniaAustraliaStephen Shaw NEW
Deepesh ChuiItalyBernardo Dominic UNQUALIFIED
Aditya KuskoArgentinaXuxue Feng UNQUALIFIED
Frozen Columns
Name
Emily Whobrey
Clifford Rim
Julie Stenseth
Juan Wieser
Munro Ferencz
Francesco Shinko
Munro Ferencz
Nicolas Iturbide
Silvio Slusarski
Wickens Nestle
Kaitlin Ostrosky
Jones Vocelka
Aditya Kusko
Arvin Albares
Adams Morasca
Morrow Ruta
Chavez Briddick
Kaitlin Ostrosky
Silvio Slusarski
Juan Wieser
Nicolas Iturbide
Aika Inouye
Deepesh Chui
Francesco Shinko
Misaki Royster
Kaitlin Ostrosky
Izzy Garufi
Claire Tollner
Ricardo Gaucho
David Darakjy
Clifford Rim
Juan Wieser
Emily Whobrey
Aika Inouye
Sinclair Waycott
Jeanfrancois Venere
Deepesh Chui
Greenwood Bolognia
Adams Morasca
Silvio Slusarski
Sinclair Waycott
Aika Inouye
Alejandro Perin
Ricardo Gaucho
Costa Dilliard
Ashley Doe
Kadeem Flosi
Leon Oldroyd
Jennifer Amigon
Tony Foller
IdCountryDate
1000Russia2026-05-08
1001United Kingdom2026-05-12
1002Canada2026-05-18
1003France2026-05-02
1004Germany2026-04-28
1005France2026-05-17
1006Germany2026-05-17
1007Brazil2026-05-20
1008Japan2026-05-07
1009France2026-04-30
1010Japan2026-05-16
1011Germany2026-04-29
1012Germany2026-05-12
1013Germany2026-05-02
1014Germany2026-04-28
1015Argentina2026-05-19
1016Germany2026-05-12
1017Australia2026-05-14
1018Argentina2026-05-23
1019Russia2026-05-14
1020Spain2026-05-11
1021Australia2026-05-17
1022Brazil2026-05-01
1023Canada2026-05-27
1024Russia2026-05-14
1025Japan2026-05-04
1026United Kingdom2026-05-22
1027Brazil2026-05-26
1028Italy2026-04-30
1029Australia2026-05-03
1030Argentina2026-05-08
1031Canada2026-05-18
1032Japan2026-05-13
1033India2026-05-26
1034Brazil2026-05-11
1035Russia2026-05-13
1036Russia2026-05-17
1037Italy2026-05-01
1038Australia2026-05-22
1039Germany2026-05-14
1040Russia2026-05-08
1041United Kingdom2026-05-07
1042India2026-05-15
1043Argentina2026-05-10
1044Germany2026-05-17
1045India2026-05-13
1046Spain2026-05-14
1047India2026-05-08
1048Spain2026-05-16
1049India2026-05-17

On-Demand Data

NameIdCountryDate
Claire Tollner1000Japan2026-05-10
James Butt1001Russia2026-05-25
Adams Morasca1002Japan2026-05-18
Leja Caldarera1003Argentina2026-05-25
Maria Marrier1004India2026-05-24
Kaitlin Ostrosky1005Canada2026-05-05
Greenwood Bolognia1006Canada2026-05-12
Emily Whobrey1007Japan2026-05-15
Jefferson Schemmer1008Japan2026-05-10
Smith Glick1009United Kingdom2026-05-06
Maisha Rulapaugh1010Canada2026-05-26
Smith Glick1011Brazil2026-05-16
James Butt1012France2026-05-14
Kadeem Flosi1013Canada2026-05-18
Kadeem Flosi1014Spain2026-05-11
Stacey Maclead1015India2026-05-06
Mayumi Kolmetz1016Argentina2026-05-10
Wickens Nestle1017Spain2026-05-27
Jeanfrancois Venere1018United Kingdom2026-05-18
Ashley Doe1019United Kingdom2026-05-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteItalyAmy Elsner NEW
Wickens NestleAustraliaElwin Sharvill PROPOSAL
Alejandro PerinBrazilAmy Elsner PROPOSAL
Aika InouyeCanadaOnyama Limba RENEWAL
Octavia MaletBrazilStephen Shaw NEW
James ButtFranceIoni Bowcher NEGOTIATION
Deepesh ChuiArgentinaElwin Sharvill NEGOTIATION
Arvin AlbaresCanadaAnna Fali RENEWAL
Francesco ShinkoUnited KingdomElwin Sharvill PROPOSAL
Juan WieserGermanyIvan Magalhaes NEGOTIATION
James ButtSpainAsiya Javayant NEW
Costa DilliardRussiaOnyama Limba QUALIFIED
Leja CaldareraItalyOnyama Limba QUALIFIED
Ashley DoeGermanyAmy Elsner UNQUALIFIED
Kaitlin OstroskyUnited KingdomXuxue Feng NEGOTIATION
Jones VocelkaGermanyAmy Elsner NEGOTIATION
Aditya KuskoJapanBernardo Dominic NEGOTIATION
James ButtFranceAmy Elsner QUALIFIED
Faith GillianFranceAmy Elsner UNQUALIFIED
Aika InouyeAustraliaStephen Shaw UNQUALIFIED
Salvatore StockhamBrazilIvan Magalhaes PROPOSAL
Kadeem FlosiBrazilStephen Shaw NEGOTIATION
Izzy GarufiArgentinaIoni Bowcher UNQUALIFIED
Deepesh ChuiIndiaIvan Magalhaes RENEWAL
Salvatore StockhamUnited KingdomOnyama Limba NEGOTIATION
Adams MorascaItalyStephen Shaw RENEWAL
Kadeem FlosiIndiaIvan Magalhaes PROPOSAL
Jennifer AmigonIndiaOnyama Limba NEW
Misaki RoysterItalyIoni Bowcher NEGOTIATION
Adams MorascaItalyIvan Magalhaes NEGOTIATION
Juan WieserBrazilAnna Fali NEGOTIATION
Stacey MacleadIndiaAsiya Javayant QUALIFIED
Francesco ShinkoItalyIoni Bowcher UNQUALIFIED
Ivar PaprockiBrazilXuxue Feng RENEWAL
Ricardo GauchoAustraliaXuxue Feng NEW
Antonio CaudySpainIoni Bowcher QUALIFIED
Cody SaylorsFranceAnna Fali NEGOTIATION
Sinclair WaycottRussiaOnyama Limba UNQUALIFIED
Mayumi KolmetzUnited KingdomStephen Shaw NEW
Antonio CaudyGermanyIvan Magalhaes 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>