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
Munro FerenczArgentinaXuxue Feng UNQUALIFIED
Silvio SlusarskiUnited KingdomAnna Fali NEW
Aditya KuskoItalyXuxue Feng RENEWAL
Aruna FigeroaAustraliaIoni Bowcher UNQUALIFIED
Isabel BowleyIndiaStephen Shaw NEGOTIATION
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Faith GillianFranceXuxue Feng PROPOSAL
Jennifer AmigonRussiaAnna Fali RENEWAL
Maria MarrierSpainIvan Magalhaes NEW
Kadeem FlosiAustraliaIvan Magalhaes QUALIFIED
Octavia MaletCanadaBernardo Dominic RENEWAL
Jennifer AmigonArgentinaStephen Shaw RENEWAL
Munro FerenczSpainElwin Sharvill RENEWAL
Jennifer AmigonGermanyStephen Shaw RENEWAL
Costa DilliardSpainAsiya Javayant RENEWAL
Munro FerenczAustraliaXuxue Feng NEW
Silvio SlusarskiAustraliaAmy Elsner RENEWAL
Faith GillianIndiaStephen Shaw UNQUALIFIED
Kaitlin OstroskyRussiaOnyama Limba RENEWAL
Smith GlickGermanyOnyama Limba PROPOSAL
Francesco ShinkoCanadaAnna Fali QUALIFIED
Adams MorascaSpainIoni Bowcher RENEWAL
Mujtaba NickaItalyIvan Magalhaes NEW
Adams MorascaGermanyAnna Fali NEW
Leja CaldareraCanadaAnna Fali UNQUALIFIED
Maria MarrierSpainStephen Shaw NEW
Leon OldroydFranceElwin Sharvill QUALIFIED
Clifford RimBrazilIvan Magalhaes UNQUALIFIED
Jefferson SchemmerCanadaAmy Elsner UNQUALIFIED
Octavia MaletCanadaXuxue Feng RENEWAL
Smith GlickRussiaOnyama Limba RENEWAL
Aruna FigeroaIndiaIoni Bowcher NEGOTIATION
Juan WieserItalyElwin Sharvill QUALIFIED
Costa DilliardCanadaElwin Sharvill NEW
Aika InouyeRussiaStephen Shaw RENEWAL
Aruna FigeroaBrazilOnyama Limba UNQUALIFIED
Tony FollerUnited KingdomXuxue Feng RENEWAL
Costa DilliardRussiaIoni Bowcher PROPOSAL
Jefferson SchemmerCanadaIoni Bowcher PROPOSAL
Jeanfrancois VenereAustraliaBernardo Dominic RENEWAL
Clifford RimCanadaAsiya Javayant PROPOSAL
Maisha RulapaughArgentinaIoni Bowcher NEGOTIATION
Costa DilliardIndiaOnyama Limba NEW
Nicolas IturbideItalyElwin Sharvill UNQUALIFIED
Ashley DoeRussiaAsiya Javayant NEW
Faith GillianItalyIoni Bowcher UNQUALIFIED
Deepesh ChuiItalyIvan Magalhaes NEGOTIATION
Mayumi KolmetzBrazilBernardo Dominic NEGOTIATION
Salvatore StockhamSpainStephen Shaw NEGOTIATION
Aruna FigeroaFranceAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyIndiaElwin Sharvill NEW
Greenwood BologniaArgentinaOnyama Limba PROPOSAL
Aika InouyeSpainOnyama Limba PROPOSAL
Jefferson SchemmerGermanyIvan Magalhaes RENEWAL
Jennifer AmigonUnited KingdomIvan Magalhaes RENEWAL
Ivar PaprockiBrazilStephen Shaw UNQUALIFIED
Deepesh ChuiArgentinaOnyama Limba NEGOTIATION
Deepesh ChuiIndiaXuxue Feng NEGOTIATION
James ButtGermanyAmy Elsner NEW
Greenwood BologniaSpainIoni Bowcher RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Leja CaldareraItaly2026-04-27Dorl, James J Esq RENEWAL19Anna Fali
1001Salvatore StockhamArgentina2026-04-25King, Christopher A Esq NEGOTIATION39Bernardo Dominic
1002James ButtSpain2026-05-08Printing Dimensions NEW49Ivan Magalhaes
1003Tony FollerJapan2026-05-15Rousseaux, Michael Esq RENEWAL88Asiya Javayant
1004Chavez BriddickItaly2026-05-09Chemel, James L Cpa RENEWAL92Ivan Magalhaes
1005David DarakjyIndia2026-05-07King, Christopher A Esq RENEWAL40Xuxue Feng
1006Antonio CaudyBrazil2026-05-11Chemel, James L Cpa PROPOSAL63Ioni Bowcher
1007Isabel BowleyUnited Kingdom2026-05-02Chanay, Jeffrey A Esq NEGOTIATION77Ivan Magalhaes
1008Alejandro PerinFrance2026-04-23Truhlar And Truhlar Attys NEGOTIATION52Ioni Bowcher
1009Maisha RulapaughRussia2026-05-19Rangoni Of Florence RENEWAL50Elwin Sharvill
1010Izzy GarufiUnited Kingdom2026-05-12Commercial Press PROPOSAL8Anna Fali
1011Tony FollerBrazil2026-05-15Benton, John B Jr NEGOTIATION46Anna Fali
1012Kadeem FlosiJapan2026-04-27Truhlar And Truhlar Attys RENEWAL67Elwin Sharvill
1013Kadeem FlosiUnited Kingdom2026-04-28Dorl, James J Esq UNQUALIFIED4Amy Elsner
1014Nicolas IturbideRussia2026-05-16Feiner Bros PROPOSAL54Ivan Magalhaes
1015Francesco ShinkoSpain2026-05-04Chanay, Jeffrey A Esq NEW6Bernardo Dominic
1016Jones VocelkaSpain2026-04-25Feiner Bros NEGOTIATION63Onyama Limba
1017Emily WhobreySpain2026-04-26Truhlar And Truhlar Attys NEW97Ioni Bowcher
1018Tony FollerCanada2026-05-15Printing Dimensions QUALIFIED9Amy Elsner
1019Murillo MaletBrazil2026-05-07Benton, John B Jr NEGOTIATION12Amy Elsner
1020Maria MarrierGermany2026-05-17Feiner Bros RENEWAL31Stephen Shaw
1021Aditya KuskoUnited Kingdom2026-05-13Rousseaux, Michael Esq RENEWAL19Xuxue Feng
1022Johnson SergiJapan2026-05-02Commercial Press UNQUALIFIED12Ivan Magalhaes
1023Maisha RulapaughItaly2026-05-12Feltz Printing Service NEGOTIATION12Anna Fali
1024Juan WieserBrazil2026-05-02Benton, John B Jr PROPOSAL47Xuxue Feng
1025Isabel BowleyBrazil2026-05-10Morlong Associates NEGOTIATION22Stephen Shaw
1026Jennifer AmigonArgentina2026-05-06Rousseaux, Michael Esq NEW5Ioni Bowcher
1027Misaki RoysterIndia2026-05-06Morlong Associates QUALIFIED3Amy Elsner
1028Juan WieserIndia2026-04-22Chanay, Jeffrey A Esq RENEWAL63Ioni Bowcher
1029Maria MarrierUnited Kingdom2026-04-22Morlong Associates NEW75Onyama Limba
1030Tony FollerIndia2026-05-06Dorl, James J Esq NEGOTIATION62Amy Elsner
1031Ivar PaprockiIndia2026-05-03Chapman, Ross E Esq RENEWAL34Amy Elsner
1032Misaki RoysterArgentina2026-05-04Rousseaux, Michael Esq NEW47Stephen Shaw
1033Octavia MaletUnited Kingdom2026-04-27Feiner Bros NEGOTIATION90Elwin Sharvill
1034Salvatore StockhamJapan2026-05-06Rousseaux, Michael Esq RENEWAL44Asiya Javayant
1035Darci PoquetteItaly2026-05-15Truhlar And Truhlar Attys NEW22Anna Fali
1036Juan WieserJapan2026-05-02Printing Dimensions RENEWAL90Ivan Magalhaes
1037Cody SaylorsRussia2026-05-02Feltz Printing Service PROPOSAL50Amy Elsner
1038Darci PoquetteAustralia2026-05-14Buckley Miller Wright NEW49Ivan Magalhaes
1039Aika InouyeAustralia2026-05-14Feltz Printing Service NEGOTIATION68Anna Fali
1040Cody SaylorsCanada2026-04-29Chanay, Jeffrey A Esq UNQUALIFIED79Amy Elsner
1041Nicolas IturbideSpain2026-05-17Feltz Printing Service QUALIFIED43Anna Fali
1042Faith GillianUnited Kingdom2026-04-30King, Christopher A Esq UNQUALIFIED2Elwin Sharvill
1043Misaki RoysterSpain2026-05-10Feiner Bros UNQUALIFIED28Bernardo Dominic
1044Julie StensethCanada2026-04-20Benton, John B Jr NEGOTIATION8Anna Fali
1045Munro FerenczGermany2026-04-24Benton, John B Jr PROPOSAL40Bernardo Dominic
1046Sinclair WaycottArgentina2026-05-07Rousseaux, Michael Esq RENEWAL65Asiya Javayant
1047Jennifer AmigonUnited Kingdom2026-04-21Benton, John B Jr NEGOTIATION34Anna Fali
1048Ricardo GauchoIndia2026-05-08Buckley Miller Wright RENEWAL41Anna Fali
1049Octavia MaletBrazil2026-05-01Rangoni Of Florence UNQUALIFIED29Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Leja CaldareraCanadaStephen Shaw NEGOTIATION
Jennifer AmigonRussiaAsiya Javayant RENEWAL
Murillo MaletRussiaOnyama Limba UNQUALIFIED
Alejandro PerinRussiaAnna Fali RENEWAL
Jeanfrancois VenereItalyStephen Shaw NEGOTIATION
Stacey MacleadBrazilIoni Bowcher PROPOSAL
Octavia MaletSpainIoni Bowcher QUALIFIED
Izzy GarufiJapanXuxue Feng NEGOTIATION
Ricardo GauchoIndiaIvan Magalhaes QUALIFIED
Wickens NestleGermanyAmy Elsner PROPOSAL
Kadeem FlosiItalyStephen Shaw UNQUALIFIED
Clifford RimCanadaXuxue Feng UNQUALIFIED
Ricardo GauchoFranceElwin Sharvill UNQUALIFIED
Murillo MaletJapanElwin Sharvill NEGOTIATION
Arvin AlbaresIndiaOnyama Limba NEW
Jeanfrancois VenereBrazilIvan Magalhaes RENEWAL
Rodrigues CampainRussiaElwin Sharvill QUALIFIED
Costa DilliardIndiaAnna Fali UNQUALIFIED
Smith GlickItalyAmy Elsner NEW
Adams MorascaIndiaOnyama Limba NEW
Smith GlickRussiaElwin Sharvill NEGOTIATION
Octavia MaletGermanyIoni Bowcher RENEWAL
Greenwood BologniaJapanBernardo Dominic QUALIFIED
Stacey MacleadGermanyIvan Magalhaes RENEWAL
Johnson SergiRussiaBernardo Dominic NEGOTIATION
Juan WieserBrazilAnna Fali NEW
Silvio SlusarskiUnited KingdomAsiya Javayant RENEWAL
Adams MorascaFranceIoni Bowcher UNQUALIFIED
Tony FollerCanadaAmy Elsner QUALIFIED
Aruna FigeroaAustraliaIvan Magalhaes UNQUALIFIED
Smith GlickCanadaElwin Sharvill PROPOSAL
Mujtaba NickaGermanyXuxue Feng NEGOTIATION
Arvin AlbaresSpainStephen Shaw NEGOTIATION
Faith GillianJapanIoni Bowcher PROPOSAL
Munro FerenczAustraliaXuxue Feng QUALIFIED
Kadeem FlosiJapanBernardo Dominic NEGOTIATION
Octavia MaletFranceStephen Shaw UNQUALIFIED
Deepesh ChuiItalyAnna Fali QUALIFIED
Deepesh ChuiAustraliaOnyama Limba PROPOSAL
Kadeem FlosiJapanOnyama Limba QUALIFIED
Aruna FigeroaUnited KingdomIvan Magalhaes QUALIFIED
Stacey MacleadBrazilIvan Magalhaes NEGOTIATION
Ivar PaprockiJapanBernardo Dominic UNQUALIFIED
Adams MorascaFranceAnna Fali UNQUALIFIED
Mayumi KolmetzGermanyIoni Bowcher NEGOTIATION
Mujtaba NickaRussiaAsiya Javayant QUALIFIED
Ashley DoeJapanXuxue Feng UNQUALIFIED
Rodrigues CampainFranceBernardo Dominic NEW
Misaki RoysterCanadaAmy Elsner NEGOTIATION
Isabel BowleyBrazilOnyama Limba NEW
Frozen Columns
Name
Ivar Paprocki
Francesco Shinko
Chavez Briddick
Ricardo Gaucho
Clifford Rim
Kaitlin Ostrosky
Morrow Ruta
Izzy Garufi
Kadeem Flosi
Smith Glick
Francesco Shinko
Jefferson Schemmer
Munro Ferencz
Deepesh Chui
Claire Tollner
Kadeem Flosi
Stacey Maclead
Emily Whobrey
Deepesh Chui
Antonio Caudy
Maisha Rulapaugh
Tony Foller
Antonio Caudy
Antonio Caudy
Claire Tollner
Jefferson Schemmer
Ivar Paprocki
David Darakjy
Claire Tollner
Arvin Albares
Greenwood Bolognia
Nicolas Iturbide
Sinclair Waycott
Aika Inouye
Costa Dilliard
Juan Wieser
Morrow Ruta
David Darakjy
Morrow Ruta
Alejandro Perin
Faith Gillian
Morrow Ruta
David Darakjy
James Butt
Johnson Sergi
Mujtaba Nicka
Mayumi Kolmetz
Leja Caldarera
Cody Saylors
Maria Marrier
IdCountryDate
1000Spain2026-04-28
1001Russia2026-04-21
1002Germany2026-05-02
1003Italy2026-04-23
1004Brazil2026-05-05
1005Russia2026-05-06
1006Spain2026-05-18
1007France2026-05-06
1008Spain2026-04-22
1009Canada2026-05-07
1010United Kingdom2026-05-18
1011Russia2026-05-15
1012Brazil2026-05-12
1013Australia2026-05-06
1014Russia2026-05-09
1015Brazil2026-05-06
1016Japan2026-05-15
1017Spain2026-05-13
1018Argentina2026-04-27
1019India2026-05-07
1020Argentina2026-05-01
1021India2026-04-29
1022Spain2026-04-27
1023Japan2026-05-04
1024Argentina2026-05-15
1025Brazil2026-05-14
1026India2026-05-12
1027Brazil2026-04-29
1028Canada2026-05-06
1029France2026-04-27
1030Spain2026-04-25
1031Japan2026-05-03
1032Brazil2026-05-12
1033France2026-04-23
1034United Kingdom2026-05-01
1035Spain2026-05-09
1036Italy2026-05-16
1037Japan2026-05-03
1038Australia2026-04-29
1039Brazil2026-05-08
1040Australia2026-05-06
1041Australia2026-05-15
1042Russia2026-05-11
1043France2026-05-11
1044United Kingdom2026-05-14
1045France2026-05-19
1046Brazil2026-05-08
1047Spain2026-04-26
1048Argentina2026-05-12
1049Argentina2026-05-04

