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 MorascaSpainAnna Fali PROPOSAL
Mujtaba NickaFranceXuxue Feng NEW
Ashley DoeBrazilXuxue Feng NEGOTIATION
Aika InouyeJapanIoni Bowcher RENEWAL
Cody SaylorsItalyIvan Magalhaes NEW
David DarakjyFranceIvan Magalhaes NEGOTIATION
Ashley DoeJapanIvan Magalhaes UNQUALIFIED
Silvio SlusarskiIndiaAnna Fali UNQUALIFIED
Jeanfrancois VenereFranceAsiya Javayant NEGOTIATION
Maria MarrierIndiaAsiya Javayant NEGOTIATION
Aditya KuskoIndiaBernardo Dominic NEW
Munro FerenczGermanyAnna Fali UNQUALIFIED
Stacey MacleadRussiaElwin Sharvill NEGOTIATION
Tony FollerBrazilElwin Sharvill PROPOSAL
Johnson SergiSpainIoni Bowcher PROPOSAL
Kadeem FlosiUnited KingdomBernardo Dominic QUALIFIED
Stacey MacleadFranceIoni Bowcher NEW
Chavez BriddickSpainElwin Sharvill NEW
Julie StensethFranceAnna Fali PROPOSAL
Stacey MacleadRussiaBernardo Dominic RENEWAL
Jones VocelkaArgentinaAmy Elsner NEGOTIATION
Ivar PaprockiCanadaAmy Elsner QUALIFIED
Ivar PaprockiGermanyAmy Elsner QUALIFIED
Maisha RulapaughFranceAsiya Javayant QUALIFIED
Maria MarrierAustraliaStephen Shaw RENEWAL
Jeanfrancois VenereArgentinaAnna Fali RENEWAL
Jefferson SchemmerCanadaStephen Shaw RENEWAL
Mayumi KolmetzArgentinaXuxue Feng RENEWAL
Ricardo GauchoUnited KingdomBernardo Dominic PROPOSAL
Arvin AlbaresArgentinaElwin Sharvill NEGOTIATION
Mayumi KolmetzUnited KingdomBernardo Dominic PROPOSAL
Costa DilliardArgentinaIoni Bowcher PROPOSAL
Mayumi KolmetzSpainAmy Elsner NEGOTIATION
Costa DilliardFranceAnna Fali UNQUALIFIED
Alejandro PerinBrazilOnyama Limba NEGOTIATION
Rodrigues CampainRussiaStephen Shaw RENEWAL
Adams MorascaJapanXuxue Feng RENEWAL
Maria MarrierBrazilAnna Fali QUALIFIED
Ashley DoeUnited KingdomElwin Sharvill UNQUALIFIED
Mujtaba NickaFranceIoni Bowcher NEGOTIATION
Arvin AlbaresSpainBernardo Dominic RENEWAL
Julie StensethUnited KingdomStephen Shaw NEW
Leon OldroydFranceStephen Shaw UNQUALIFIED
Tony FollerIndiaOnyama Limba NEGOTIATION
Isabel BowleyBrazilXuxue Feng UNQUALIFIED
Nicolas IturbideAustraliaAmy Elsner QUALIFIED
Munro FerenczGermanyElwin Sharvill UNQUALIFIED
Munro FerenczGermanyOnyama Limba RENEWAL
Ricardo GauchoFranceBernardo Dominic RENEWAL
Greenwood BologniaRussiaIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Deepesh ChuiGermanyIoni Bowcher UNQUALIFIED
Munro FerenczCanadaIvan Magalhaes UNQUALIFIED
Maria MarrierArgentinaIoni Bowcher NEGOTIATION
Cody SaylorsGermanyBernardo Dominic UNQUALIFIED
Antonio CaudyUnited KingdomAsiya Javayant QUALIFIED
Tony FollerJapanStephen Shaw PROPOSAL
Isabel BowleyItalyAnna Fali QUALIFIED
Izzy GarufiItalyAmy Elsner UNQUALIFIED
Francesco ShinkoAustraliaElwin Sharvill QUALIFIED
Antonio CaudyBrazilAmy Elsner RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Stacey MacleadAustralia2026-05-29Rangoni Of Florence PROPOSAL58Asiya Javayant
1001Kaitlin OstroskyIndia2026-05-23Morlong Associates PROPOSAL94Xuxue Feng
1002Tony FollerIndia2026-05-29Dorl, James J Esq NEGOTIATION71Stephen Shaw
1003David DarakjyFrance2026-05-28Buckley Miller Wright QUALIFIED39Ioni Bowcher
1004Smith GlickItaly2026-05-14Chapman, Ross E Esq RENEWAL1Bernardo Dominic
1005Izzy GarufiAustralia2026-05-16Feiner Bros PROPOSAL78Anna Fali
1006Costa DilliardIndia2026-05-31Chapman, Ross E Esq QUALIFIED53Bernardo Dominic
1007Mujtaba NickaItaly2026-05-19Commercial Press NEGOTIATION43Asiya Javayant
1008Jefferson SchemmerArgentina2026-05-20Buckley Miller Wright RENEWAL17Anna Fali
1009Wickens NestleSpain2026-05-14Feiner Bros UNQUALIFIED58Ivan Magalhaes
1010Leja CaldareraRussia2026-05-15Dorl, James J Esq NEW97Onyama Limba
1011Kaitlin OstroskyBrazil2026-06-02Chapman, Ross E Esq QUALIFIED15Ivan Magalhaes
1012David DarakjyItaly2026-05-24Rousseaux, Michael Esq NEW11Stephen Shaw
1013Isabel BowleyGermany2026-05-29Chanay, Jeffrey A Esq QUALIFIED50Amy Elsner
1014Greenwood BologniaUnited Kingdom2026-05-22Chanay, Jeffrey A Esq PROPOSAL41Xuxue Feng
1015Jennifer AmigonJapan2026-05-12Rousseaux, Michael Esq PROPOSAL50Bernardo Dominic
1016James ButtJapan2026-05-29Chanay, Jeffrey A Esq NEW0Xuxue Feng
1017Wickens NestleJapan2026-05-13Benton, John B Jr PROPOSAL34Amy Elsner
1018Munro FerenczFrance2026-06-03King, Christopher A Esq NEGOTIATION5Stephen Shaw
1019Aika InouyeCanada2026-05-16Feiner Bros QUALIFIED37Ivan Magalhaes
1020Tony FollerJapan2026-06-01Chemel, James L Cpa NEGOTIATION56Ioni Bowcher
1021Adams MorascaBrazil2026-05-30Benton, John B Jr PROPOSAL97Elwin Sharvill
1022Alejandro PerinUnited Kingdom2026-06-08Printing Dimensions RENEWAL5Xuxue Feng
1023Aika InouyeItaly2026-05-13Chemel, James L Cpa RENEWAL76Anna Fali
1024Greenwood BologniaIndia2026-05-11Benton, John B Jr NEGOTIATION4Anna Fali
1025Darci PoquetteCanada2026-05-31Rousseaux, Michael Esq PROPOSAL31Elwin Sharvill
1026Izzy GarufiFrance2026-06-03Commercial Press PROPOSAL31Ioni Bowcher
1027Aditya KuskoSpain2026-06-01Chapman, Ross E Esq PROPOSAL33Onyama Limba
1028Leon OldroydBrazil2026-05-11Rangoni Of Florence QUALIFIED57Ivan Magalhaes
1029Greenwood BologniaBrazil2026-05-18Buckley Miller Wright NEGOTIATION39Elwin Sharvill
1030Smith GlickIndia2026-06-04Chanay, Jeffrey A Esq RENEWAL42Bernardo Dominic
1031Salvatore StockhamGermany2026-05-30Feltz Printing Service QUALIFIED73Asiya Javayant
1032Mujtaba NickaBrazil2026-05-19Chapman, Ross E Esq PROPOSAL39Bernardo Dominic
1033Darci PoquetteIndia2026-05-17Printing Dimensions NEW59Ivan Magalhaes
1034Darci PoquetteJapan2026-06-04Rangoni Of Florence PROPOSAL94Ivan Magalhaes
1035Silvio SlusarskiUnited Kingdom2026-06-06Chemel, James L Cpa UNQUALIFIED79Bernardo Dominic
1036Leja CaldareraAustralia2026-05-23Printing Dimensions RENEWAL98Ioni Bowcher
1037Octavia MaletBrazil2026-05-17King, Christopher A Esq NEGOTIATION62Anna Fali
1038Leja CaldareraIndia2026-05-27Dorl, James J Esq RENEWAL14Ioni Bowcher
1039Chavez BriddickJapan2026-05-14Feiner Bros QUALIFIED45Onyama Limba
1040Tony FollerItaly2026-06-07Commercial Press PROPOSAL2Elwin Sharvill
1041Julie StensethFrance2026-05-13Benton, John B Jr UNQUALIFIED12Amy Elsner
1042Smith GlickGermany2026-06-01Morlong Associates UNQUALIFIED91Stephen Shaw
1043Maisha RulapaughBrazil2026-06-02Buckley Miller Wright RENEWAL72Stephen Shaw
1044Jennifer AmigonJapan2026-05-15Dorl, James J Esq PROPOSAL64Amy Elsner
1045Alejandro PerinGermany2026-06-06Chemel, James L Cpa QUALIFIED75Elwin Sharvill
1046Maisha RulapaughArgentina2026-05-22Feiner Bros RENEWAL87Elwin Sharvill
1047Ivar PaprockiCanada2026-05-29King, Christopher A Esq NEW49Xuxue Feng
1048Claire TollnerAustralia2026-05-20Feiner Bros NEW50Stephen Shaw
1049Julie StensethSpain2026-05-27King, Christopher A Esq RENEWAL37Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Deepesh ChuiAustraliaIvan Magalhaes PROPOSAL
Aditya KuskoUnited KingdomElwin Sharvill RENEWAL
Mayumi KolmetzArgentinaAsiya Javayant UNQUALIFIED
James ButtJapanBernardo Dominic QUALIFIED
Arvin AlbaresRussiaAmy Elsner PROPOSAL
Maisha RulapaughCanadaXuxue Feng RENEWAL
Juan WieserIndiaAnna Fali NEGOTIATION
Alejandro PerinUnited KingdomBernardo Dominic NEGOTIATION
Octavia MaletFranceIvan Magalhaes PROPOSAL
David DarakjyRussiaStephen Shaw QUALIFIED
Leon OldroydIndiaBernardo Dominic PROPOSAL
Ivar PaprockiGermanyStephen Shaw RENEWAL
Maria MarrierItalyAmy Elsner UNQUALIFIED
Aika InouyeGermanyIoni Bowcher PROPOSAL
Kadeem FlosiItalyIvan Magalhaes PROPOSAL
Alejandro PerinRussiaIvan Magalhaes RENEWAL
Salvatore StockhamRussiaXuxue Feng NEW
Munro FerenczItalyAsiya Javayant NEW
Jefferson SchemmerFranceOnyama Limba PROPOSAL
Aruna FigeroaIndiaXuxue Feng UNQUALIFIED
Murillo MaletFranceAnna Fali NEGOTIATION
James ButtGermanyIoni Bowcher RENEWAL
Stacey MacleadAustraliaElwin Sharvill PROPOSAL
Greenwood BologniaRussiaAmy Elsner UNQUALIFIED
Jones VocelkaRussiaAnna Fali NEGOTIATION
Tony FollerFranceXuxue Feng QUALIFIED
Munro FerenczCanadaStephen Shaw NEW
Misaki RoysterItalyElwin Sharvill PROPOSAL
Claire TollnerSpainAnna Fali NEW
Mujtaba NickaFranceElwin Sharvill NEGOTIATION
Greenwood BologniaUnited KingdomElwin Sharvill NEW
Adams MorascaCanadaAmy Elsner UNQUALIFIED
Morrow RutaBrazilAsiya Javayant PROPOSAL
Chavez BriddickFranceIoni Bowcher UNQUALIFIED
Claire TollnerArgentinaStephen Shaw NEW
Darci PoquetteRussiaAnna Fali PROPOSAL
Mayumi KolmetzSpainAsiya Javayant PROPOSAL
Adams MorascaArgentinaAmy Elsner UNQUALIFIED
Darci PoquetteBrazilAnna Fali QUALIFIED
Wickens NestleUnited KingdomXuxue Feng PROPOSAL
Arvin AlbaresRussiaIvan Magalhaes NEGOTIATION
Emily WhobreyAustraliaXuxue Feng UNQUALIFIED
Smith GlickUnited KingdomBernardo Dominic RENEWAL
Ricardo GauchoArgentinaIoni Bowcher NEW
Deepesh ChuiGermanyIoni Bowcher NEGOTIATION
Alejandro PerinIndiaIvan Magalhaes PROPOSAL
Wickens NestleFranceElwin Sharvill PROPOSAL
Juan WieserUnited KingdomAnna Fali RENEWAL
Mujtaba NickaItalyAmy Elsner UNQUALIFIED
Sinclair WaycottJapanAsiya Javayant PROPOSAL
Frozen Columns
Name
Aditya Kusko
James Butt
Darci Poquette
Silvio Slusarski
Leja Caldarera
Nicolas Iturbide
Morrow Ruta
James Butt
Antonio Caudy
Aditya Kusko
Mujtaba Nicka
Jennifer Amigon
Isabel Bowley
Francesco Shinko
Arvin Albares
Julie Stenseth
Clifford Rim
Jefferson Schemmer
Jefferson Schemmer
Kaitlin Ostrosky
Wickens Nestle
Maria Marrier
Jones Vocelka
Johnson Sergi
Maisha Rulapaugh
Greenwood Bolognia
Ivar Paprocki
Jones Vocelka
Ricardo Gaucho
Rodrigues Campain
Darci Poquette
Murillo Malet
Mujtaba Nicka
Octavia Malet
Darci Poquette
Julie Stenseth
Alejandro Perin
Mayumi Kolmetz
Greenwood Bolognia
Stacey Maclead
Adams Morasca
Costa Dilliard
Stacey Maclead
Darci Poquette
Munro Ferencz
Greenwood Bolognia
Aruna Figeroa
Maria Marrier
Jefferson Schemmer
Maisha Rulapaugh
IdCountryDate
1000Japan2026-05-31
1001Brazil2026-05-30
1002Germany2026-05-20
1003India2026-06-05
1004Russia2026-06-07
1005Canada2026-06-09
1006India2026-05-13
1007Spain2026-05-16
1008Germany2026-05-25
1009Japan2026-05-30
1010Italy2026-05-28
1011Brazil2026-05-21
1012France2026-05-24
1013Brazil2026-05-22
1014Italy2026-06-01
1015Canada2026-05-31
1016Germany2026-06-01
1017United Kingdom2026-05-15
1018Brazil2026-06-04
1019United Kingdom2026-05-31
1020Brazil2026-05-12
1021Spain2026-06-05
1022Spain2026-05-30
1023Spain2026-05-29
1024Argentina2026-06-06
1025Argentina2026-05-26
1026United Kingdom2026-05-28
1027Canada2026-05-23
1028Australia2026-05-23
1029Spain2026-05-25
1030Italy2026-05-16
1031Japan2026-06-06
1032Australia2026-05-17
1033Japan2026-06-08
1034United Kingdom2026-05-28
1035Argentina2026-05-12
1036Russia2026-05-13
1037Russia2026-05-27
1038France2026-06-02
1039Argentina2026-05-24
1040Japan2026-05-14
1041Brazil2026-06-02
1042United Kingdom2026-06-09
1043Australia2026-05-25
1044France2026-05-21
1045Germany2026-05-18
1046Argentina2026-05-30
1047Russia2026-05-26
1048Australia2026-05-20
1049France2026-05-25

