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
Maisha RulapaughBrazilElwin Sharvill NEGOTIATION
Adams MorascaItalyAnna Fali NEGOTIATION
Clifford RimItalyIvan Magalhaes QUALIFIED
Emily WhobreyRussiaAnna Fali RENEWAL
Sinclair WaycottArgentinaElwin Sharvill PROPOSAL
Rodrigues CampainUnited KingdomAsiya Javayant QUALIFIED
Emily WhobreyBrazilOnyama Limba UNQUALIFIED
Stacey MacleadItalyXuxue Feng NEGOTIATION
Adams MorascaAustraliaBernardo Dominic NEGOTIATION
Morrow RutaCanadaAnna Fali UNQUALIFIED
Julie StensethFranceElwin Sharvill RENEWAL
Misaki RoysterGermanyAnna Fali UNQUALIFIED
Jones VocelkaItalyIoni Bowcher PROPOSAL
Munro FerenczIndiaIoni Bowcher RENEWAL
Antonio CaudyIndiaIoni Bowcher NEW
Munro FerenczBrazilAnna Fali UNQUALIFIED
Arvin AlbaresSpainAnna Fali NEW
Rodrigues CampainGermanyStephen Shaw NEGOTIATION
Leon OldroydUnited KingdomAmy Elsner NEW
Isabel BowleyGermanyIoni Bowcher NEGOTIATION
Rodrigues CampainArgentinaAmy Elsner PROPOSAL
David DarakjyItalyAsiya Javayant NEGOTIATION
Aditya KuskoJapanBernardo Dominic NEW
Aruna FigeroaIndiaAsiya Javayant QUALIFIED
Chavez BriddickGermanyIvan Magalhaes NEW
Johnson SergiFranceOnyama Limba QUALIFIED
Jefferson SchemmerRussiaIvan Magalhaes RENEWAL
Claire TollnerFranceElwin Sharvill QUALIFIED
Deepesh ChuiAustraliaBernardo Dominic UNQUALIFIED
Mujtaba NickaArgentinaOnyama Limba UNQUALIFIED
Morrow RutaJapanAmy Elsner NEW
Maria MarrierRussiaIvan Magalhaes RENEWAL
Francesco ShinkoUnited KingdomAsiya Javayant QUALIFIED
Stacey MacleadRussiaAnna Fali NEGOTIATION
Arvin AlbaresRussiaIvan Magalhaes NEW
Jefferson SchemmerIndiaOnyama Limba NEW
Isabel BowleyBrazilBernardo Dominic PROPOSAL
Costa DilliardArgentinaAsiya Javayant RENEWAL
Morrow RutaGermanyOnyama Limba NEW
Aika InouyeAustraliaXuxue Feng RENEWAL
Wickens NestleSpainAnna Fali QUALIFIED
Leon OldroydRussiaXuxue Feng UNQUALIFIED
Isabel BowleyGermanyIvan Magalhaes PROPOSAL
Aruna FigeroaFranceAnna Fali NEGOTIATION
Chavez BriddickBrazilElwin Sharvill NEGOTIATION
Maisha RulapaughJapanXuxue Feng PROPOSAL
Misaki RoysterSpainAnna Fali NEGOTIATION
Mujtaba NickaSpainAnna Fali UNQUALIFIED
Johnson SergiFranceStephen Shaw RENEWAL
Salvatore StockhamRussiaStephen Shaw PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Costa DilliardIndiaAnna Fali NEGOTIATION
Ivar PaprockiGermanyAmy Elsner PROPOSAL
Claire TollnerArgentinaBernardo Dominic QUALIFIED
Mujtaba NickaCanadaElwin Sharvill NEW
Mayumi KolmetzIndiaElwin Sharvill QUALIFIED
Murillo MaletRussiaXuxue Feng NEW
Jefferson SchemmerSpainAmy Elsner UNQUALIFIED
Jefferson SchemmerSpainOnyama Limba NEGOTIATION
Deepesh ChuiUnited KingdomElwin Sharvill NEGOTIATION
Murillo MaletJapanIvan Magalhaes UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Isabel BowleyGermany2025-09-29Chapman, Ross E Esq NEGOTIATION20Elwin Sharvill
1001Wickens NestleGermany2025-09-29Chanay, Jeffrey A Esq QUALIFIED92Ioni Bowcher
1002Misaki RoysterFrance2025-09-17Truhlar And Truhlar Attys RENEWAL31Ivan Magalhaes
1003Rodrigues CampainUnited Kingdom2025-10-07Benton, John B Jr QUALIFIED28Asiya Javayant
1004Leon OldroydCanada2025-09-15Morlong Associates UNQUALIFIED58Onyama Limba
1005Rodrigues CampainUnited Kingdom2025-09-24Morlong Associates RENEWAL59Onyama Limba
1006Mujtaba NickaUnited Kingdom2025-09-26Printing Dimensions NEW20Ivan Magalhaes
1007Mujtaba NickaJapan2025-10-05Chemel, James L Cpa NEGOTIATION55Bernardo Dominic
1008Octavia MaletAustralia2025-09-20Chanay, Jeffrey A Esq RENEWAL56Asiya Javayant
1009Wickens NestleItaly2025-09-22Benton, John B Jr UNQUALIFIED96Ioni Bowcher
1010Juan WieserBrazil2025-10-04Chapman, Ross E Esq RENEWAL51Xuxue Feng
1011Adams MorascaIndia2025-10-06Chapman, Ross E Esq QUALIFIED61Onyama Limba
1012Isabel BowleyRussia2025-09-21Chemel, James L Cpa RENEWAL37Elwin Sharvill
1013Adams MorascaItaly2025-09-21King, Christopher A Esq PROPOSAL55Anna Fali
1014Kadeem FlosiBrazil2025-09-22Dorl, James J Esq NEGOTIATION67Bernardo Dominic
1015Wickens NestleFrance2025-10-03Feiner Bros PROPOSAL24Ivan Magalhaes
1016Munro FerenczItaly2025-10-01Truhlar And Truhlar Attys PROPOSAL39Elwin Sharvill
1017Wickens NestleBrazil2025-09-11Morlong Associates UNQUALIFIED47Xuxue Feng
1018Sinclair WaycottIndia2025-09-14Rousseaux, Michael Esq QUALIFIED82Ioni Bowcher
1019Aruna FigeroaFrance2025-10-09Morlong Associates RENEWAL1Bernardo Dominic
1020Jones VocelkaSpain2025-09-24Dorl, James J Esq QUALIFIED29Onyama Limba
1021Alejandro PerinSpain2025-09-17Chanay, Jeffrey A Esq NEW56Ioni Bowcher
1022Adams MorascaArgentina2025-10-04Feiner Bros NEGOTIATION33Anna Fali
1023Octavia MaletUnited Kingdom2025-09-10Chanay, Jeffrey A Esq NEW63Stephen Shaw
1024Alejandro PerinCanada2025-10-01Truhlar And Truhlar Attys NEGOTIATION71Ivan Magalhaes
1025Murillo MaletSpain2025-09-30Truhlar And Truhlar Attys QUALIFIED99Anna Fali
1026Deepesh ChuiBrazil2025-09-26Rousseaux, Michael Esq NEW0Anna Fali
1027Jeanfrancois VenereSpain2025-09-13Rangoni Of Florence UNQUALIFIED7Onyama Limba
1028Misaki RoysterJapan2025-09-17King, Christopher A Esq QUALIFIED49Ioni Bowcher
1029Salvatore StockhamIndia2025-09-14Dorl, James J Esq QUALIFIED48Elwin Sharvill
1030Kaitlin OstroskyFrance2025-09-17Truhlar And Truhlar Attys UNQUALIFIED82Asiya Javayant
1031Maisha RulapaughGermany2025-09-16Feltz Printing Service QUALIFIED16Asiya Javayant
1032Kadeem FlosiRussia2025-09-19Rangoni Of Florence QUALIFIED69Onyama Limba
1033Wickens NestleArgentina2025-09-13Feiner Bros NEW39Bernardo Dominic
1034Maria MarrierUnited Kingdom2025-10-03Feltz Printing Service NEW87Asiya Javayant
1035Jones VocelkaCanada2025-09-18Rangoni Of Florence QUALIFIED36Ioni Bowcher
1036Emily WhobreyIndia2025-09-27Chapman, Ross E Esq QUALIFIED80Ioni Bowcher
1037Mujtaba NickaBrazil2025-10-08King, Christopher A Esq PROPOSAL74Onyama Limba
1038Jefferson SchemmerCanada2025-10-05King, Christopher A Esq NEGOTIATION63Bernardo Dominic
1039Emily WhobreyIndia2025-10-08Dorl, James J Esq RENEWAL81Ivan Magalhaes
1040Arvin AlbaresFrance2025-09-25Dorl, James J Esq NEGOTIATION33Stephen Shaw
1041Julie StensethCanada2025-10-06Printing Dimensions NEW63Onyama Limba
1042Greenwood BologniaIndia2025-09-20Morlong Associates NEGOTIATION41Asiya Javayant
1043Darci PoquetteJapan2025-09-14Benton, John B Jr QUALIFIED47Ivan Magalhaes
1044Jennifer AmigonIndia2025-09-16Buckley Miller Wright UNQUALIFIED56Xuxue Feng
1045Maria MarrierRussia2025-09-26Benton, John B Jr PROPOSAL23Elwin Sharvill
1046Costa DilliardGermany2025-09-10Morlong Associates NEGOTIATION30Elwin Sharvill
1047Greenwood BologniaRussia2025-09-14Morlong Associates NEGOTIATION2Amy Elsner
1048Costa DilliardUnited Kingdom2025-10-04Chapman, Ross E Esq QUALIFIED55Ivan Magalhaes
1049Faith GillianSpain2025-10-04Commercial Press NEW89Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Chavez BriddickBrazilElwin Sharvill UNQUALIFIED
Leja CaldareraGermanyAnna Fali RENEWAL
Silvio SlusarskiIndiaStephen Shaw NEGOTIATION
David DarakjyArgentinaStephen Shaw UNQUALIFIED
Maisha RulapaughGermanyAmy Elsner RENEWAL
Darci PoquetteFranceIvan Magalhaes NEGOTIATION
Antonio CaudySpainXuxue Feng RENEWAL
Julie StensethItalyAnna Fali NEGOTIATION
Antonio CaudySpainStephen Shaw UNQUALIFIED
Misaki RoysterBrazilStephen Shaw NEGOTIATION
Juan WieserSpainXuxue Feng RENEWAL
Aditya KuskoItalyIvan Magalhaes NEGOTIATION
Munro FerenczBrazilAmy Elsner PROPOSAL
Arvin AlbaresSpainIoni Bowcher QUALIFIED
Greenwood BologniaSpainIvan Magalhaes NEGOTIATION
Faith GillianArgentinaStephen Shaw NEW
Ivar PaprockiBrazilAmy Elsner NEGOTIATION
Octavia MaletArgentinaAnna Fali NEW
Tony FollerSpainAnna Fali RENEWAL
Silvio SlusarskiUnited KingdomXuxue Feng PROPOSAL
Tony FollerGermanyBernardo Dominic QUALIFIED
Claire TollnerCanadaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerAustraliaXuxue Feng NEW
Clifford RimCanadaAnna Fali UNQUALIFIED
Maisha RulapaughItalyIvan Magalhaes NEW
Faith GillianJapanIoni Bowcher QUALIFIED
Jefferson SchemmerUnited KingdomOnyama Limba QUALIFIED
Alejandro PerinRussiaOnyama Limba UNQUALIFIED
Murillo MaletJapanAmy Elsner NEW
Jennifer AmigonBrazilAsiya Javayant UNQUALIFIED
Jennifer AmigonBrazilStephen Shaw UNQUALIFIED
James ButtIndiaXuxue Feng PROPOSAL
Faith GillianRussiaAnna Fali QUALIFIED
Chavez BriddickFranceAsiya Javayant NEGOTIATION
Maisha RulapaughJapanAsiya Javayant NEGOTIATION
Adams MorascaAustraliaAnna Fali NEW
Adams MorascaGermanyXuxue Feng NEW
Aika InouyeGermanyElwin Sharvill NEW
Misaki RoysterBrazilIoni Bowcher NEW
Clifford RimJapanIoni Bowcher UNQUALIFIED
Clifford RimUnited KingdomXuxue Feng NEW
Alejandro PerinGermanyAnna Fali RENEWAL
Jefferson SchemmerAustraliaAsiya Javayant NEGOTIATION
Wickens NestleJapanXuxue Feng PROPOSAL
Misaki RoysterItalyOnyama Limba UNQUALIFIED
Cody SaylorsRussiaOnyama Limba NEW
Octavia MaletBrazilAnna Fali NEW
Tony FollerJapanIvan Magalhaes NEGOTIATION
James ButtSpainBernardo Dominic PROPOSAL
Morrow RutaJapanAmy Elsner QUALIFIED
Frozen Columns
Name
Adams Morasca
Misaki Royster
Emily Whobrey
Greenwood Bolognia
Alejandro Perin
Cody Saylors
Salvatore Stockham
Alejandro Perin
Tony Foller
Darci Poquette
Deepesh Chui
Misaki Royster
James Butt
Mujtaba Nicka
Kaitlin Ostrosky
Cody Saylors
Johnson Sergi
Mujtaba Nicka
Aditya Kusko
Wickens Nestle
Ricardo Gaucho
Morrow Ruta
Rodrigues Campain
Kadeem Flosi
Mujtaba Nicka
Mayumi Kolmetz
Wickens Nestle
Jones Vocelka
Izzy Garufi
Sinclair Waycott
Mayumi Kolmetz
Ashley Doe
Deepesh Chui
Aditya Kusko
Julie Stenseth
Emily Whobrey
Leon Oldroyd
Octavia Malet
Darci Poquette
Sinclair Waycott
Silvio Slusarski
Ricardo Gaucho
Morrow Ruta
Darci Poquette
Mujtaba Nicka
Adams Morasca
Jeanfrancois Venere
Isabel Bowley
Emily Whobrey
Clifford Rim
IdCountryDate
1000India2025-10-09
1001Australia2025-10-05
1002France2025-09-28
1003Argentina2025-09-24
1004France2025-09-26
1005India2025-09-11
1006Russia2025-09-27
1007Canada2025-09-11
1008Spain2025-09-22
1009Japan2025-09-16
1010India2025-09-27
1011Japan2025-10-08
1012France2025-09-11
1013Argentina2025-09-10
1014Russia2025-09-26
1015India2025-09-27
1016Russia2025-09-30
1017Australia2025-09-28
1018Canada2025-10-09
1019Italy2025-09-11
1020Argentina2025-10-03
1021Japan2025-09-29
1022France2025-09-22
1023Italy2025-10-05
1024Canada2025-09-28
1025Spain2025-10-03
1026Argentina2025-09-10
1027Spain2025-09-14
1028Brazil2025-09-25
1029Japan2025-09-11
1030United Kingdom2025-10-02
1031Australia2025-09-15
1032United Kingdom2025-10-09
1033India2025-09-29
1034Italy2025-09-29
1035Russia2025-10-07
1036Brazil2025-10-04
1037France2025-09-16
1038Italy2025-09-23
1039Spain2025-09-24
1040Russia2025-09-18
1041Argentina2025-09-26
1042United Kingdom2025-10-07
1043Argentina2025-09-26
1044Canada2025-09-15
1045Australia2025-10-02
1046Japan2025-10-02
1047United Kingdom2025-09-30
1048Australia2025-09-10
1049Spain2025-10-08

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Brazil2025-09-23
David Darakjy1001India2025-09-29
Jeanfrancois Venere1002Argentina2025-09-23
Munro Ferencz1003Germany2025-09-30
Costa Dilliard1004Japan2025-09-29
Sinclair Waycott1005United Kingdom2025-09-19
Mayumi Kolmetz1006Italy2025-10-08
Francesco Shinko1007Australia2025-09-27
Munro Ferencz1008Germany2025-10-02
Rodrigues Campain1009Brazil2025-09-26
Jefferson Schemmer1010Canada2025-09-10
Antonio Caudy1011Brazil2025-09-10
Greenwood Bolognia1012Spain2025-09-20
Jones Vocelka1013Russia2025-09-21
Juan Wieser1014Canada2025-09-17
Aika Inouye1015Japan2025-09-13
Rodrigues Campain1016Japan2025-09-21
Murillo Malet1017Germany2025-10-09
Antonio Caudy1018Spain2025-09-19
Mayumi Kolmetz1019Russia2025-09-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyItalyBernardo Dominic NEGOTIATION
Kaitlin OstroskyAustraliaIvan Magalhaes RENEWAL
Ricardo GauchoAustraliaElwin Sharvill UNQUALIFIED
Murillo MaletArgentinaAsiya Javayant NEW
Smith GlickAustraliaAnna Fali PROPOSAL
Rodrigues CampainBrazilElwin Sharvill UNQUALIFIED
Isabel BowleyItalyElwin Sharvill RENEWAL
Jeanfrancois VenereSpainAsiya Javayant NEGOTIATION
Alejandro PerinFranceXuxue Feng NEW
Arvin AlbaresArgentinaIvan Magalhaes NEW
Jennifer AmigonCanadaAnna Fali NEW
Cody SaylorsFranceBernardo Dominic RENEWAL
Ashley DoeRussiaElwin Sharvill PROPOSAL
Ricardo GauchoFranceIvan Magalhaes NEW
Johnson SergiRussiaBernardo Dominic NEGOTIATION
Munro FerenczFranceIoni Bowcher NEW
Deepesh ChuiJapanAmy Elsner NEGOTIATION
Jeanfrancois VenereUnited KingdomIoni Bowcher NEGOTIATION
Aruna FigeroaItalyElwin Sharvill NEGOTIATION
Izzy GarufiBrazilIvan Magalhaes NEW
Francesco ShinkoGermanyXuxue Feng RENEWAL
Kaitlin OstroskyFranceAnna Fali PROPOSAL
Kadeem FlosiItalyAnna Fali RENEWAL
Kaitlin OstroskyIndiaStephen Shaw RENEWAL
Jeanfrancois VenereFranceElwin Sharvill RENEWAL
Jeanfrancois VenereSpainStephen Shaw NEGOTIATION
Murillo MaletFranceXuxue Feng PROPOSAL
Mayumi KolmetzIndiaStephen Shaw UNQUALIFIED
Faith GillianItalyOnyama Limba NEGOTIATION
Leja CaldareraAustraliaAmy Elsner PROPOSAL
Octavia MaletBrazilBernardo Dominic UNQUALIFIED
Wickens NestleRussiaElwin Sharvill PROPOSAL
James ButtJapanAmy Elsner PROPOSAL
Jones VocelkaCanadaBernardo Dominic PROPOSAL
Ivar PaprockiIndiaAnna Fali NEW
Alejandro PerinUnited KingdomXuxue Feng PROPOSAL
Rodrigues CampainCanadaBernardo Dominic PROPOSAL
Jefferson SchemmerArgentinaIvan Magalhaes PROPOSAL
Jones VocelkaRussiaXuxue Feng RENEWAL
Juan WieserItalyIoni Bowcher 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>