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
Jeanfrancois VenereJapanXuxue Feng UNQUALIFIED
Ivar PaprockiFranceOnyama Limba PROPOSAL
Claire TollnerAustraliaIoni Bowcher PROPOSAL
Jefferson SchemmerFranceAmy Elsner RENEWAL
Wickens NestleJapanStephen Shaw NEGOTIATION
Mujtaba NickaSpainElwin Sharvill NEW
Wickens NestleAustraliaXuxue Feng UNQUALIFIED
Clifford RimCanadaAmy Elsner NEGOTIATION
Tony FollerGermanyOnyama Limba QUALIFIED
Silvio SlusarskiSpainStephen Shaw PROPOSAL
Clifford RimCanadaAnna Fali PROPOSAL
Antonio CaudyIndiaXuxue Feng PROPOSAL
Mayumi KolmetzArgentinaIoni Bowcher NEW
Greenwood BologniaAustraliaXuxue Feng UNQUALIFIED
Octavia MaletItalyOnyama Limba UNQUALIFIED
Izzy GarufiUnited KingdomElwin Sharvill QUALIFIED
Deepesh ChuiBrazilIvan Magalhaes UNQUALIFIED
Aika InouyeSpainAnna Fali RENEWAL
Francesco ShinkoCanadaOnyama Limba QUALIFIED
Misaki RoysterItalyElwin Sharvill RENEWAL
Adams MorascaRussiaXuxue Feng QUALIFIED
Stacey MacleadAustraliaAsiya Javayant PROPOSAL
Nicolas IturbideIndiaIvan Magalhaes QUALIFIED
Jones VocelkaIndiaIoni Bowcher NEW
Darci PoquetteFranceElwin Sharvill NEW
Antonio CaudyUnited KingdomBernardo Dominic QUALIFIED
Murillo MaletAustraliaIoni Bowcher QUALIFIED
Jeanfrancois VenereFranceIvan Magalhaes RENEWAL
Juan WieserUnited KingdomOnyama Limba NEGOTIATION
Francesco ShinkoGermanyXuxue Feng PROPOSAL
Jones VocelkaBrazilAnna Fali PROPOSAL
Nicolas IturbideBrazilBernardo Dominic RENEWAL
James ButtAustraliaAnna Fali RENEWAL
Munro FerenczArgentinaAsiya Javayant PROPOSAL
Sinclair WaycottIndiaAnna Fali PROPOSAL
Aika InouyeAustraliaOnyama Limba PROPOSAL
Jefferson SchemmerArgentinaAsiya Javayant QUALIFIED
Aruna FigeroaGermanyOnyama Limba NEW
Adams MorascaJapanXuxue Feng UNQUALIFIED
Ricardo GauchoIndiaStephen Shaw PROPOSAL
Jones VocelkaSpainAmy Elsner QUALIFIED
Smith GlickGermanyBernardo Dominic PROPOSAL
Deepesh ChuiRussiaAmy Elsner NEW
Deepesh ChuiFranceAnna Fali NEW
Jennifer AmigonRussiaIvan Magalhaes PROPOSAL
Alejandro PerinArgentinaIoni Bowcher UNQUALIFIED
Tony FollerArgentinaAmy Elsner NEGOTIATION
Smith GlickJapanAmy Elsner NEGOTIATION
Tony FollerIndiaAnna Fali NEW
Stacey MacleadUnited KingdomBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterArgentinaAsiya Javayant NEGOTIATION
Jones VocelkaSpainIvan Magalhaes UNQUALIFIED
Mujtaba NickaFranceXuxue Feng UNQUALIFIED
Ivar PaprockiBrazilOnyama Limba PROPOSAL
Ivar PaprockiBrazilXuxue Feng NEGOTIATION
Kadeem FlosiItalyIoni Bowcher QUALIFIED
Greenwood BologniaAustraliaElwin Sharvill NEW
Greenwood BologniaAustraliaAmy Elsner NEW
Isabel BowleyFranceBernardo Dominic NEW
Rodrigues CampainCanadaXuxue Feng RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimAustralia2026-05-17Feltz Printing Service NEW76Asiya Javayant
1001Munro FerenczUnited Kingdom2026-05-22Benton, John B Jr NEW95Ivan Magalhaes
1002Mayumi KolmetzFrance2026-05-04Feiner Bros PROPOSAL80Ivan Magalhaes
1003Maria MarrierJapan2026-05-20Feiner Bros UNQUALIFIED70Asiya Javayant
1004Jennifer AmigonGermany2026-05-26Feiner Bros NEGOTIATION0Ivan Magalhaes
1005David DarakjyArgentina2026-05-05Chapman, Ross E Esq RENEWAL21Ioni Bowcher
1006Izzy GarufiCanada2026-05-04Morlong Associates NEW42Ivan Magalhaes
1007Ricardo GauchoItaly2026-05-08King, Christopher A Esq NEW27Asiya Javayant
1008Kaitlin OstroskyItaly2026-05-11Printing Dimensions PROPOSAL49Amy Elsner
1009Nicolas IturbideFrance2026-05-06Feiner Bros PROPOSAL47Anna Fali
1010Francesco ShinkoUnited Kingdom2026-05-19Morlong Associates NEGOTIATION27Xuxue Feng
1011Mayumi KolmetzCanada2026-06-02Feiner Bros PROPOSAL83Xuxue Feng
1012Izzy GarufiArgentina2026-05-10King, Christopher A Esq QUALIFIED3Elwin Sharvill
1013Murillo MaletArgentina2026-05-07Buckley Miller Wright PROPOSAL29Onyama Limba
1014Johnson SergiUnited Kingdom2026-05-14Feiner Bros RENEWAL98Onyama Limba
1015Darci PoquetteGermany2026-05-08Chapman, Ross E Esq RENEWAL64Amy Elsner
1016David DarakjyCanada2026-05-09Chapman, Ross E Esq NEGOTIATION73Onyama Limba
1017Aika InouyeCanada2026-05-24Morlong Associates RENEWAL22Onyama Limba
1018Kaitlin OstroskySpain2026-05-05Chanay, Jeffrey A Esq RENEWAL16Amy Elsner
1019Arvin AlbaresAustralia2026-05-06Commercial Press QUALIFIED82Anna Fali
1020Greenwood BologniaSpain2026-05-13Morlong Associates NEGOTIATION90Ivan Magalhaes
1021Izzy GarufiAustralia2026-05-09Dorl, James J Esq NEW25Stephen Shaw
1022Mujtaba NickaItaly2026-06-02Dorl, James J Esq NEW47Elwin Sharvill
1023Jefferson SchemmerRussia2026-05-20Commercial Press NEW6Xuxue Feng
1024Arvin AlbaresGermany2026-05-31Benton, John B Jr QUALIFIED36Bernardo Dominic
1025Aditya KuskoIndia2026-05-27King, Christopher A Esq NEGOTIATION62Elwin Sharvill
1026Wickens NestleBrazil2026-05-27Chanay, Jeffrey A Esq UNQUALIFIED92Xuxue Feng
1027Chavez BriddickBrazil2026-05-11Rousseaux, Michael Esq NEW34Anna Fali
1028Leon OldroydCanada2026-05-14Dorl, James J Esq QUALIFIED89Anna Fali
1029Ricardo GauchoGermany2026-05-14Rousseaux, Michael Esq PROPOSAL0Elwin Sharvill
1030Jones VocelkaItaly2026-05-23Truhlar And Truhlar Attys NEW33Asiya Javayant
1031Clifford RimCanada2026-05-24Feiner Bros QUALIFIED25Asiya Javayant
1032Misaki RoysterSpain2026-05-21Rousseaux, Michael Esq NEW31Bernardo Dominic
1033Emily WhobreyCanada2026-05-06Buckley Miller Wright NEW46Ioni Bowcher
1034Jefferson SchemmerRussia2026-05-17Feiner Bros PROPOSAL71Ivan Magalhaes
1035Juan WieserArgentina2026-05-15Rousseaux, Michael Esq NEGOTIATION9Stephen Shaw
1036Salvatore StockhamItaly2026-05-24Benton, John B Jr UNQUALIFIED86Stephen Shaw
1037Jefferson SchemmerFrance2026-06-02Chanay, Jeffrey A Esq NEW69Xuxue Feng
1038Jefferson SchemmerBrazil2026-05-27Feltz Printing Service QUALIFIED26Amy Elsner
1039Murillo MaletBrazil2026-05-29Buckley Miller Wright NEW2Asiya Javayant
1040Johnson SergiSpain2026-05-29Truhlar And Truhlar Attys PROPOSAL53Bernardo Dominic
1041Chavez BriddickCanada2026-05-13Printing Dimensions NEW56Ioni Bowcher
1042Sinclair WaycottCanada2026-05-28Rousseaux, Michael Esq RENEWAL39Elwin Sharvill
1043Izzy GarufiGermany2026-05-21King, Christopher A Esq NEGOTIATION15Amy Elsner
1044Johnson SergiItaly2026-05-09Buckley Miller Wright PROPOSAL11Anna Fali
1045Smith GlickIndia2026-06-02Chemel, James L Cpa UNQUALIFIED2Bernardo Dominic
1046Alejandro PerinCanada2026-05-25Benton, John B Jr UNQUALIFIED13Xuxue Feng
1047Ricardo GauchoFrance2026-05-05Buckley Miller Wright UNQUALIFIED2Elwin Sharvill
1048Faith GillianArgentina2026-05-09Feltz Printing Service QUALIFIED99Onyama Limba
1049Wickens NestleIndia2026-05-22Rousseaux, Michael Esq NEW11Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyGermanyAsiya Javayant UNQUALIFIED
Claire TollnerGermanyIoni Bowcher UNQUALIFIED
Leon OldroydRussiaBernardo Dominic NEW
Kaitlin OstroskyArgentinaAnna Fali PROPOSAL
Antonio CaudyJapanXuxue Feng NEGOTIATION
Juan WieserSpainElwin Sharvill QUALIFIED
Mayumi KolmetzItalyAmy Elsner NEGOTIATION
Chavez BriddickCanadaIvan Magalhaes QUALIFIED
Emily WhobreyIndiaAsiya Javayant NEGOTIATION
Maisha RulapaughRussiaBernardo Dominic UNQUALIFIED
Morrow RutaIndiaStephen Shaw UNQUALIFIED
Smith GlickSpainAmy Elsner RENEWAL
Johnson SergiJapanOnyama Limba NEGOTIATION
Arvin AlbaresRussiaIvan Magalhaes RENEWAL
Murillo MaletRussiaXuxue Feng UNQUALIFIED
Aditya KuskoItalyStephen Shaw PROPOSAL
Salvatore StockhamFranceAnna Fali PROPOSAL
Alejandro PerinItalyAnna Fali RENEWAL
Clifford RimSpainAnna Fali UNQUALIFIED
Maria MarrierSpainStephen Shaw QUALIFIED
Stacey MacleadRussiaStephen Shaw QUALIFIED
Maria MarrierJapanStephen Shaw UNQUALIFIED
Johnson SergiUnited KingdomAnna Fali QUALIFIED
Adams MorascaUnited KingdomIoni Bowcher NEGOTIATION
Greenwood BologniaItalyAnna Fali NEGOTIATION
Ricardo GauchoIndiaIvan Magalhaes NEW
Aruna FigeroaJapanStephen Shaw NEGOTIATION
Costa DilliardJapanXuxue Feng PROPOSAL
Aika InouyeJapanOnyama Limba UNQUALIFIED
Kaitlin OstroskyFranceAmy Elsner RENEWAL
Ivar PaprockiAustraliaIvan Magalhaes NEGOTIATION
Mayumi KolmetzRussiaXuxue Feng NEW
Aika InouyeSpainIoni Bowcher RENEWAL
Leon OldroydFranceAmy Elsner RENEWAL
Leon OldroydGermanyElwin Sharvill NEGOTIATION
Francesco ShinkoItalyElwin Sharvill UNQUALIFIED
Ashley DoeSpainAsiya Javayant QUALIFIED
Aruna FigeroaBrazilBernardo Dominic RENEWAL
Claire TollnerGermanyIvan Magalhaes RENEWAL
Juan WieserAustraliaBernardo Dominic PROPOSAL
Antonio CaudyCanadaOnyama Limba NEGOTIATION
Chavez BriddickAustraliaOnyama Limba PROPOSAL
Kaitlin OstroskyAustraliaIoni Bowcher PROPOSAL
Wickens NestleIndiaStephen Shaw UNQUALIFIED
Darci PoquetteRussiaAsiya Javayant NEGOTIATION
Rodrigues CampainCanadaAnna Fali RENEWAL
Greenwood BologniaFranceAsiya Javayant UNQUALIFIED
Stacey MacleadIndiaAmy Elsner RENEWAL
James ButtRussiaXuxue Feng QUALIFIED
Maisha RulapaughFranceIvan Magalhaes QUALIFIED
Frozen Columns
Name
Ricardo Gaucho
Juan Wieser
Maria Marrier
Murillo Malet
Clifford Rim
Juan Wieser
Jennifer Amigon
Munro Ferencz
Greenwood Bolognia
Claire Tollner
Johnson Sergi
Salvatore Stockham
Jeanfrancois Venere
Mayumi Kolmetz
Silvio Slusarski
Octavia Malet
Chavez Briddick
Chavez Briddick
Johnson Sergi
Mujtaba Nicka
Ivar Paprocki
Isabel Bowley
Johnson Sergi
Claire Tollner
Adams Morasca
David Darakjy
Julie Stenseth
Darci Poquette
Jennifer Amigon
Aika Inouye
Leon Oldroyd
Greenwood Bolognia
Francesco Shinko
Ivar Paprocki
Smith Glick
Rodrigues Campain
Aruna Figeroa
Mayumi Kolmetz
Nicolas Iturbide
Silvio Slusarski
James Butt
Mujtaba Nicka
Morrow Ruta
Ashley Doe
Leja Caldarera
Salvatore Stockham
Juan Wieser
Maria Marrier
Ashley Doe
Munro Ferencz
IdCountryDate
1000Spain2026-05-21
1001Japan2026-05-18
1002Canada2026-05-26
1003France2026-05-30
1004Australia2026-06-01
1005India2026-06-02
1006India2026-05-11
1007Spain2026-05-18
1008Japan2026-05-20
1009Italy2026-05-17
1010Australia2026-05-06
1011Germany2026-05-04
1012Canada2026-05-20
1013Japan2026-05-15
1014Brazil2026-06-02
1015Germany2026-05-08
1016United Kingdom2026-05-18
1017India2026-05-04
1018Russia2026-05-11
1019France2026-05-24
1020Brazil2026-05-22
1021France2026-05-23
1022Brazil2026-05-09
1023Canada2026-05-29
1024Brazil2026-05-22
1025Australia2026-05-11
1026United Kingdom2026-06-02
1027Germany2026-05-21
1028Spain2026-05-17
1029Russia2026-05-16
1030Spain2026-05-10
1031Canada2026-05-16
1032Argentina2026-05-10
1033Russia2026-05-21
1034Brazil2026-05-06
1035Brazil2026-05-20
1036Argentina2026-05-10
1037Brazil2026-05-16
1038India2026-05-29
1039Germany2026-05-10
1040India2026-05-26
1041Italy2026-05-14
1042Canada2026-05-22
1043United Kingdom2026-05-27
1044Spain2026-05-09
1045Germany2026-05-17
1046Russia2026-05-05
1047Russia2026-05-16
1048Australia2026-05-20
1049France2026-05-19

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000Australia2026-05-21
Maria Marrier1001India2026-05-18
Johnson Sergi1002France2026-05-24
Silvio Slusarski1003Argentina2026-05-12
Wickens Nestle1004Russia2026-05-05
Mujtaba Nicka1005Canada2026-05-06
Clifford Rim1006Australia2026-05-14
Maisha Rulapaugh1007Germany2026-05-07
Cody Saylors1008Italy2026-05-17
Ivar Paprocki1009Spain2026-06-02
Leon Oldroyd1010Canada2026-05-12
Kadeem Flosi1011Germany2026-05-07
Costa Dilliard1012France2026-05-13
Stacey Maclead1013Canada2026-05-13
Arvin Albares1014India2026-05-25
Rodrigues Campain1015Spain2026-05-13
Morrow Ruta1016Germany2026-05-25
Adams Morasca1017Australia2026-05-06
Maria Marrier1018France2026-05-21
Jeanfrancois Venere1019France2026-05-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy GarufiIndiaIoni Bowcher PROPOSAL
Clifford RimSpainStephen Shaw RENEWAL
Ivar PaprockiCanadaAsiya Javayant NEGOTIATION
Mayumi KolmetzUnited KingdomIoni Bowcher NEW
Cody SaylorsBrazilOnyama Limba QUALIFIED
Deepesh ChuiIndiaAnna Fali RENEWAL
Antonio CaudyAustraliaOnyama Limba NEGOTIATION
Morrow RutaCanadaOnyama Limba QUALIFIED
Ashley DoeUnited KingdomAsiya Javayant UNQUALIFIED
Izzy GarufiBrazilElwin Sharvill PROPOSAL
Silvio SlusarskiUnited KingdomAsiya Javayant NEGOTIATION
Nicolas IturbideRussiaAnna Fali RENEWAL
Murillo MaletIndiaAsiya Javayant PROPOSAL
Chavez BriddickGermanyAsiya Javayant PROPOSAL
Mujtaba NickaCanadaAnna Fali RENEWAL
Murillo MaletFranceBernardo Dominic QUALIFIED
Ashley DoeUnited KingdomXuxue Feng PROPOSAL
Ivar PaprockiArgentinaOnyama Limba UNQUALIFIED
Misaki RoysterIndiaAnna Fali UNQUALIFIED
Aruna FigeroaArgentinaIvan Magalhaes NEGOTIATION
Smith GlickFranceStephen Shaw RENEWAL
Ricardo GauchoGermanyOnyama Limba RENEWAL
Aruna FigeroaGermanyElwin Sharvill UNQUALIFIED
Leon OldroydRussiaIvan Magalhaes NEGOTIATION
Nicolas IturbideRussiaIvan Magalhaes NEW
Kaitlin OstroskyAustraliaAsiya Javayant UNQUALIFIED
Stacey MacleadUnited KingdomAnna Fali UNQUALIFIED
James ButtArgentinaElwin Sharvill UNQUALIFIED
Alejandro PerinItalyXuxue Feng UNQUALIFIED
Misaki RoysterIndiaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereItalyAmy Elsner NEW
Claire TollnerGermanyAmy Elsner UNQUALIFIED
Octavia MaletBrazilXuxue Feng NEGOTIATION
James ButtSpainAmy Elsner UNQUALIFIED
Antonio CaudyBrazilOnyama Limba PROPOSAL
Aruna FigeroaRussiaXuxue Feng RENEWAL
Silvio SlusarskiUnited KingdomXuxue Feng PROPOSAL
Kadeem FlosiArgentinaElwin Sharvill NEGOTIATION
Morrow RutaArgentinaOnyama Limba UNQUALIFIED
Maisha RulapaughJapanAmy Elsner PROPOSAL

<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>