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
Misaki RoysterBrazilAmy Elsner NEGOTIATION
Morrow RutaJapanElwin Sharvill NEGOTIATION
Emily WhobreyItalyAnna Fali NEGOTIATION
Jeanfrancois VenereGermanyXuxue Feng NEGOTIATION
Silvio SlusarskiBrazilXuxue Feng UNQUALIFIED
Alejandro PerinBrazilAsiya Javayant UNQUALIFIED
Antonio CaudyAustraliaXuxue Feng QUALIFIED
Mayumi KolmetzCanadaAnna Fali PROPOSAL
Greenwood BologniaAustraliaOnyama Limba NEW
Kaitlin OstroskyArgentinaXuxue Feng PROPOSAL
Aika InouyeBrazilIoni Bowcher UNQUALIFIED
Isabel BowleyGermanyElwin Sharvill QUALIFIED
Ashley DoeFranceOnyama Limba RENEWAL
Julie StensethSpainAmy Elsner UNQUALIFIED
Chavez BriddickBrazilAsiya Javayant UNQUALIFIED
David DarakjyRussiaXuxue Feng QUALIFIED
Silvio SlusarskiGermanyStephen Shaw PROPOSAL
Clifford RimFranceBernardo Dominic PROPOSAL
Wickens NestleBrazilStephen Shaw UNQUALIFIED
Munro FerenczUnited KingdomElwin Sharvill PROPOSAL
Clifford RimBrazilAmy Elsner QUALIFIED
Isabel BowleyBrazilXuxue Feng PROPOSAL
Maisha RulapaughBrazilBernardo Dominic NEW
Jefferson SchemmerBrazilOnyama Limba NEW
Ivar PaprockiAustraliaElwin Sharvill NEW
Aika InouyeArgentinaIoni Bowcher RENEWAL
Maria MarrierUnited KingdomAsiya Javayant NEW
Silvio SlusarskiGermanyIvan Magalhaes NEW
Faith GillianAustraliaAsiya Javayant PROPOSAL
Ivar PaprockiUnited KingdomXuxue Feng NEW
Ashley DoeBrazilAnna Fali UNQUALIFIED
Arvin AlbaresArgentinaAnna Fali PROPOSAL
Francesco ShinkoRussiaElwin Sharvill QUALIFIED
Octavia MaletBrazilElwin Sharvill UNQUALIFIED
Jennifer AmigonGermanyStephen Shaw PROPOSAL
Claire TollnerCanadaAsiya Javayant NEGOTIATION
Antonio CaudyCanadaStephen Shaw QUALIFIED
Izzy GarufiUnited KingdomAmy Elsner NEW
Antonio CaudySpainStephen Shaw RENEWAL
Claire TollnerBrazilStephen Shaw NEW
Ricardo GauchoRussiaAmy Elsner UNQUALIFIED
Stacey MacleadJapanElwin Sharvill NEW
Jefferson SchemmerBrazilAsiya Javayant UNQUALIFIED
James ButtUnited KingdomOnyama Limba QUALIFIED
Isabel BowleyUnited KingdomAmy Elsner QUALIFIED
Mujtaba NickaBrazilAmy Elsner NEGOTIATION
Ashley DoeIndiaAmy Elsner RENEWAL
Francesco ShinkoCanadaIvan Magalhaes NEGOTIATION
Munro FerenczUnited KingdomAsiya Javayant RENEWAL
Stacey MacleadSpainOnyama Limba PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Kadeem FlosiGermanyAnna Fali NEGOTIATION
Jennifer AmigonRussiaAnna Fali NEGOTIATION
Clifford RimRussiaBernardo Dominic NEGOTIATION
Sinclair WaycottFranceStephen Shaw PROPOSAL
Greenwood BologniaArgentinaIoni Bowcher NEW
Francesco ShinkoCanadaAmy Elsner NEW
Alejandro PerinFranceAnna Fali RENEWAL
Arvin AlbaresJapanIoni Bowcher NEGOTIATION
Johnson SergiSpainIoni Bowcher QUALIFIED
Jennifer AmigonJapanElwin Sharvill QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Claire TollnerSpain2026-05-12Benton, John B Jr RENEWAL78Ivan Magalhaes
1001Octavia MaletCanada2026-05-14King, Christopher A Esq NEGOTIATION48Stephen Shaw
1002Rodrigues CampainItaly2026-05-17Rousseaux, Michael Esq NEW69Asiya Javayant
1003Julie StensethSpain2026-06-01Chapman, Ross E Esq PROPOSAL80Bernardo Dominic
1004Faith GillianFrance2026-05-31Feiner Bros RENEWAL23Xuxue Feng
1005Leon OldroydCanada2026-06-03Chanay, Jeffrey A Esq QUALIFIED59Anna Fali
1006Chavez BriddickFrance2026-05-13Chapman, Ross E Esq QUALIFIED21Anna Fali
1007Chavez BriddickIndia2026-06-01Chapman, Ross E Esq QUALIFIED19Ioni Bowcher
1008Kadeem FlosiItaly2026-05-20Truhlar And Truhlar Attys NEGOTIATION69Ioni Bowcher
1009Rodrigues CampainGermany2026-06-03Feltz Printing Service QUALIFIED1Ivan Magalhaes
1010Kadeem FlosiArgentina2026-06-03Chemel, James L Cpa NEW8Ioni Bowcher
1011Nicolas IturbideBrazil2026-05-21Benton, John B Jr NEW84Asiya Javayant
1012Antonio CaudyJapan2026-05-25Morlong Associates NEGOTIATION79Elwin Sharvill
1013Jeanfrancois VenereAustralia2026-05-27Chapman, Ross E Esq UNQUALIFIED41Ivan Magalhaes
1014Maisha RulapaughBrazil2026-05-08Rousseaux, Michael Esq NEGOTIATION21Elwin Sharvill
1015Ivar PaprockiCanada2026-05-11Commercial Press PROPOSAL78Onyama Limba
1016Mayumi KolmetzFrance2026-05-08Chemel, James L Cpa PROPOSAL72Xuxue Feng
1017Greenwood BologniaAustralia2026-05-10Chanay, Jeffrey A Esq UNQUALIFIED53Ioni Bowcher
1018Faith GillianFrance2026-06-01Benton, John B Jr UNQUALIFIED86Ioni Bowcher
1019Jefferson SchemmerArgentina2026-06-03Morlong Associates QUALIFIED11Amy Elsner
1020Darci PoquetteRussia2026-05-15Feltz Printing Service NEW2Ioni Bowcher
1021Chavez BriddickSpain2026-05-28Commercial Press QUALIFIED93Asiya Javayant
1022Mujtaba NickaSpain2026-05-26Truhlar And Truhlar Attys NEGOTIATION43Xuxue Feng
1023Darci PoquetteUnited Kingdom2026-06-02Dorl, James J Esq UNQUALIFIED1Stephen Shaw
1024Clifford RimItaly2026-05-27Feltz Printing Service UNQUALIFIED36Stephen Shaw
1025Wickens NestleFrance2026-05-25Benton, John B Jr NEW37Anna Fali
1026Jennifer AmigonFrance2026-05-30Rangoni Of Florence PROPOSAL68Xuxue Feng
1027Mayumi KolmetzCanada2026-05-29Commercial Press RENEWAL9Ioni Bowcher
1028Jefferson SchemmerGermany2026-05-30King, Christopher A Esq NEW88Ioni Bowcher
1029Cody SaylorsUnited Kingdom2026-05-12Truhlar And Truhlar Attys QUALIFIED12Stephen Shaw
1030Rodrigues CampainFrance2026-05-08Feiner Bros PROPOSAL76Ivan Magalhaes
1031Juan WieserArgentina2026-05-14Morlong Associates RENEWAL99Bernardo Dominic
1032Leon OldroydCanada2026-05-07Commercial Press UNQUALIFIED55Xuxue Feng
1033Julie StensethGermany2026-06-04Benton, John B Jr PROPOSAL88Ioni Bowcher
1034Isabel BowleyBrazil2026-05-14Rangoni Of Florence NEW66Bernardo Dominic
1035Jeanfrancois VenereRussia2026-06-05Feiner Bros UNQUALIFIED14Bernardo Dominic
1036David DarakjyBrazil2026-05-26Chemel, James L Cpa NEGOTIATION7Ioni Bowcher
1037Clifford RimJapan2026-05-07Chanay, Jeffrey A Esq PROPOSAL72Xuxue Feng
1038Munro FerenczCanada2026-05-12Truhlar And Truhlar Attys UNQUALIFIED91Ivan Magalhaes
1039Nicolas IturbideArgentina2026-05-24Commercial Press RENEWAL50Asiya Javayant
1040David DarakjyRussia2026-05-11Chapman, Ross E Esq UNQUALIFIED49Anna Fali
1041Maria MarrierUnited Kingdom2026-05-29Feiner Bros PROPOSAL70Asiya Javayant
1042Chavez BriddickSpain2026-05-07Truhlar And Truhlar Attys NEGOTIATION56Asiya Javayant
1043Silvio SlusarskiSpain2026-05-13Feltz Printing Service NEW92Bernardo Dominic
1044Emily WhobreyItaly2026-05-25Rangoni Of Florence PROPOSAL33Stephen Shaw
1045Isabel BowleyCanada2026-05-17Feltz Printing Service PROPOSAL72Ioni Bowcher
1046Costa DilliardRussia2026-05-21Truhlar And Truhlar Attys NEGOTIATION80Amy Elsner
1047Deepesh ChuiBrazil2026-05-30Rousseaux, Michael Esq NEGOTIATION11Anna Fali
1048Mayumi KolmetzAustralia2026-06-04Chapman, Ross E Esq NEGOTIATION4Elwin Sharvill
1049Octavia MaletIndia2026-05-30Feiner Bros QUALIFIED71Ioni Bowcher
Frozen Rows
NameCountryRepresentativeStatus
Wickens NestleFranceAmy Elsner UNQUALIFIED
Sinclair WaycottFranceStephen Shaw UNQUALIFIED
Nicolas IturbideArgentinaAsiya Javayant NEW
Tony FollerJapanOnyama Limba UNQUALIFIED
Greenwood BologniaIndiaAnna Fali NEW
Maria MarrierJapanOnyama Limba NEW
Francesco ShinkoJapanAnna Fali NEW
Francesco ShinkoFranceAsiya Javayant QUALIFIED
Mayumi KolmetzRussiaIvan Magalhaes NEGOTIATION
Leon OldroydAustraliaAmy Elsner NEW
Alejandro PerinJapanAmy Elsner PROPOSAL
Misaki RoysterJapanXuxue Feng NEGOTIATION
Ashley DoeRussiaAsiya Javayant UNQUALIFIED
Julie StensethArgentinaOnyama Limba NEGOTIATION
Nicolas IturbideItalyIvan Magalhaes UNQUALIFIED
Aika InouyeGermanyOnyama Limba PROPOSAL
Silvio SlusarskiRussiaAmy Elsner PROPOSAL
Costa DilliardSpainOnyama Limba NEGOTIATION
Alejandro PerinItalyIvan Magalhaes UNQUALIFIED
Isabel BowleyUnited KingdomOnyama Limba QUALIFIED
Nicolas IturbideGermanyAnna Fali PROPOSAL
Nicolas IturbideFranceAnna Fali NEW
Izzy GarufiArgentinaAsiya Javayant PROPOSAL
Misaki RoysterAustraliaBernardo Dominic RENEWAL
Ivar PaprockiRussiaAmy Elsner RENEWAL
Rodrigues CampainUnited KingdomIoni Bowcher UNQUALIFIED
Claire TollnerSpainIvan Magalhaes QUALIFIED
Antonio CaudyRussiaIvan Magalhaes UNQUALIFIED
David DarakjyArgentinaAmy Elsner UNQUALIFIED
Munro FerenczCanadaElwin Sharvill QUALIFIED
Arvin AlbaresRussiaStephen Shaw NEW
Costa DilliardGermanyIvan Magalhaes QUALIFIED
Salvatore StockhamArgentinaAsiya Javayant UNQUALIFIED
Leja CaldareraJapanAmy Elsner QUALIFIED
Mayumi KolmetzFranceAnna Fali UNQUALIFIED
Jeanfrancois VenereSpainIoni Bowcher NEW
Ricardo GauchoSpainBernardo Dominic NEGOTIATION
Murillo MaletRussiaOnyama Limba NEGOTIATION
Maisha RulapaughUnited KingdomAsiya Javayant QUALIFIED
Mayumi KolmetzArgentinaAsiya Javayant UNQUALIFIED
Leja CaldareraGermanyAmy Elsner RENEWAL
Aditya KuskoBrazilXuxue Feng PROPOSAL
Maisha RulapaughBrazilXuxue Feng RENEWAL
Clifford RimFranceStephen Shaw NEW
Aruna FigeroaFranceOnyama Limba NEGOTIATION
Juan WieserIndiaStephen Shaw QUALIFIED
Faith GillianItalyIvan Magalhaes NEW
Octavia MaletBrazilAnna Fali QUALIFIED
Juan WieserCanadaXuxue Feng NEGOTIATION
Ivar PaprockiBrazilAmy Elsner PROPOSAL
Frozen Columns
Name
Greenwood Bolognia
Juan Wieser
Jefferson Schemmer
Mujtaba Nicka
Leja Caldarera
Cody Saylors
Rodrigues Campain
Claire Tollner
Claire Tollner
Jefferson Schemmer
Ashley Doe
Antonio Caudy
Isabel Bowley
Morrow Ruta
Faith Gillian
Wickens Nestle
David Darakjy
Maisha Rulapaugh
Costa Dilliard
Juan Wieser
David Darakjy
Francesco Shinko
Rodrigues Campain
Nicolas Iturbide
Aika Inouye
Stacey Maclead
Jefferson Schemmer
Kaitlin Ostrosky
Izzy Garufi
Ricardo Gaucho
Ashley Doe
Julie Stenseth
Ricardo Gaucho
Maria Marrier
Aditya Kusko
David Darakjy
Aditya Kusko
Mujtaba Nicka
Maria Marrier
Darci Poquette
Jefferson Schemmer
Francesco Shinko
Kaitlin Ostrosky
Salvatore Stockham
Izzy Garufi
Smith Glick
Antonio Caudy
Leon Oldroyd
Cody Saylors
Izzy Garufi
IdCountryDate
1000Spain2026-05-24
1001India2026-05-07
1002Brazil2026-05-23
1003Spain2026-05-28
1004Italy2026-05-12
1005Japan2026-05-24
1006France2026-05-08
1007Spain2026-05-11
1008Germany2026-05-24
1009Spain2026-05-09
1010United Kingdom2026-05-28
1011United Kingdom2026-05-15
1012Australia2026-05-31
1013Australia2026-05-08
1014Russia2026-06-05
1015Russia2026-06-04
1016Australia2026-05-18
1017Italy2026-05-12
1018Brazil2026-05-16
1019Brazil2026-06-04
1020Spain2026-05-23
1021Australia2026-05-31
1022Spain2026-06-04
1023India2026-05-16
1024India2026-05-28
1025Russia2026-06-03
1026Germany2026-05-12
1027United Kingdom2026-05-28
1028Canada2026-05-24
1029Germany2026-05-14
1030Spain2026-05-17
1031France2026-05-18
1032Russia2026-05-24
1033United Kingdom2026-05-07
1034Argentina2026-05-08
1035Italy2026-05-07
1036Russia2026-05-21
1037Italy2026-05-08
1038Germany2026-05-14
1039Brazil2026-05-11
1040Canada2026-06-04
1041Italy2026-05-14
1042France2026-05-12
1043Brazil2026-05-30
1044Argentina2026-05-10
1045Brazil2026-06-03
1046Russia2026-05-11
1047Canada2026-05-25
1048Spain2026-06-03
1049India2026-06-01

