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
Isabel BowleyArgentinaXuxue Feng RENEWAL
Jefferson SchemmerSpainIoni Bowcher UNQUALIFIED
Antonio CaudyRussiaStephen Shaw RENEWAL
Mayumi KolmetzJapanAnna Fali QUALIFIED
Ivar PaprockiBrazilIoni Bowcher RENEWAL
Jones VocelkaUnited KingdomIoni Bowcher RENEWAL
Tony FollerCanadaElwin Sharvill NEW
Aditya KuskoBrazilStephen Shaw PROPOSAL
Adams MorascaCanadaIoni Bowcher UNQUALIFIED
Emily WhobreyJapanAnna Fali NEGOTIATION
Morrow RutaBrazilElwin Sharvill UNQUALIFIED
Aditya KuskoBrazilBernardo Dominic UNQUALIFIED
Antonio CaudyArgentinaElwin Sharvill NEGOTIATION
Leon OldroydItalyIvan Magalhaes NEW
James ButtGermanyOnyama Limba PROPOSAL
Francesco ShinkoIndiaAsiya Javayant PROPOSAL
Jefferson SchemmerItalyAnna Fali RENEWAL
Arvin AlbaresGermanyOnyama Limba NEW
Cody SaylorsJapanAsiya Javayant NEGOTIATION
Johnson SergiRussiaAsiya Javayant NEGOTIATION
Kaitlin OstroskyItalyOnyama Limba RENEWAL
Rodrigues CampainIndiaAsiya Javayant NEGOTIATION
Stacey MacleadBrazilAsiya Javayant NEW
Darci PoquetteCanadaIoni Bowcher QUALIFIED
Kaitlin OstroskyCanadaAnna Fali QUALIFIED
Aruna FigeroaGermanyIvan Magalhaes QUALIFIED
Jeanfrancois VenereCanadaBernardo Dominic UNQUALIFIED
Jones VocelkaGermanyAmy Elsner QUALIFIED
Aruna FigeroaBrazilIoni Bowcher UNQUALIFIED
Alejandro PerinAustraliaXuxue Feng NEGOTIATION
Murillo MaletSpainBernardo Dominic QUALIFIED
Jones VocelkaJapanAmy Elsner NEGOTIATION
Clifford RimUnited KingdomAnna Fali RENEWAL
Antonio CaudyFranceAmy Elsner NEGOTIATION
Aika InouyeFranceStephen Shaw UNQUALIFIED
Johnson SergiArgentinaAsiya Javayant NEGOTIATION
Cody SaylorsJapanAsiya Javayant NEGOTIATION
Mujtaba NickaGermanyAsiya Javayant QUALIFIED
Jefferson SchemmerUnited KingdomIvan Magalhaes NEGOTIATION
Julie StensethJapanXuxue Feng RENEWAL
Antonio CaudyGermanyAmy Elsner PROPOSAL
Ashley DoeIndiaStephen Shaw QUALIFIED
Kaitlin OstroskyJapanAmy Elsner QUALIFIED
Antonio CaudyJapanIoni Bowcher QUALIFIED
Tony FollerRussiaIvan Magalhaes NEGOTIATION
Arvin AlbaresItalyAmy Elsner PROPOSAL
Stacey MacleadAustraliaOnyama Limba RENEWAL
Jeanfrancois VenereUnited KingdomOnyama Limba PROPOSAL
Francesco ShinkoCanadaBernardo Dominic NEGOTIATION
Cody SaylorsAustraliaAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Octavia MaletAustraliaXuxue Feng NEW
Munro FerenczSpainOnyama Limba NEGOTIATION
Jones VocelkaRussiaAsiya Javayant PROPOSAL
Nicolas IturbideAustraliaIvan Magalhaes QUALIFIED
Jennifer AmigonAustraliaIoni Bowcher UNQUALIFIED
Chavez BriddickJapanAsiya Javayant QUALIFIED
Jennifer AmigonCanadaAmy Elsner NEW
Wickens NestleUnited KingdomAmy Elsner PROPOSAL
Chavez BriddickBrazilStephen Shaw RENEWAL
Mujtaba NickaItalyOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Clifford RimCanada2026-05-10Buckley Miller Wright NEGOTIATION76Anna Fali
1001Alejandro PerinJapan2026-04-20Chemel, James L Cpa UNQUALIFIED54Onyama Limba
1002Mujtaba NickaIndia2026-05-12Feiner Bros QUALIFIED6Xuxue Feng
1003Leon OldroydFrance2026-05-12Commercial Press PROPOSAL10Bernardo Dominic
1004Leon OldroydJapan2026-05-06King, Christopher A Esq RENEWAL0Amy Elsner
1005Leon OldroydJapan2026-04-26Chanay, Jeffrey A Esq QUALIFIED77Asiya Javayant
1006Jennifer AmigonItaly2026-04-16Dorl, James J Esq UNQUALIFIED35Elwin Sharvill
1007David DarakjyUnited Kingdom2026-05-03Dorl, James J Esq NEW13Ivan Magalhaes
1008Jones VocelkaBrazil2026-04-30Rangoni Of Florence NEGOTIATION66Ivan Magalhaes
1009James ButtSpain2026-05-11Benton, John B Jr UNQUALIFIED28Elwin Sharvill
1010Johnson SergiAustralia2026-04-26Feltz Printing Service UNQUALIFIED65Bernardo Dominic
1011Leja CaldareraArgentina2026-04-21Chapman, Ross E Esq NEGOTIATION75Ioni Bowcher
1012Kadeem FlosiArgentina2026-05-12Rangoni Of Florence RENEWAL93Onyama Limba
1013Costa DilliardItaly2026-05-12Rangoni Of Florence NEW15Stephen Shaw
1014Silvio SlusarskiFrance2026-05-05Chanay, Jeffrey A Esq UNQUALIFIED19Stephen Shaw
1015Aditya KuskoFrance2026-05-07Chanay, Jeffrey A Esq NEW44Xuxue Feng
1016Kadeem FlosiItaly2026-04-19Feltz Printing Service NEW95Xuxue Feng
1017Kaitlin OstroskyBrazil2026-05-03Rangoni Of Florence RENEWAL93Bernardo Dominic
1018Ivar PaprockiUnited Kingdom2026-04-29Rousseaux, Michael Esq UNQUALIFIED89Bernardo Dominic
1019Adams MorascaItaly2026-04-21Buckley Miller Wright NEGOTIATION15Ioni Bowcher
1020Cody SaylorsBrazil2026-04-24Chemel, James L Cpa RENEWAL83Asiya Javayant
1021Kadeem FlosiCanada2026-04-29Chemel, James L Cpa QUALIFIED40Anna Fali
1022Murillo MaletAustralia2026-04-21Truhlar And Truhlar Attys UNQUALIFIED9Stephen Shaw
1023Francesco ShinkoJapan2026-04-24Chapman, Ross E Esq QUALIFIED4Elwin Sharvill
1024Aditya KuskoFrance2026-05-08Dorl, James J Esq RENEWAL52Bernardo Dominic
1025Faith GillianJapan2026-05-05Commercial Press RENEWAL89Onyama Limba
1026Aruna FigeroaRussia2026-05-13Rangoni Of Florence PROPOSAL10Asiya Javayant
1027Ashley DoeArgentina2026-04-18Chemel, James L Cpa NEW95Bernardo Dominic
1028Tony FollerIndia2026-05-10Feltz Printing Service UNQUALIFIED98Xuxue Feng
1029Johnson SergiArgentina2026-04-24Commercial Press NEW24Amy Elsner
1030Aruna FigeroaJapan2026-04-26Rousseaux, Michael Esq RENEWAL90Asiya Javayant
1031Mayumi KolmetzSpain2026-04-25Morlong Associates QUALIFIED87Amy Elsner
1032Jefferson SchemmerGermany2026-05-13Morlong Associates PROPOSAL93Xuxue Feng
1033Stacey MacleadJapan2026-04-27Benton, John B Jr RENEWAL47Stephen Shaw
1034Kaitlin OstroskyRussia2026-05-11Printing Dimensions RENEWAL99Bernardo Dominic
1035Claire TollnerFrance2026-05-05Feiner Bros NEW10Anna Fali
1036James ButtIndia2026-05-13Chapman, Ross E Esq RENEWAL24Anna Fali
1037Aditya KuskoFrance2026-05-08Rangoni Of Florence NEGOTIATION4Amy Elsner
1038Chavez BriddickRussia2026-04-22Rousseaux, Michael Esq NEW3Asiya Javayant
1039Leon OldroydArgentina2026-05-13Chapman, Ross E Esq NEGOTIATION98Ivan Magalhaes
1040Antonio CaudyIndia2026-04-23Feiner Bros QUALIFIED19Ioni Bowcher
1041Costa DilliardGermany2026-05-11Morlong Associates RENEWAL66Ioni Bowcher
1042Adams MorascaJapan2026-04-27Rousseaux, Michael Esq QUALIFIED36Onyama Limba
1043Maria MarrierSpain2026-04-19Commercial Press UNQUALIFIED19Stephen Shaw
1044Juan WieserIndia2026-04-27Rousseaux, Michael Esq PROPOSAL51Anna Fali
1045Deepesh ChuiBrazil2026-05-12Buckley Miller Wright RENEWAL72Bernardo Dominic
1046Francesco ShinkoGermany2026-05-05King, Christopher A Esq QUALIFIED6Amy Elsner
1047Ashley DoeUnited Kingdom2026-04-18Rangoni Of Florence NEW16Asiya Javayant
1048Nicolas IturbideCanada2026-05-05Buckley Miller Wright QUALIFIED36Xuxue Feng
1049Izzy GarufiBrazil2026-04-20Feiner Bros PROPOSAL83Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresRussiaIoni Bowcher RENEWAL
Francesco ShinkoIndiaBernardo Dominic PROPOSAL
Clifford RimIndiaIvan Magalhaes PROPOSAL
Smith GlickRussiaAnna Fali QUALIFIED
Misaki RoysterSpainStephen Shaw QUALIFIED
Deepesh ChuiArgentinaIoni Bowcher PROPOSAL
Misaki RoysterSpainAnna Fali RENEWAL
Wickens NestleRussiaXuxue Feng RENEWAL
David DarakjyAustraliaStephen Shaw PROPOSAL
Mayumi KolmetzUnited KingdomAmy Elsner RENEWAL
Greenwood BologniaItalyOnyama Limba NEGOTIATION
Cody SaylorsGermanyBernardo Dominic QUALIFIED
Leja CaldareraUnited KingdomXuxue Feng RENEWAL
Mayumi KolmetzUnited KingdomAnna Fali QUALIFIED
Jones VocelkaItalyStephen Shaw QUALIFIED
Isabel BowleyArgentinaAnna Fali NEW
Jeanfrancois VenereUnited KingdomBernardo Dominic NEGOTIATION
Nicolas IturbideFranceAnna Fali RENEWAL
Julie StensethFranceIvan Magalhaes NEGOTIATION
Munro FerenczBrazilOnyama Limba PROPOSAL
Jeanfrancois VenereItalyAmy Elsner NEGOTIATION
Kaitlin OstroskyRussiaXuxue Feng RENEWAL
Isabel BowleySpainAmy Elsner RENEWAL
Jones VocelkaGermanyAsiya Javayant PROPOSAL
Kadeem FlosiItalyXuxue Feng PROPOSAL
Clifford RimSpainStephen Shaw UNQUALIFIED
Stacey MacleadBrazilIvan Magalhaes PROPOSAL
Smith GlickAustraliaIoni Bowcher NEGOTIATION
Nicolas IturbideUnited KingdomElwin Sharvill QUALIFIED
Emily WhobreyIndiaXuxue Feng NEW
Aditya KuskoItalyOnyama Limba NEGOTIATION
Misaki RoysterSpainIoni Bowcher QUALIFIED
Chavez BriddickSpainElwin Sharvill NEW
Antonio CaudyGermanyAnna Fali NEGOTIATION
Adams MorascaBrazilBernardo Dominic QUALIFIED
Morrow RutaCanadaIoni Bowcher PROPOSAL
Leon OldroydItalyAmy Elsner QUALIFIED
Emily WhobreyRussiaBernardo Dominic QUALIFIED
Aditya KuskoArgentinaAsiya Javayant QUALIFIED
Maisha RulapaughCanadaXuxue Feng PROPOSAL
Faith GillianArgentinaIvan Magalhaes RENEWAL
Chavez BriddickItalyIoni Bowcher RENEWAL
Juan WieserIndiaAnna Fali RENEWAL
Johnson SergiRussiaAnna Fali NEW
Mayumi KolmetzUnited KingdomBernardo Dominic NEW
Aditya KuskoFranceOnyama Limba UNQUALIFIED
Julie StensethRussiaAsiya Javayant RENEWAL
Mujtaba NickaJapanElwin Sharvill NEGOTIATION
Faith GillianGermanyAsiya Javayant NEGOTIATION
Octavia MaletArgentinaIoni Bowcher NEGOTIATION
Frozen Columns
Name
Aika Inouye
Misaki Royster
Julie Stenseth
Rodrigues Campain
David Darakjy
Johnson Sergi
Greenwood Bolognia
Jennifer Amigon
Leon Oldroyd
Ricardo Gaucho
Morrow Ruta
Maisha Rulapaugh
Isabel Bowley
Jones Vocelka
Sinclair Waycott
Jones Vocelka
Stacey Maclead
Jones Vocelka
Arvin Albares
Jones Vocelka
Sinclair Waycott
Stacey Maclead
Ivar Paprocki
Octavia Malet
Clifford Rim
Claire Tollner
Alejandro Perin
Ricardo Gaucho
Kadeem Flosi
Salvatore Stockham
Leja Caldarera
Clifford Rim
Faith Gillian
Ricardo Gaucho
Silvio Slusarski
Cody Saylors
Morrow Ruta
Aditya Kusko
Ivar Paprocki
Emily Whobrey
Maria Marrier
Ivar Paprocki
Jones Vocelka
Juan Wieser
Johnson Sergi
Francesco Shinko
Jennifer Amigon
Aika Inouye
Jones Vocelka
Maria Marrier
IdCountryDate
1000Japan2026-04-26
1001Russia2026-05-10
1002India2026-04-15
1003Russia2026-04-30
1004Germany2026-05-11
1005Japan2026-04-17
1006Italy2026-04-22
1007India2026-04-18
1008Japan2026-05-07
1009Australia2026-04-16
1010Argentina2026-05-13
1011Spain2026-04-30
1012Brazil2026-05-11
1013Argentina2026-05-11
1014Russia2026-04-25
1015Canada2026-05-06
1016Brazil2026-05-04
1017Canada2026-05-04
1018Spain2026-05-04
1019Germany2026-04-16
1020Canada2026-04-30
1021India2026-05-02
1022Germany2026-04-22
1023Brazil2026-04-28
1024France2026-05-10
1025Canada2026-05-10
1026Brazil2026-04-20
1027Italy2026-05-02
1028Russia2026-04-23
1029Germany2026-04-29
1030India2026-04-18
1031Russia2026-04-15
1032Japan2026-05-02
1033United Kingdom2026-04-19
1034France2026-04-26
1035France2026-04-30
1036France2026-04-23
1037Russia2026-04-17
1038Italy2026-04-17
1039Japan2026-05-06
1040Italy2026-05-04
1041France2026-05-09
1042Canada2026-04-18
1043Germany2026-05-13
1044Japan2026-05-07
1045Japan2026-04-16
1046Brazil2026-04-14
1047Brazil2026-05-13
1048Argentina2026-04-20
1049Canada2026-04-22

