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
Jones VocelkaItalyAnna Fali NEGOTIATION
Emily WhobreyGermanyAmy Elsner PROPOSAL
Francesco ShinkoSpainIvan Magalhaes RENEWAL
Jeanfrancois VenereItalyAsiya Javayant RENEWAL
Clifford RimItalyStephen Shaw UNQUALIFIED
Salvatore StockhamUnited KingdomOnyama Limba UNQUALIFIED
Rodrigues CampainArgentinaBernardo Dominic RENEWAL
Chavez BriddickJapanElwin Sharvill NEGOTIATION
Ashley DoeUnited KingdomStephen Shaw PROPOSAL
Octavia MaletGermanyXuxue Feng NEGOTIATION
Silvio SlusarskiArgentinaIoni Bowcher QUALIFIED
Arvin AlbaresUnited KingdomElwin Sharvill RENEWAL
Misaki RoysterUnited KingdomStephen Shaw UNQUALIFIED
David DarakjySpainAnna Fali RENEWAL
Mujtaba NickaRussiaElwin Sharvill PROPOSAL
Julie StensethCanadaBernardo Dominic QUALIFIED
Jones VocelkaGermanyIvan Magalhaes RENEWAL
Murillo MaletRussiaOnyama Limba QUALIFIED
Antonio CaudyIndiaStephen Shaw NEW
Aruna FigeroaJapanIoni Bowcher NEW
Kaitlin OstroskyIndiaAnna Fali PROPOSAL
Jeanfrancois VenereRussiaElwin Sharvill QUALIFIED
Mujtaba NickaItalyAsiya Javayant RENEWAL
Maria MarrierItalyAsiya Javayant QUALIFIED
Murillo MaletJapanOnyama Limba PROPOSAL
Aika InouyeArgentinaStephen Shaw NEGOTIATION
Mayumi KolmetzGermanyOnyama Limba UNQUALIFIED
Mayumi KolmetzBrazilIvan Magalhaes QUALIFIED
Jeanfrancois VenereGermanyBernardo Dominic PROPOSAL
Smith GlickRussiaStephen Shaw QUALIFIED
Chavez BriddickRussiaAmy Elsner PROPOSAL
Aditya KuskoIndiaIvan Magalhaes QUALIFIED
Mayumi KolmetzGermanyAnna Fali UNQUALIFIED
Misaki RoysterGermanyAmy Elsner RENEWAL
Aditya KuskoItalyStephen Shaw NEW
Salvatore StockhamSpainBernardo Dominic PROPOSAL
Ashley DoeRussiaAmy Elsner UNQUALIFIED
Jennifer AmigonRussiaIvan Magalhaes UNQUALIFIED
Octavia MaletItalyXuxue Feng UNQUALIFIED
Wickens NestleGermanyStephen Shaw UNQUALIFIED
Ricardo GauchoIndiaXuxue Feng QUALIFIED
Leon OldroydJapanAnna Fali QUALIFIED
Sinclair WaycottJapanAmy Elsner NEGOTIATION
Costa DilliardIndiaAnna Fali RENEWAL
Mayumi KolmetzJapanOnyama Limba QUALIFIED
Rodrigues CampainGermanyBernardo Dominic RENEWAL
Nicolas IturbideRussiaIoni Bowcher PROPOSAL
Jefferson SchemmerIndiaBernardo Dominic PROPOSAL
Aditya KuskoJapanBernardo Dominic QUALIFIED
Nicolas IturbideUnited KingdomBernardo Dominic RENEWAL
Horizontal
NameCountryRepresentativeStatus
Murillo MaletBrazilIoni Bowcher PROPOSAL
Juan WieserJapanAmy Elsner QUALIFIED
Jennifer AmigonFranceAsiya Javayant NEGOTIATION
Kadeem FlosiBrazilIoni Bowcher UNQUALIFIED
Aditya KuskoRussiaIvan Magalhaes NEGOTIATION
Izzy GarufiFranceOnyama Limba PROPOSAL
Rodrigues CampainItalyAnna Fali RENEWAL
Nicolas IturbideJapanElwin Sharvill PROPOSAL
Deepesh ChuiAustraliaOnyama Limba RENEWAL
Stacey MacleadArgentinaAnna Fali QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaFrance2026-05-12Chapman, Ross E Esq PROPOSAL67Xuxue Feng
1001Juan WieserCanada2026-05-31Chemel, James L Cpa UNQUALIFIED67Amy Elsner
1002Jennifer AmigonBrazil2026-05-19Truhlar And Truhlar Attys QUALIFIED97Xuxue Feng
1003Costa DilliardBrazil2026-05-22Truhlar And Truhlar Attys RENEWAL24Elwin Sharvill
1004Johnson SergiIndia2026-06-05Morlong Associates RENEWAL41Amy Elsner
1005Nicolas IturbideAustralia2026-05-20Morlong Associates UNQUALIFIED99Ioni Bowcher
1006Morrow RutaSpain2026-05-13Feiner Bros UNQUALIFIED95Bernardo Dominic
1007Ricardo GauchoIndia2026-05-23Chanay, Jeffrey A Esq NEGOTIATION76Elwin Sharvill
1008Murillo MaletSpain2026-05-27King, Christopher A Esq PROPOSAL82Elwin Sharvill
1009Ivar PaprockiSpain2026-05-31Benton, John B Jr QUALIFIED48Elwin Sharvill
1010Jefferson SchemmerIndia2026-05-21Feltz Printing Service PROPOSAL92Amy Elsner
1011Smith GlickUnited Kingdom2026-05-12Rangoni Of Florence NEGOTIATION59Elwin Sharvill
1012Wickens NestleItaly2026-06-01Commercial Press UNQUALIFIED59Bernardo Dominic
1013Leon OldroydUnited Kingdom2026-05-12Chapman, Ross E Esq UNQUALIFIED47Elwin Sharvill
1014Rodrigues CampainAustralia2026-05-19Feiner Bros QUALIFIED60Asiya Javayant
1015Kaitlin OstroskyGermany2026-05-25Chemel, James L Cpa PROPOSAL99Elwin Sharvill
1016Jennifer AmigonGermany2026-05-31Printing Dimensions NEW30Amy Elsner
1017Arvin AlbaresGermany2026-05-22Rousseaux, Michael Esq PROPOSAL16Amy Elsner
1018Aditya KuskoArgentina2026-06-05Rangoni Of Florence QUALIFIED18Ivan Magalhaes
1019Misaki RoysterArgentina2026-05-26Rousseaux, Michael Esq PROPOSAL39Anna Fali
1020Maria MarrierFrance2026-05-24Rousseaux, Michael Esq PROPOSAL42Anna Fali
1021Darci PoquetteIndia2026-06-01Chanay, Jeffrey A Esq QUALIFIED56Asiya Javayant
1022Munro FerenczArgentina2026-06-04Printing Dimensions UNQUALIFIED59Asiya Javayant
1023James ButtSpain2026-06-05Feiner Bros RENEWAL84Elwin Sharvill
1024Faith GillianCanada2026-05-15Feiner Bros PROPOSAL26Xuxue Feng
1025Greenwood BologniaSpain2026-05-11King, Christopher A Esq UNQUALIFIED24Onyama Limba
1026Jeanfrancois VenereFrance2026-05-21Dorl, James J Esq RENEWAL78Anna Fali
1027Antonio CaudyIndia2026-05-14King, Christopher A Esq RENEWAL66Anna Fali
1028Emily WhobreyFrance2026-06-01Benton, John B Jr UNQUALIFIED76Onyama Limba
1029Ricardo GauchoSpain2026-05-28Chemel, James L Cpa PROPOSAL23Stephen Shaw
1030Salvatore StockhamSpain2026-06-06Rangoni Of Florence UNQUALIFIED33Elwin Sharvill
1031Rodrigues CampainArgentina2026-05-23Buckley Miller Wright UNQUALIFIED12Ioni Bowcher
1032Jennifer AmigonGermany2026-05-20Rousseaux, Michael Esq QUALIFIED18Anna Fali
1033Izzy GarufiIndia2026-05-25King, Christopher A Esq NEW25Bernardo Dominic
1034Aruna FigeroaArgentina2026-06-04Feltz Printing Service UNQUALIFIED11Xuxue Feng
1035Arvin AlbaresSpain2026-05-22Feltz Printing Service PROPOSAL93Elwin Sharvill
1036Wickens NestleSpain2026-05-19Printing Dimensions RENEWAL4Ioni Bowcher
1037Izzy GarufiIndia2026-05-11Rousseaux, Michael Esq PROPOSAL90Elwin Sharvill
1038Deepesh ChuiCanada2026-05-28Truhlar And Truhlar Attys NEGOTIATION56Onyama Limba
1039Aditya KuskoUnited Kingdom2026-05-20Chemel, James L Cpa NEW6Xuxue Feng
1040Izzy GarufiRussia2026-05-28Rousseaux, Michael Esq NEGOTIATION92Asiya Javayant
1041Francesco ShinkoBrazil2026-06-05Benton, John B Jr QUALIFIED37Xuxue Feng
1042Maisha RulapaughGermany2026-06-02Feltz Printing Service QUALIFIED55Onyama Limba
1043Claire TollnerGermany2026-06-03Dorl, James J Esq RENEWAL57Ioni Bowcher
1044Aditya KuskoRussia2026-06-02Chemel, James L Cpa PROPOSAL90Bernardo Dominic
1045David DarakjyJapan2026-06-05Buckley Miller Wright RENEWAL44Ivan Magalhaes
1046Cody SaylorsBrazil2026-05-10Morlong Associates NEW74Asiya Javayant
1047Leon OldroydGermany2026-05-15Commercial Press QUALIFIED7Anna Fali
1048Ivar PaprockiRussia2026-05-18King, Christopher A Esq NEW93Anna Fali
1049Ivar PaprockiAustralia2026-05-16Chanay, Jeffrey A Esq QUALIFIED5Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Kadeem FlosiGermanyXuxue Feng QUALIFIED
Claire TollnerItalyAnna Fali PROPOSAL
Jennifer AmigonRussiaAnna Fali UNQUALIFIED
Alejandro PerinRussiaStephen Shaw PROPOSAL
Chavez BriddickItalyBernardo Dominic RENEWAL
Munro FerenczArgentinaAnna Fali UNQUALIFIED
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Octavia MaletAustraliaIvan Magalhaes NEGOTIATION
Johnson SergiBrazilOnyama Limba RENEWAL
Tony FollerJapanStephen Shaw NEGOTIATION
Izzy GarufiArgentinaElwin Sharvill RENEWAL
James ButtIndiaXuxue Feng UNQUALIFIED
Francesco ShinkoFranceIvan Magalhaes RENEWAL
Mujtaba NickaFranceIoni Bowcher UNQUALIFIED
Alejandro PerinCanadaBernardo Dominic PROPOSAL
Ricardo GauchoItalyElwin Sharvill QUALIFIED
Darci PoquetteGermanyIoni Bowcher NEGOTIATION
Leja CaldareraItalyStephen Shaw RENEWAL
Nicolas IturbideIndiaAmy Elsner QUALIFIED
Ashley DoeBrazilIvan Magalhaes NEGOTIATION
Mayumi KolmetzUnited KingdomIvan Magalhaes PROPOSAL
Claire TollnerCanadaElwin Sharvill NEW
Francesco ShinkoItalyOnyama Limba UNQUALIFIED
Clifford RimIndiaBernardo Dominic NEW
Johnson SergiAustraliaAmy Elsner PROPOSAL
Arvin AlbaresSpainIvan Magalhaes UNQUALIFIED
Rodrigues CampainSpainIoni Bowcher RENEWAL
Faith GillianIndiaOnyama Limba NEW
Stacey MacleadCanadaAmy Elsner PROPOSAL
Ricardo GauchoFranceIvan Magalhaes NEW
Claire TollnerArgentinaXuxue Feng QUALIFIED
Izzy GarufiFranceIvan Magalhaes QUALIFIED
Rodrigues CampainArgentinaAsiya Javayant RENEWAL
Kadeem FlosiItalyIvan Magalhaes QUALIFIED
Aditya KuskoCanadaAsiya Javayant QUALIFIED
Adams MorascaGermanyAsiya Javayant NEW
Smith GlickGermanyXuxue Feng QUALIFIED
Morrow RutaItalyOnyama Limba NEGOTIATION
Johnson SergiArgentinaIvan Magalhaes UNQUALIFIED
Faith GillianAustraliaAnna Fali NEGOTIATION
Misaki RoysterArgentinaElwin Sharvill PROPOSAL
Alejandro PerinItalyIoni Bowcher NEW
Jones VocelkaCanadaElwin Sharvill QUALIFIED
Clifford RimCanadaAmy Elsner RENEWAL
Alejandro PerinCanadaIvan Magalhaes NEW
James ButtUnited KingdomOnyama Limba QUALIFIED
Leon OldroydJapanBernardo Dominic PROPOSAL
Kaitlin OstroskyAustraliaOnyama Limba NEW
Morrow RutaUnited KingdomOnyama Limba UNQUALIFIED
Emily WhobreyBrazilXuxue Feng UNQUALIFIED
Frozen Columns
Name
Francesco Shinko
Ricardo Gaucho
Jefferson Schemmer
Ricardo Gaucho
Kaitlin Ostrosky
Munro Ferencz
James Butt
Tony Foller
Jeanfrancois Venere
Leja Caldarera
Jeanfrancois Venere
Aditya Kusko
Morrow Ruta
Maisha Rulapaugh
Leja Caldarera
Aruna Figeroa
Ashley Doe
Alejandro Perin
Mayumi Kolmetz
Alejandro Perin
Antonio Caudy
Octavia Malet
Adams Morasca
Tony Foller
Emily Whobrey
Faith Gillian
Kadeem Flosi
Jeanfrancois Venere
Kadeem Flosi
Alejandro Perin
Silvio Slusarski
Maria Marrier
Julie Stenseth
Kadeem Flosi
Mayumi Kolmetz
Emily Whobrey
Ricardo Gaucho
Salvatore Stockham
Rodrigues Campain
Aruna Figeroa
Octavia Malet
Rodrigues Campain
Misaki Royster
David Darakjy
Kadeem Flosi
Costa Dilliard
Cody Saylors
Misaki Royster
Stacey Maclead
Aika Inouye
IdCountryDate
1000Canada2026-06-01
1001Russia2026-05-24
1002Brazil2026-05-31
1003India2026-05-24
1004Italy2026-05-29
1005Germany2026-05-08
1006India2026-05-16
1007Italy2026-06-02
1008Italy2026-05-13
1009India2026-06-03
1010Russia2026-05-12
1011India2026-05-22
1012Canada2026-05-12
1013Russia2026-05-14
1014Italy2026-05-27
1015India2026-05-14
1016Italy2026-05-20
1017Japan2026-05-31
1018Germany2026-05-10
1019Canada2026-05-18
1020France2026-05-30
1021India2026-05-30
1022Japan2026-05-08
1023India2026-05-09
1024Brazil2026-06-05
1025Russia2026-05-08
1026Argentina2026-05-11
1027Brazil2026-05-21
1028Australia2026-05-30
1029Russia2026-05-08
1030India2026-05-17
1031Spain2026-06-01
1032Canada2026-05-26
1033Australia2026-05-21
1034Brazil2026-05-31
1035Australia2026-05-30
1036Brazil2026-05-18
1037Canada2026-05-22
1038Germany2026-05-29
1039Italy2026-05-31
1040Germany2026-06-04
1041Argentina2026-05-09
1042Russia2026-05-09
1043Spain2026-05-09
1044Italy2026-05-17
1045Russia2026-05-13
1046Russia2026-05-30
1047Italy2026-06-04
1048Canada2026-05-14
1049Italy2026-05-24