On-Demand Data

NameIdCountryDate
Faith Gillian1000India2026-05-30
Smith Glick1001Germany2026-05-18
Leja Caldarera1002Brazil2026-05-25
Alejandro Perin1003Brazil2026-06-04
Juan Wieser1004Japan2026-05-10
Adams Morasca1005France2026-05-17
Antonio Caudy1006Canada2026-06-02
Claire Tollner1007Canada2026-05-28
Sinclair Waycott1008India2026-05-09
Leja Caldarera1009Italy2026-05-08
Misaki Royster1010Argentina2026-05-13
Chavez Briddick1011United Kingdom2026-05-30
Mayumi Kolmetz1012Russia2026-05-08
Arvin Albares1013Italy2026-05-31
Ashley Doe1014Australia2026-05-13
Misaki Royster1015Japan2026-06-04
James Butt1016Canada2026-05-23
Francesco Shinko1017Argentina2026-05-16
Mayumi Kolmetz1018Japan2026-05-07
Sinclair Waycott1019Japan2026-05-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ashley DoeIndiaAnna Fali NEW
Morrow RutaArgentinaAnna Fali RENEWAL
Sinclair WaycottIndiaIoni Bowcher NEGOTIATION
Chavez BriddickRussiaElwin Sharvill UNQUALIFIED
Mujtaba NickaRussiaBernardo Dominic QUALIFIED
Aika InouyeArgentinaAmy Elsner PROPOSAL
Antonio CaudyFranceIvan Magalhaes UNQUALIFIED
Alejandro PerinIndiaAmy Elsner RENEWAL
Claire TollnerRussiaAnna Fali QUALIFIED
Juan WieserCanadaBernardo Dominic QUALIFIED
Ashley DoeAustraliaIoni Bowcher RENEWAL
Francesco ShinkoItalyIvan Magalhaes QUALIFIED
Francesco ShinkoFranceAsiya Javayant NEGOTIATION
Murillo MaletIndiaAsiya Javayant UNQUALIFIED
Smith GlickSpainElwin Sharvill QUALIFIED
Izzy GarufiRussiaIvan Magalhaes NEGOTIATION
Isabel BowleyArgentinaElwin Sharvill RENEWAL
Silvio SlusarskiJapanOnyama Limba PROPOSAL
Mayumi KolmetzArgentinaAnna Fali RENEWAL
Jennifer AmigonBrazilAsiya Javayant RENEWAL
Kadeem FlosiCanadaIvan Magalhaes RENEWAL
Leon OldroydUnited KingdomStephen Shaw PROPOSAL
Ricardo GauchoUnited KingdomElwin Sharvill PROPOSAL
Aditya KuskoRussiaStephen Shaw QUALIFIED
Silvio SlusarskiRussiaXuxue Feng UNQUALIFIED
Smith GlickSpainOnyama Limba PROPOSAL
Ashley DoeAustraliaBernardo Dominic QUALIFIED
Leon OldroydSpainAsiya Javayant QUALIFIED
Francesco ShinkoFranceIoni Bowcher NEW
Smith GlickArgentinaXuxue Feng QUALIFIED
Kadeem FlosiSpainAnna Fali RENEWAL
Mujtaba NickaGermanyAnna Fali PROPOSAL
Mayumi KolmetzBrazilAnna Fali UNQUALIFIED
Greenwood BologniaArgentinaAmy Elsner NEW
Jefferson SchemmerAustraliaAsiya Javayant NEGOTIATION
Jones VocelkaFranceIvan Magalhaes NEGOTIATION
Jones VocelkaFranceIoni Bowcher NEGOTIATION
Izzy GarufiFranceXuxue Feng RENEWAL
Costa DilliardIndiaStephen Shaw RENEWAL
Alejandro PerinBrazilOnyama Limba 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>