On-Demand Data

NameIdCountryDate
Arvin Albares1000Canada2026-05-05
Leon Oldroyd1001United Kingdom2026-04-29
Izzy Garufi1002Japan2026-04-25
Chavez Briddick1003Argentina2026-05-14
Juan Wieser1004India2026-05-04
Arvin Albares1005Spain2026-04-29
Jennifer Amigon1006Canada2026-05-12
Nicolas Iturbide1007India2026-05-02
Deepesh Chui1008Japan2026-04-25
Nicolas Iturbide1009Russia2026-05-06
Silvio Slusarski1010India2026-05-17
Clifford Rim1011Canada2026-05-18
Aruna Figeroa1012Japan2026-04-21
Octavia Malet1013Canada2026-04-22
Mayumi Kolmetz1014Spain2026-05-06
Darci Poquette1015Argentina2026-05-12
Murillo Malet1016Spain2026-05-16
Jennifer Amigon1017Spain2026-04-20
Murillo Malet1018Argentina2026-05-13
Emily Whobrey1019Argentina2026-04-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickBrazilBernardo Dominic NEW
Nicolas IturbideBrazilElwin Sharvill UNQUALIFIED
Nicolas IturbideArgentinaAnna Fali UNQUALIFIED
Ashley DoeItalyBernardo Dominic NEW
Darci PoquetteGermanyStephen Shaw NEGOTIATION
Wickens NestleRussiaXuxue Feng UNQUALIFIED
Jeanfrancois VenereArgentinaElwin Sharvill PROPOSAL
Izzy GarufiArgentinaAnna Fali QUALIFIED
Darci PoquetteGermanyStephen Shaw PROPOSAL
Darci PoquetteAustraliaAmy Elsner PROPOSAL
James ButtSpainElwin Sharvill PROPOSAL
Morrow RutaItalyIvan Magalhaes NEW
Jennifer AmigonSpainBernardo Dominic NEW
Mujtaba NickaCanadaIvan Magalhaes RENEWAL
Jones VocelkaGermanyIoni Bowcher NEW
Jennifer AmigonBrazilIvan Magalhaes RENEWAL
Emily WhobreyIndiaBernardo Dominic NEW
Alejandro PerinSpainStephen Shaw UNQUALIFIED
Antonio CaudyIndiaOnyama Limba PROPOSAL
Munro FerenczIndiaIvan Magalhaes NEGOTIATION
Nicolas IturbideFranceAnna Fali UNQUALIFIED
Silvio SlusarskiItalyAnna Fali PROPOSAL
Maisha RulapaughCanadaXuxue Feng UNQUALIFIED
Claire TollnerUnited KingdomIvan Magalhaes NEW
Maisha RulapaughJapanBernardo Dominic QUALIFIED
Silvio SlusarskiBrazilAnna Fali QUALIFIED
Leon OldroydArgentinaAnna Fali RENEWAL
Nicolas IturbideAustraliaAmy Elsner QUALIFIED
Ivar PaprockiGermanyAnna Fali UNQUALIFIED
Aditya KuskoArgentinaIoni Bowcher PROPOSAL
Aruna FigeroaUnited KingdomIvan Magalhaes UNQUALIFIED
Morrow RutaUnited KingdomAsiya Javayant QUALIFIED
Ivar PaprockiCanadaIvan Magalhaes NEW
Nicolas IturbideBrazilAnna Fali PROPOSAL
Emily WhobreyJapanAmy Elsner UNQUALIFIED
Isabel BowleyGermanyBernardo Dominic NEW
Emily WhobreyItalyAnna Fali NEW
Deepesh ChuiUnited KingdomXuxue Feng UNQUALIFIED
Aika InouyeSpainAnna Fali QUALIFIED
Maisha RulapaughItalyAnna Fali 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>