On-Demand Data

NameIdCountryDate
Munro Ferencz1000Brazil2026-04-19
Johnson Sergi1001Brazil2026-05-01
Costa Dilliard1002Japan2026-04-26
Smith Glick1003Spain2026-05-02
Ivar Paprocki1004Italy2026-04-26
Mayumi Kolmetz1005Canada2026-05-02
Misaki Royster1006Argentina2026-04-19
Ashley Doe1007United Kingdom2026-04-28
Rodrigues Campain1008Spain2026-05-08
Chavez Briddick1009Spain2026-05-02
Kadeem Flosi1010India2026-04-27
Adams Morasca1011United Kingdom2026-04-19
Chavez Briddick1012Argentina2026-04-19
Rodrigues Campain1013India2026-04-26
Morrow Ruta1014Spain2026-04-22
Kaitlin Ostrosky1015Spain2026-05-03
Greenwood Bolognia1016United Kingdom2026-04-23
Deepesh Chui1017Germany2026-04-16
Darci Poquette1018Spain2026-04-14
Ricardo Gaucho1019Japan2026-04-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiSpainIoni Bowcher PROPOSAL
Greenwood BologniaIndiaBernardo Dominic UNQUALIFIED
Cody SaylorsUnited KingdomElwin Sharvill QUALIFIED
David DarakjyUnited KingdomOnyama Limba RENEWAL
Cody SaylorsCanadaBernardo Dominic PROPOSAL
Rodrigues CampainArgentinaBernardo Dominic UNQUALIFIED
Ricardo GauchoFranceOnyama Limba QUALIFIED
Emily WhobreyArgentinaBernardo Dominic UNQUALIFIED
Jennifer AmigonAustraliaAmy Elsner QUALIFIED
Jefferson SchemmerJapanStephen Shaw UNQUALIFIED
Kaitlin OstroskyRussiaIoni Bowcher PROPOSAL
Francesco ShinkoJapanAsiya Javayant NEGOTIATION
Deepesh ChuiFranceOnyama Limba UNQUALIFIED
Wickens NestleAustraliaOnyama Limba UNQUALIFIED
Aruna FigeroaBrazilBernardo Dominic UNQUALIFIED
Izzy GarufiBrazilIvan Magalhaes QUALIFIED
Julie StensethFranceIoni Bowcher QUALIFIED
Johnson SergiFranceStephen Shaw PROPOSAL
Leon OldroydCanadaIoni Bowcher NEGOTIATION
Rodrigues CampainFranceElwin Sharvill PROPOSAL
Kaitlin OstroskyIndiaXuxue Feng QUALIFIED
Francesco ShinkoCanadaXuxue Feng NEW
Silvio SlusarskiItalyIvan Magalhaes QUALIFIED
Munro FerenczArgentinaElwin Sharvill PROPOSAL
Stacey MacleadBrazilOnyama Limba RENEWAL
Aditya KuskoGermanyOnyama Limba QUALIFIED
Jefferson SchemmerFranceIoni Bowcher NEGOTIATION
Johnson SergiSpainIoni Bowcher PROPOSAL
David DarakjyIndiaAsiya Javayant QUALIFIED
Maisha RulapaughBrazilAnna Fali PROPOSAL
Izzy GarufiItalyAnna Fali RENEWAL
Aika InouyeIndiaIoni Bowcher RENEWAL
Juan WieserJapanXuxue Feng NEGOTIATION
Darci PoquetteItalyIvan Magalhaes QUALIFIED
Tony FollerArgentinaAsiya Javayant NEW
Aruna FigeroaBrazilStephen Shaw NEW
Francesco ShinkoFranceElwin Sharvill NEGOTIATION
Isabel BowleyUnited KingdomIoni Bowcher RENEWAL
Leja CaldareraIndiaStephen Shaw QUALIFIED
Clifford RimIndiaIvan Magalhaes 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>