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
Aruna FigeroaUnited KingdomAmy Elsner PROPOSAL
Salvatore StockhamGermanyIoni Bowcher RENEWAL
Morrow RutaAustraliaElwin Sharvill RENEWAL
Aruna FigeroaUnited KingdomXuxue Feng PROPOSAL
Ricardo GauchoRussiaBernardo Dominic PROPOSAL
Antonio CaudyCanadaStephen Shaw QUALIFIED
Chavez BriddickFranceIvan Magalhaes UNQUALIFIED
Johnson SergiFranceAnna Fali RENEWAL
Rodrigues CampainFranceBernardo Dominic PROPOSAL
Clifford RimCanadaElwin Sharvill NEW
Ricardo GauchoRussiaElwin Sharvill NEW
Aika InouyeUnited KingdomOnyama Limba PROPOSAL
Claire TollnerAustraliaIoni Bowcher QUALIFIED
Adams MorascaUnited KingdomIoni Bowcher RENEWAL
Ivar PaprockiGermanyBernardo Dominic QUALIFIED
Ashley DoeIndiaElwin Sharvill PROPOSAL
Octavia MaletJapanAnna Fali NEW
Munro FerenczRussiaAnna Fali RENEWAL
Ashley DoeBrazilXuxue Feng PROPOSAL
Aika InouyeIndiaAnna Fali NEGOTIATION
David DarakjyJapanElwin Sharvill UNQUALIFIED
Kadeem FlosiRussiaAsiya Javayant PROPOSAL
Salvatore StockhamCanadaXuxue Feng NEW
Faith GillianBrazilIoni Bowcher NEGOTIATION
Murillo MaletAustraliaIvan Magalhaes NEGOTIATION
Adams MorascaGermanyOnyama Limba NEW
Aruna FigeroaBrazilAmy Elsner PROPOSAL
Mayumi KolmetzIndiaXuxue Feng NEGOTIATION
Julie StensethJapanOnyama Limba QUALIFIED
Juan WieserRussiaAmy Elsner UNQUALIFIED
Tony FollerArgentinaIvan Magalhaes PROPOSAL
Francesco ShinkoBrazilBernardo Dominic PROPOSAL
Ricardo GauchoAustraliaAnna Fali UNQUALIFIED
Silvio SlusarskiFranceAsiya Javayant RENEWAL
Morrow RutaUnited KingdomAsiya Javayant QUALIFIED
Deepesh ChuiRussiaBernardo Dominic NEGOTIATION
Jefferson SchemmerRussiaBernardo Dominic QUALIFIED
Kadeem FlosiRussiaStephen Shaw RENEWAL
James ButtUnited KingdomStephen Shaw RENEWAL
Kaitlin OstroskyJapanAnna Fali QUALIFIED
Aditya KuskoCanadaAnna Fali NEGOTIATION
Ashley DoeGermanyAnna Fali NEGOTIATION
Aika InouyeRussiaAsiya Javayant RENEWAL
Sinclair WaycottFranceAmy Elsner NEW
Faith GillianCanadaElwin Sharvill QUALIFIED
Mayumi KolmetzBrazilElwin Sharvill UNQUALIFIED
Cody SaylorsItalyAsiya Javayant UNQUALIFIED
Jeanfrancois VenereBrazilAmy Elsner RENEWAL
Johnson SergiJapanXuxue Feng UNQUALIFIED
Chavez BriddickIndiaIoni Bowcher NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Greenwood BologniaAustraliaBernardo Dominic NEGOTIATION
Salvatore StockhamIndiaAsiya Javayant NEGOTIATION
Deepesh ChuiBrazilStephen Shaw NEW
Johnson SergiAustraliaIoni Bowcher PROPOSAL
Rodrigues CampainJapanXuxue Feng NEGOTIATION
Wickens NestleSpainIoni Bowcher UNQUALIFIED
Leja CaldareraJapanIvan Magalhaes PROPOSAL
Ricardo GauchoBrazilAmy Elsner RENEWAL
David DarakjyUnited KingdomBernardo Dominic NEGOTIATION
Arvin AlbaresArgentinaAsiya Javayant PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickRussia2025-07-28Rousseaux, Michael Esq UNQUALIFIED48Elwin Sharvill
1001Tony FollerCanada2025-08-10Commercial Press NEW89Onyama Limba
1002Jefferson SchemmerArgentina2025-08-06Rousseaux, Michael Esq PROPOSAL80Xuxue Feng
1003Octavia MaletRussia2025-08-03Morlong Associates RENEWAL97Elwin Sharvill
1004Murillo MaletAustralia2025-07-19Rangoni Of Florence NEW46Onyama Limba
1005Sinclair WaycottBrazil2025-07-21Chapman, Ross E Esq PROPOSAL89Ivan Magalhaes
1006Clifford RimItaly2025-07-28Benton, John B Jr QUALIFIED79Xuxue Feng
1007Jefferson SchemmerJapan2025-07-21Rousseaux, Michael Esq RENEWAL11Ivan Magalhaes
1008Nicolas IturbideBrazil2025-07-25Feiner Bros NEW65Ioni Bowcher
1009Darci PoquetteSpain2025-08-07Rousseaux, Michael Esq NEGOTIATION31Asiya Javayant
1010Greenwood BologniaIndia2025-07-20Printing Dimensions UNQUALIFIED73Stephen Shaw
1011Octavia MaletIndia2025-08-03Chapman, Ross E Esq PROPOSAL64Xuxue Feng
1012Jennifer AmigonBrazil2025-08-07Benton, John B Jr NEGOTIATION85Ivan Magalhaes
1013Johnson SergiRussia2025-07-23Rangoni Of Florence NEW33Ivan Magalhaes
1014Wickens NestleCanada2025-07-27Buckley Miller Wright NEGOTIATION62Onyama Limba
1015Smith GlickSpain2025-08-13Rangoni Of Florence NEW38Xuxue Feng
1016Octavia MaletAustralia2025-08-13Rousseaux, Michael Esq QUALIFIED89Asiya Javayant
1017Tony FollerUnited Kingdom2025-07-17Printing Dimensions UNQUALIFIED12Ivan Magalhaes
1018Johnson SergiCanada2025-08-10Buckley Miller Wright QUALIFIED7Ivan Magalhaes
1019Izzy GarufiFrance2025-07-22Rangoni Of Florence NEGOTIATION97Stephen Shaw
1020Costa DilliardIndia2025-07-26Dorl, James J Esq QUALIFIED35Elwin Sharvill
1021Clifford RimArgentina2025-07-16Chemel, James L Cpa NEGOTIATION46Anna Fali
1022Jennifer AmigonRussia2025-08-11Benton, John B Jr NEGOTIATION81Ioni Bowcher
1023Morrow RutaCanada2025-08-12Buckley Miller Wright NEGOTIATION33Bernardo Dominic
1024Wickens NestleBrazil2025-07-20Chanay, Jeffrey A Esq NEW34Asiya Javayant
1025Chavez BriddickSpain2025-07-29Printing Dimensions UNQUALIFIED48Onyama Limba
1026Emily WhobreyUnited Kingdom2025-07-15Morlong Associates PROPOSAL46Onyama Limba
1027Misaki RoysterItaly2025-08-04Feiner Bros PROPOSAL54Elwin Sharvill
1028Kaitlin OstroskyGermany2025-07-20Feiner Bros NEW65Anna Fali
1029Arvin AlbaresItaly2025-07-18Rousseaux, Michael Esq UNQUALIFIED49Ioni Bowcher
1030Arvin AlbaresJapan2025-07-22Commercial Press NEW76Ivan Magalhaes
1031Smith GlickBrazil2025-08-02Chanay, Jeffrey A Esq NEGOTIATION45Onyama Limba
1032Jones VocelkaJapan2025-07-21Benton, John B Jr QUALIFIED35Ivan Magalhaes
1033Leja CaldareraIndia2025-07-16King, Christopher A Esq RENEWAL79Onyama Limba
1034Smith GlickJapan2025-07-22Morlong Associates QUALIFIED3Ioni Bowcher
1035Maria MarrierCanada2025-08-11Commercial Press QUALIFIED96Amy Elsner
1036Stacey MacleadCanada2025-07-27Morlong Associates PROPOSAL23Anna Fali
1037Ricardo GauchoJapan2025-08-11Feiner Bros NEGOTIATION89Elwin Sharvill
1038Jones VocelkaRussia2025-07-24Rousseaux, Michael Esq NEGOTIATION52Stephen Shaw
1039Murillo MaletCanada2025-07-15Chanay, Jeffrey A Esq NEGOTIATION41Anna Fali
1040Cody SaylorsFrance2025-07-26Benton, John B Jr QUALIFIED92Elwin Sharvill
1041Misaki RoysterUnited Kingdom2025-07-28Chemel, James L Cpa UNQUALIFIED63Amy Elsner
1042Adams MorascaRussia2025-08-02Benton, John B Jr UNQUALIFIED93Anna Fali
1043Silvio SlusarskiArgentina2025-08-13Rousseaux, Michael Esq QUALIFIED44Asiya Javayant
1044Aika InouyeBrazil2025-07-25Feltz Printing Service RENEWAL78Amy Elsner
1045Silvio SlusarskiUnited Kingdom2025-08-09Printing Dimensions NEGOTIATION27Onyama Limba
1046Leon OldroydGermany2025-08-08Morlong Associates PROPOSAL7Ivan Magalhaes
1047Aditya KuskoCanada2025-07-25Rangoni Of Florence RENEWAL70Onyama Limba
1048Ivar PaprockiItaly2025-07-23Feltz Printing Service QUALIFIED79Onyama Limba
1049Kadeem FlosiAustralia2025-08-07Feiner Bros RENEWAL40Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Antonio CaudyFranceAsiya Javayant RENEWAL
Emily WhobreyArgentinaAmy Elsner NEW
Jennifer AmigonUnited KingdomOnyama Limba RENEWAL
Alejandro PerinItalyIoni Bowcher NEGOTIATION
Tony FollerFranceAmy Elsner PROPOSAL
Izzy GarufiArgentinaXuxue Feng PROPOSAL
Morrow RutaItalyStephen Shaw NEGOTIATION
Salvatore StockhamFranceAmy Elsner NEGOTIATION
Alejandro PerinFranceAnna Fali NEW
Johnson SergiJapanIvan Magalhaes RENEWAL
Chavez BriddickIndiaIoni Bowcher NEW
Sinclair WaycottSpainStephen Shaw UNQUALIFIED
Francesco ShinkoGermanyIvan Magalhaes QUALIFIED
Greenwood BologniaGermanyIvan Magalhaes NEW
Silvio SlusarskiRussiaAmy Elsner UNQUALIFIED
Jones VocelkaAustraliaOnyama Limba RENEWAL
Silvio SlusarskiJapanIvan Magalhaes PROPOSAL
Sinclair WaycottGermanyAmy Elsner RENEWAL
Johnson SergiCanadaAsiya Javayant UNQUALIFIED
Johnson SergiCanadaIoni Bowcher UNQUALIFIED
Smith GlickCanadaIoni Bowcher NEGOTIATION
Misaki RoysterIndiaAnna Fali UNQUALIFIED
Deepesh ChuiArgentinaAmy Elsner PROPOSAL
Julie StensethFranceAsiya Javayant QUALIFIED
Tony FollerIndiaAnna Fali PROPOSAL
Adams MorascaIndiaElwin Sharvill NEW
Jones VocelkaSpainIvan Magalhaes NEGOTIATION
Kaitlin OstroskyGermanyBernardo Dominic PROPOSAL
Arvin AlbaresUnited KingdomAnna Fali RENEWAL
Jennifer AmigonIndiaBernardo Dominic PROPOSAL
Jefferson SchemmerFranceXuxue Feng NEW
Jones VocelkaIndiaOnyama Limba UNQUALIFIED
Juan WieserAustraliaAmy Elsner RENEWAL
Kaitlin OstroskyItalyIvan Magalhaes QUALIFIED
Juan WieserUnited KingdomBernardo Dominic PROPOSAL
Mayumi KolmetzAustraliaIoni Bowcher NEGOTIATION
Francesco ShinkoGermanyBernardo Dominic NEGOTIATION
Julie StensethItalyElwin Sharvill PROPOSAL
Julie StensethIndiaOnyama Limba PROPOSAL
Aika InouyeSpainXuxue Feng NEGOTIATION
Costa DilliardJapanXuxue Feng NEW
Jefferson SchemmerItalyIvan Magalhaes PROPOSAL
Mayumi KolmetzRussiaAnna Fali NEGOTIATION
Ivar PaprockiAustraliaAnna Fali NEGOTIATION
Izzy GarufiArgentinaElwin Sharvill QUALIFIED
Johnson SergiRussiaAnna Fali UNQUALIFIED
Greenwood BologniaCanadaStephen Shaw PROPOSAL
Claire TollnerRussiaIoni Bowcher UNQUALIFIED
Claire TollnerRussiaAnna Fali UNQUALIFIED
Octavia MaletGermanyElwin Sharvill NEGOTIATION
Frozen Columns
Name
Jennifer Amigon
Jeanfrancois Venere
David Darakjy
Murillo Malet
Aruna Figeroa
Jeanfrancois Venere
Antonio Caudy
Jennifer Amigon
Faith Gillian
Claire Tollner
Greenwood Bolognia
Leon Oldroyd
Salvatore Stockham
Smith Glick
Leon Oldroyd
Emily Whobrey
Murillo Malet
Wickens Nestle
Costa Dilliard
Stacey Maclead
Smith Glick
Antonio Caudy
Sinclair Waycott
Morrow Ruta
Izzy Garufi
Kadeem Flosi
Francesco Shinko
Ashley Doe
Aika Inouye
Kaitlin Ostrosky
Aika Inouye
Aditya Kusko
Nicolas Iturbide
Stacey Maclead
Alejandro Perin
Rodrigues Campain
Kadeem Flosi
Morrow Ruta
Tony Foller
Izzy Garufi
Johnson Sergi
Jefferson Schemmer
Munro Ferencz
Darci Poquette
David Darakjy
Ivar Paprocki
Claire Tollner
Ivar Paprocki
Maria Marrier
Claire Tollner
IdCountryDate
1000Spain2025-08-07
1001Germany2025-07-28
1002Australia2025-08-08
1003Japan2025-07-29
1004Germany2025-07-22
1005Russia2025-08-02
1006Australia2025-07-17
1007France2025-07-22
1008Japan2025-07-29
1009Brazil2025-08-09
1010Canada2025-08-02
1011United Kingdom2025-07-20
1012Germany2025-07-15
1013France2025-07-18
1014Japan2025-08-01
1015Russia2025-08-05
1016France2025-07-29
1017United Kingdom2025-08-09
1018United Kingdom2025-08-09
1019Brazil2025-07-15
1020Brazil2025-07-20
1021United Kingdom2025-07-18
1022United Kingdom2025-07-26
1023United Kingdom2025-08-05
1024France2025-08-10
1025Russia2025-08-12
1026Argentina2025-08-06
1027Spain2025-08-06
1028France2025-07-15
1029India2025-07-17
1030India2025-08-04
1031Canada2025-07-31
1032France2025-08-07
1033Russia2025-07-23
1034Russia2025-07-23
1035Germany2025-07-19
1036India2025-07-27
1037Germany2025-07-20
1038Japan2025-07-26
1039Australia2025-08-13
1040Spain2025-08-10
1041Italy2025-08-08
1042Spain2025-07-16
1043Germany2025-08-07
1044Brazil2025-07-24
1045France2025-07-26
1046Japan2025-07-15
1047Spain2025-07-26
1048Russia2025-07-17
1049India2025-07-22