On-Demand Data

NameIdCountryDate
Tony Foller1000Spain2026-05-12
Ivar Paprocki1001Russia2026-05-29
Adams Morasca1002Australia2026-05-14
Mujtaba Nicka1003Spain2026-05-11
Mayumi Kolmetz1004Italy2026-06-03
Deepesh Chui1005Brazil2026-06-07
Jones Vocelka1006Brazil2026-05-23
Greenwood Bolognia1007Brazil2026-06-06
David Darakjy1008Spain2026-05-27
Aditya Kusko1009Italy2026-05-19
Aditya Kusko1010Australia2026-05-19
Mayumi Kolmetz1011Australia2026-05-23
Arvin Albares1012India2026-05-18
Ashley Doe1013Russia2026-05-18
Greenwood Bolognia1014Argentina2026-06-07
Greenwood Bolognia1015Germany2026-05-27
Wickens Nestle1016Russia2026-05-16
Julie Stenseth1017Australia2026-05-16
Murillo Malet1018Canada2026-05-29
Izzy Garufi1019Canada2026-06-01
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leja CaldareraIndiaXuxue Feng NEW
Costa DilliardFranceElwin Sharvill RENEWAL
Stacey MacleadJapanOnyama Limba PROPOSAL
Aditya KuskoRussiaElwin Sharvill QUALIFIED
Mayumi KolmetzIndiaOnyama Limba RENEWAL
Jefferson SchemmerUnited KingdomElwin Sharvill RENEWAL
Rodrigues CampainJapanOnyama Limba QUALIFIED
Emily WhobreyJapanAnna Fali PROPOSAL
Tony FollerJapanOnyama Limba PROPOSAL
Juan WieserSpainIvan Magalhaes RENEWAL
Darci PoquetteBrazilAsiya Javayant RENEWAL
Adams MorascaJapanIoni Bowcher NEW
Antonio CaudyCanadaBernardo Dominic NEW
Octavia MaletSpainXuxue Feng NEW
Leon OldroydItalyOnyama Limba QUALIFIED
Kaitlin OstroskyBrazilAnna Fali RENEWAL
Morrow RutaAustraliaAmy Elsner RENEWAL
Isabel BowleyItalyElwin Sharvill UNQUALIFIED
Cody SaylorsFranceXuxue Feng PROPOSAL
Silvio SlusarskiFranceIvan Magalhaes NEW
Isabel BowleyIndiaElwin Sharvill UNQUALIFIED
Izzy GarufiItalyStephen Shaw QUALIFIED
Aika InouyeUnited KingdomOnyama Limba NEW
Salvatore StockhamBrazilElwin Sharvill QUALIFIED
Izzy GarufiIndiaIvan Magalhaes NEW
Claire TollnerAustraliaElwin Sharvill RENEWAL
Stacey MacleadSpainIvan Magalhaes UNQUALIFIED
Munro FerenczRussiaOnyama Limba RENEWAL
James ButtArgentinaIoni Bowcher NEGOTIATION
Faith GillianAustraliaIvan Magalhaes UNQUALIFIED
Misaki RoysterIndiaXuxue Feng NEGOTIATION
Sinclair WaycottBrazilIoni Bowcher UNQUALIFIED
Deepesh ChuiIndiaElwin Sharvill QUALIFIED
Sinclair WaycottIndiaElwin Sharvill NEW
Morrow RutaSpainXuxue Feng NEW
Munro FerenczJapanElwin Sharvill RENEWAL
Kadeem FlosiCanadaAmy Elsner UNQUALIFIED
Chavez BriddickGermanyXuxue Feng RENEWAL
Chavez BriddickJapanBernardo Dominic QUALIFIED
Greenwood BologniaUnited KingdomElwin Sharvill 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>