On-Demand Data

NameIdCountryDate
Julie Stenseth1000France2026-05-18
Sinclair Waycott1001Japan2026-06-04
Leja Caldarera1002Australia2026-06-03
Aruna Figeroa1003India2026-05-28
Isabel Bowley1004Japan2026-05-22
Jones Vocelka1005India2026-05-27
Kadeem Flosi1006Germany2026-05-14
Arvin Albares1007United Kingdom2026-05-08
Cody Saylors1008Germany2026-05-28
Stacey Maclead1009Spain2026-05-25
Francesco Shinko1010Brazil2026-06-02
James Butt1011Brazil2026-05-25
Jones Vocelka1012Italy2026-05-29
Johnson Sergi1013India2026-05-11
Alejandro Perin1014Japan2026-05-26
Mayumi Kolmetz1015Brazil2026-05-10
Misaki Royster1016Italy2026-05-15
Stacey Maclead1017France2026-06-02
Rodrigues Campain1018Canada2026-05-10
Claire Tollner1019Italy2026-05-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aditya KuskoGermanyXuxue Feng NEW
Jones VocelkaAustraliaAsiya Javayant RENEWAL
Maria MarrierIndiaAsiya Javayant NEW
Aditya KuskoRussiaXuxue Feng UNQUALIFIED
Jones VocelkaJapanBernardo Dominic NEGOTIATION
Octavia MaletItalyOnyama Limba UNQUALIFIED
Faith GillianFranceBernardo Dominic UNQUALIFIED
Faith GillianFranceAmy Elsner RENEWAL
Mayumi KolmetzBrazilIvan Magalhaes RENEWAL
Darci PoquetteItalyAmy Elsner UNQUALIFIED
Leon OldroydUnited KingdomOnyama Limba RENEWAL
Salvatore StockhamItalyAmy Elsner PROPOSAL
Morrow RutaIndiaIoni Bowcher PROPOSAL
Ricardo GauchoAustraliaAnna Fali QUALIFIED
Ivar PaprockiItalyOnyama Limba QUALIFIED
Octavia MaletArgentinaElwin Sharvill UNQUALIFIED
Ivar PaprockiCanadaBernardo Dominic NEGOTIATION
Mayumi KolmetzUnited KingdomIvan Magalhaes NEGOTIATION
Greenwood BologniaBrazilIvan Magalhaes PROPOSAL
Smith GlickArgentinaXuxue Feng PROPOSAL
Emily WhobreyJapanElwin Sharvill NEW
Salvatore StockhamUnited KingdomElwin Sharvill RENEWAL
Ivar PaprockiBrazilElwin Sharvill NEW
Munro FerenczJapanIoni Bowcher UNQUALIFIED
Maria MarrierAustraliaAnna Fali PROPOSAL
Stacey MacleadGermanyElwin Sharvill RENEWAL
Julie StensethBrazilOnyama Limba UNQUALIFIED
Izzy GarufiSpainXuxue Feng UNQUALIFIED
Faith GillianBrazilStephen Shaw NEW
Greenwood BologniaAustraliaAmy Elsner NEGOTIATION
Morrow RutaJapanAmy Elsner NEGOTIATION
Tony FollerSpainAsiya Javayant PROPOSAL
Ivar PaprockiArgentinaOnyama Limba PROPOSAL
Cody SaylorsAustraliaIoni Bowcher UNQUALIFIED
Costa DilliardCanadaBernardo Dominic NEW
Aditya KuskoAustraliaElwin Sharvill NEW
Izzy GarufiUnited KingdomAnna Fali RENEWAL
Tony FollerSpainXuxue Feng QUALIFIED
Darci PoquetteRussiaIoni Bowcher UNQUALIFIED
Cody SaylorsBrazilXuxue Feng 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>