On-Demand Data

NameIdCountryDate
Misaki Royster1000Russia2025-07-27
Jennifer Amigon1001United Kingdom2025-08-12
Silvio Slusarski1002Canada2025-07-19
Tony Foller1003Germany2025-07-18
Jennifer Amigon1004Canada2025-08-08
Stacey Maclead1005Spain2025-08-01
Cody Saylors1006France2025-08-10
Munro Ferencz1007Argentina2025-08-08
Jeanfrancois Venere1008France2025-08-13
Francesco Shinko1009Canada2025-07-27
Clifford Rim1010United Kingdom2025-07-25
Jennifer Amigon1011Australia2025-07-31
Mayumi Kolmetz1012France2025-07-17
Mayumi Kolmetz1013Italy2025-07-31
Adams Morasca1014Argentina2025-07-19
Maisha Rulapaugh1015Japan2025-07-16
Ivar Paprocki1016United Kingdom2025-08-06
Stacey Maclead1017Argentina2025-07-31
Darci Poquette1018Canada2025-07-17
Emily Whobrey1019Argentina2025-07-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Sinclair WaycottCanadaBernardo Dominic QUALIFIED
Kaitlin OstroskyRussiaElwin Sharvill QUALIFIED
Antonio CaudySpainStephen Shaw NEGOTIATION
Tony FollerUnited KingdomAsiya Javayant QUALIFIED
Deepesh ChuiIndiaOnyama Limba NEW
Deepesh ChuiAustraliaElwin Sharvill QUALIFIED
Aika InouyeAustraliaIoni Bowcher UNQUALIFIED
Silvio SlusarskiItalyIvan Magalhaes QUALIFIED
Smith GlickCanadaAsiya Javayant UNQUALIFIED
David DarakjyIndiaAsiya Javayant PROPOSAL
Cody SaylorsBrazilXuxue Feng UNQUALIFIED
Murillo MaletAustraliaIoni Bowcher UNQUALIFIED
Kadeem FlosiCanadaIoni Bowcher UNQUALIFIED
Nicolas IturbideUnited KingdomBernardo Dominic RENEWAL
Izzy GarufiItalyAnna Fali QUALIFIED
Jefferson SchemmerUnited KingdomAmy Elsner UNQUALIFIED
Ivar PaprockiRussiaBernardo Dominic PROPOSAL
Jones VocelkaArgentinaOnyama Limba QUALIFIED
Tony FollerItalyIoni Bowcher RENEWAL
David DarakjyUnited KingdomOnyama Limba PROPOSAL
Mujtaba NickaItalyBernardo Dominic UNQUALIFIED
Francesco ShinkoRussiaAnna Fali NEW
Jones VocelkaUnited KingdomElwin Sharvill UNQUALIFIED
Leon OldroydRussiaAmy Elsner NEW
Isabel BowleyGermanyAmy Elsner UNQUALIFIED
Antonio CaudyAustraliaOnyama Limba RENEWAL
Smith GlickCanadaAmy Elsner PROPOSAL
Alejandro PerinBrazilOnyama Limba QUALIFIED
Deepesh ChuiFranceAnna Fali PROPOSAL
Aditya KuskoRussiaBernardo Dominic PROPOSAL
Chavez BriddickGermanyAsiya Javayant NEGOTIATION
Aditya KuskoRussiaBernardo Dominic QUALIFIED
Juan WieserFranceAsiya Javayant PROPOSAL
Alejandro PerinIndiaIoni Bowcher QUALIFIED
Ivar PaprockiFranceXuxue Feng NEGOTIATION
Murillo MaletItalyAsiya Javayant PROPOSAL
Deepesh ChuiJapanOnyama Limba QUALIFIED
Chavez BriddickIndiaBernardo Dominic RENEWAL
Chavez BriddickItalyStephen Shaw NEW
Deepesh ChuiJapanAsiya Javayant 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>