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
Clifford RimCanadaAsiya Javayant QUALIFIED
Ashley DoeBrazilElwin Sharvill QUALIFIED
Stacey MacleadIndiaAsiya Javayant NEW
Isabel BowleyArgentinaStephen Shaw UNQUALIFIED
Jones VocelkaJapanAmy Elsner UNQUALIFIED
Sinclair WaycottIndiaXuxue Feng NEGOTIATION
Jeanfrancois VenereRussiaBernardo Dominic NEGOTIATION
Faith GillianArgentinaAmy Elsner NEGOTIATION
Chavez BriddickItalyXuxue Feng NEW
Johnson SergiIndiaAmy Elsner QUALIFIED
Aruna FigeroaCanadaOnyama Limba PROPOSAL
Julie StensethItalyAmy Elsner PROPOSAL
Jennifer AmigonBrazilXuxue Feng QUALIFIED
Kadeem FlosiGermanyAnna Fali QUALIFIED
James ButtAustraliaIvan Magalhaes QUALIFIED
Izzy GarufiSpainElwin Sharvill RENEWAL
Tony FollerIndiaAmy Elsner NEGOTIATION
Faith GillianAustraliaAmy Elsner NEGOTIATION
Wickens NestleCanadaAmy Elsner NEW
Leja CaldareraJapanAsiya Javayant QUALIFIED
Deepesh ChuiSpainXuxue Feng QUALIFIED
Arvin AlbaresFranceOnyama Limba NEW
Isabel BowleyUnited KingdomStephen Shaw RENEWAL
Munro FerenczItalyStephen Shaw NEGOTIATION
Stacey MacleadBrazilBernardo Dominic NEW
Juan WieserArgentinaIvan Magalhaes UNQUALIFIED
Octavia MaletArgentinaIvan Magalhaes UNQUALIFIED
Leja CaldareraArgentinaAsiya Javayant RENEWAL
Ashley DoeArgentinaIvan Magalhaes NEGOTIATION
Emily WhobreyJapanIvan Magalhaes QUALIFIED
Claire TollnerAustraliaBernardo Dominic PROPOSAL
Costa DilliardArgentinaXuxue Feng UNQUALIFIED
Salvatore StockhamSpainOnyama Limba UNQUALIFIED
Francesco ShinkoAustraliaIvan Magalhaes NEW
Jones VocelkaArgentinaBernardo Dominic NEW
Silvio SlusarskiUnited KingdomAmy Elsner QUALIFIED
Izzy GarufiIndiaXuxue Feng NEGOTIATION
Deepesh ChuiItalyOnyama Limba QUALIFIED
Stacey MacleadGermanyBernardo Dominic UNQUALIFIED
Tony FollerSpainIvan Magalhaes QUALIFIED
Silvio SlusarskiFranceIoni Bowcher UNQUALIFIED
Murillo MaletAustraliaAsiya Javayant NEW
Jefferson SchemmerGermanyIvan Magalhaes QUALIFIED
Leja CaldareraSpainAnna Fali UNQUALIFIED
Deepesh ChuiUnited KingdomIvan Magalhaes QUALIFIED
Chavez BriddickIndiaXuxue Feng NEW
Wickens NestleIndiaBernardo Dominic PROPOSAL
Nicolas IturbideBrazilBernardo Dominic NEGOTIATION
Aruna FigeroaBrazilAnna Fali NEGOTIATION
Salvatore StockhamSpainElwin Sharvill RENEWAL
Horizontal
NameCountryRepresentativeStatus
Tony FollerSpainAsiya Javayant QUALIFIED
Leon OldroydJapanBernardo Dominic NEW
Aruna FigeroaFranceStephen Shaw NEGOTIATION
Clifford RimBrazilBernardo Dominic QUALIFIED
Isabel BowleyFranceOnyama Limba PROPOSAL
Murillo MaletGermanyIoni Bowcher QUALIFIED
Leon OldroydCanadaXuxue Feng NEGOTIATION
Mayumi KolmetzGermanyAsiya Javayant NEGOTIATION
Deepesh ChuiAustraliaAsiya Javayant NEGOTIATION
David DarakjyIndiaXuxue Feng NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maisha RulapaughBrazil2026-05-13Dorl, James J Esq NEW6Bernardo Dominic
1001Claire TollnerGermany2026-05-20Commercial Press UNQUALIFIED39Xuxue Feng
1002Aruna FigeroaArgentina2026-05-29Rousseaux, Michael Esq NEGOTIATION51Asiya Javayant
1003Isabel BowleyGermany2026-04-30Rousseaux, Michael Esq QUALIFIED17Ioni Bowcher
1004Izzy GarufiSpain2026-05-14Dorl, James J Esq QUALIFIED49Asiya Javayant
1005Aruna FigeroaBrazil2026-05-22Feiner Bros RENEWAL52Xuxue Feng
1006Antonio CaudyRussia2026-05-20Commercial Press PROPOSAL1Ivan Magalhaes
1007Cody SaylorsFrance2026-05-09Truhlar And Truhlar Attys UNQUALIFIED38Anna Fali
1008Ashley DoeGermany2026-05-19Truhlar And Truhlar Attys NEW89Anna Fali
1009Rodrigues CampainSpain2026-05-05King, Christopher A Esq PROPOSAL62Bernardo Dominic
1010Arvin AlbaresArgentina2026-05-27Feltz Printing Service UNQUALIFIED45Anna Fali
1011Arvin AlbaresFrance2026-05-19Dorl, James J Esq NEW24Bernardo Dominic
1012Aika InouyeIndia2026-05-22Feltz Printing Service NEGOTIATION97Elwin Sharvill
1013Costa DilliardRussia2026-05-23Chapman, Ross E Esq QUALIFIED43Bernardo Dominic
1014Jeanfrancois VenereAustralia2026-05-09Buckley Miller Wright QUALIFIED26Ivan Magalhaes
1015Maisha RulapaughItaly2026-05-16Benton, John B Jr NEGOTIATION17Asiya Javayant
1016Johnson SergiGermany2026-05-25Morlong Associates PROPOSAL86Stephen Shaw
1017Antonio CaudyGermany2026-05-15Truhlar And Truhlar Attys NEW15Onyama Limba
1018Jones VocelkaFrance2026-05-19Feiner Bros NEGOTIATION97Elwin Sharvill
1019Chavez BriddickCanada2026-04-30Chapman, Ross E Esq PROPOSAL31Ioni Bowcher
1020Izzy GarufiRussia2026-05-22Chapman, Ross E Esq QUALIFIED52Amy Elsner
1021Juan WieserAustralia2026-05-10Truhlar And Truhlar Attys NEW63Xuxue Feng
1022Ricardo GauchoAustralia2026-05-12Dorl, James J Esq NEW49Onyama Limba
1023Izzy GarufiRussia2026-05-17Rousseaux, Michael Esq PROPOSAL4Bernardo Dominic
1024Isabel BowleySpain2026-05-15King, Christopher A Esq NEGOTIATION68Anna Fali
1025Faith GillianBrazil2026-05-17Truhlar And Truhlar Attys RENEWAL0Stephen Shaw
1026Isabel BowleyItaly2026-05-05Chanay, Jeffrey A Esq PROPOSAL32Ivan Magalhaes
1027Silvio SlusarskiUnited Kingdom2026-05-15Dorl, James J Esq PROPOSAL55Ivan Magalhaes
1028Deepesh ChuiJapan2026-05-04Truhlar And Truhlar Attys RENEWAL34Asiya Javayant
1029Francesco ShinkoSpain2026-05-02Chapman, Ross E Esq NEGOTIATION72Asiya Javayant
1030Claire TollnerUnited Kingdom2026-05-21Dorl, James J Esq QUALIFIED23Ivan Magalhaes
1031Cody SaylorsSpain2026-05-16Rangoni Of Florence PROPOSAL77Stephen Shaw
1032Mujtaba NickaArgentina2026-05-19Chapman, Ross E Esq NEGOTIATION0Ivan Magalhaes
1033Jefferson SchemmerRussia2026-05-07Buckley Miller Wright NEGOTIATION89Ivan Magalhaes
1034Maria MarrierRussia2026-05-17Feltz Printing Service RENEWAL10Bernardo Dominic
1035Faith GillianArgentina2026-05-19Feltz Printing Service PROPOSAL90Amy Elsner
1036Nicolas IturbideIndia2026-05-22Dorl, James J Esq UNQUALIFIED26Anna Fali
1037Aika InouyeAustralia2026-05-28Rousseaux, Michael Esq RENEWAL33Asiya Javayant
1038Munro FerenczGermany2026-05-03Commercial Press QUALIFIED0Elwin Sharvill
1039Jennifer AmigonJapan2026-05-12Benton, John B Jr QUALIFIED44Stephen Shaw
1040Faith GillianCanada2026-05-11Chemel, James L Cpa RENEWAL29Ivan Magalhaes
1041Isabel BowleySpain2026-05-10King, Christopher A Esq NEW28Elwin Sharvill
1042Darci PoquetteCanada2026-05-20Rangoni Of Florence PROPOSAL13Asiya Javayant
1043Rodrigues CampainCanada2026-05-10Feiner Bros PROPOSAL40Xuxue Feng
1044Faith GillianIndia2026-05-16Morlong Associates NEW15Ivan Magalhaes
1045Johnson SergiFrance2026-05-07Benton, John B Jr QUALIFIED69Elwin Sharvill
1046Johnson SergiBrazil2026-05-01Rangoni Of Florence NEW75Stephen Shaw
1047Faith GillianAustralia2026-05-24Feltz Printing Service NEW37Bernardo Dominic
1048Kadeem FlosiUnited Kingdom2026-05-05Rangoni Of Florence UNQUALIFIED97Xuxue Feng
1049Stacey MacleadItaly2026-05-08Buckley Miller Wright QUALIFIED56Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Rodrigues CampainAustraliaIoni Bowcher PROPOSAL
Jefferson SchemmerUnited KingdomStephen Shaw UNQUALIFIED
Claire TollnerItalyAmy Elsner UNQUALIFIED
Mayumi KolmetzCanadaBernardo Dominic QUALIFIED
Salvatore StockhamJapanAsiya Javayant NEGOTIATION
Darci PoquetteCanadaAmy Elsner NEW
Octavia MaletJapanIoni Bowcher NEGOTIATION
Julie StensethBrazilElwin Sharvill PROPOSAL
Ivar PaprockiArgentinaIoni Bowcher UNQUALIFIED
Jefferson SchemmerCanadaBernardo Dominic QUALIFIED
Arvin AlbaresJapanStephen Shaw PROPOSAL
Stacey MacleadRussiaAmy Elsner QUALIFIED
Ivar PaprockiUnited KingdomIoni Bowcher PROPOSAL
Murillo MaletCanadaElwin Sharvill UNQUALIFIED
David DarakjyArgentinaIvan Magalhaes PROPOSAL
Jefferson SchemmerUnited KingdomOnyama Limba UNQUALIFIED
Isabel BowleyAustraliaBernardo Dominic NEW
Cody SaylorsBrazilIoni Bowcher RENEWAL
Antonio CaudyRussiaIvan Magalhaes NEW
Izzy GarufiArgentinaAmy Elsner NEGOTIATION
Aruna FigeroaFranceAmy Elsner RENEWAL
Francesco ShinkoCanadaBernardo Dominic RENEWAL
Cody SaylorsCanadaXuxue Feng RENEWAL
Chavez BriddickUnited KingdomStephen Shaw NEGOTIATION
Izzy GarufiFranceElwin Sharvill RENEWAL
Cody SaylorsBrazilIoni Bowcher NEW
Misaki RoysterBrazilAmy Elsner UNQUALIFIED
Clifford RimCanadaXuxue Feng RENEWAL
Tony FollerAustraliaIvan Magalhaes NEW
Jennifer AmigonFranceElwin Sharvill RENEWAL
Chavez BriddickGermanyAsiya Javayant NEW
Smith GlickCanadaAnna Fali QUALIFIED
Sinclair WaycottUnited KingdomIvan Magalhaes UNQUALIFIED
Antonio CaudyItalyElwin Sharvill RENEWAL
Jeanfrancois VenereUnited KingdomStephen Shaw PROPOSAL
Leja CaldareraItalyStephen Shaw PROPOSAL
Adams MorascaIndiaElwin Sharvill NEGOTIATION
Tony FollerGermanyElwin Sharvill NEGOTIATION
David DarakjyRussiaIoni Bowcher UNQUALIFIED
Stacey MacleadCanadaBernardo Dominic NEW
Costa DilliardFranceBernardo Dominic UNQUALIFIED
Juan WieserArgentinaOnyama Limba NEGOTIATION
Kadeem FlosiArgentinaStephen Shaw UNQUALIFIED
Faith GillianRussiaXuxue Feng UNQUALIFIED
Greenwood BologniaCanadaOnyama Limba NEGOTIATION
Stacey MacleadAustraliaIoni Bowcher QUALIFIED
Claire TollnerIndiaAsiya Javayant RENEWAL
Ivar PaprockiIndiaIvan Magalhaes NEW
Julie StensethArgentinaStephen Shaw NEGOTIATION
Juan WieserJapanElwin Sharvill UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Costa Dilliard
Aditya Kusko
Smith Glick
Izzy Garufi
Claire Tollner
Silvio Slusarski
Kadeem Flosi
Cody Saylors
Misaki Royster
Rodrigues Campain
Stacey Maclead
Julie Stenseth
Isabel Bowley
Emily Whobrey
David Darakjy
Emily Whobrey
Alejandro Perin
Greenwood Bolognia
James Butt
Antonio Caudy
Isabel Bowley
Jennifer Amigon
Jefferson Schemmer
Leon Oldroyd
Mujtaba Nicka
Francesco Shinko
Aika Inouye
Stacey Maclead
Kaitlin Ostrosky
Misaki Royster
Costa Dilliard
Darci Poquette
Clifford Rim
Leja Caldarera
Emily Whobrey
Wickens Nestle
Darci Poquette
Darci Poquette
Emily Whobrey
Francesco Shinko
Kadeem Flosi
Francesco Shinko
Murillo Malet
Francesco Shinko
Jeanfrancois Venere
Ivar Paprocki
Maria Marrier
Kaitlin Ostrosky
Morrow Ruta
IdCountryDate
1000Russia2026-05-24
1001France2026-05-05
1002Australia2026-05-09
1003Argentina2026-05-17
1004Italy2026-05-17
1005Spain2026-05-28
1006United Kingdom2026-05-28
1007Argentina2026-05-08
1008Germany2026-05-12
1009Germany2026-05-25
1010Italy2026-05-11
1011Germany2026-05-27
1012Argentina2026-05-24
1013Japan2026-04-30
1014France2026-05-25
1015Brazil2026-05-19
1016Russia2026-05-10
1017Australia2026-05-04
1018Germany2026-05-18
1019Argentina2026-05-05
1020Australia2026-05-13
1021Russia2026-05-01
1022Spain2026-05-14
1023Japan2026-05-07
1024United Kingdom2026-05-22
1025India2026-05-15
1026Russia2026-05-12
1027Canada2026-05-10
1028Australia2026-05-23
1029Italy2026-05-13
1030India2026-05-10
1031Australia2026-05-27
1032India2026-05-11
1033Germany2026-05-20
1034Australia2026-05-08
1035Russia2026-05-17
1036Argentina2026-05-12
1037Japan2026-05-09
1038Italy2026-05-15
1039Spain2026-05-12
1040United Kingdom2026-05-13
1041Russia2026-05-14
1042India2026-05-26
1043Germany2026-05-09
1044Italy2026-05-23
1045Brazil2026-05-21
1046Australia2026-05-28
1047Canada2026-05-16
1048Italy2026-05-19
1049Japan2026-04-30

On-Demand Data

NameIdCountryDate
Mujtaba Nicka1000United Kingdom2026-05-09
Julie Stenseth1001Japan2026-04-30
Aruna Figeroa1002Italy2026-05-08
Jones Vocelka1003United Kingdom2026-04-30
Deepesh Chui1004Canada2026-04-30
Ricardo Gaucho1005Brazil2026-05-06
Kaitlin Ostrosky1006Germany2026-05-25
Jefferson Schemmer1007India2026-05-18
Johnson Sergi1008India2026-05-03
Munro Ferencz1009Argentina2026-05-25
Cody Saylors1010Canada2026-05-08
Misaki Royster1011Brazil2026-05-06
Leon Oldroyd1012Brazil2026-05-19
Adams Morasca1013Brazil2026-04-30
Francesco Shinko1014Australia2026-05-15
Munro Ferencz1015Italy2026-05-28
Octavia Malet1016United Kingdom2026-05-02
Tony Foller1017Germany2026-05-03
Nicolas Iturbide1018Japan2026-05-18
Clifford Rim1019Russia2026-05-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteItalyIoni Bowcher PROPOSAL
Aditya KuskoArgentinaBernardo Dominic NEW
Johnson SergiGermanyAnna Fali NEGOTIATION
Arvin AlbaresGermanyBernardo Dominic UNQUALIFIED
Juan WieserBrazilAmy Elsner QUALIFIED
Ivar PaprockiArgentinaElwin Sharvill NEGOTIATION
Costa DilliardIndiaAnna Fali UNQUALIFIED
Antonio CaudyFranceAnna Fali NEW
Deepesh ChuiSpainAsiya Javayant NEW
Deepesh ChuiIndiaOnyama Limba PROPOSAL
Silvio SlusarskiGermanyBernardo Dominic QUALIFIED
Chavez BriddickItalyElwin Sharvill RENEWAL
Jennifer AmigonIndiaIvan Magalhaes NEGOTIATION
Jones VocelkaArgentinaElwin Sharvill RENEWAL
Octavia MaletBrazilAnna Fali QUALIFIED
Ricardo GauchoGermanyOnyama Limba QUALIFIED
Ashley DoeCanadaElwin Sharvill QUALIFIED
Munro FerenczItalyOnyama Limba QUALIFIED
Juan WieserGermanyAmy Elsner UNQUALIFIED
Sinclair WaycottUnited KingdomAsiya Javayant NEW
Morrow RutaIndiaBernardo Dominic QUALIFIED
Morrow RutaSpainAsiya Javayant RENEWAL
Kadeem FlosiCanadaOnyama Limba QUALIFIED
Clifford RimBrazilAmy Elsner NEGOTIATION
Smith GlickBrazilAnna Fali QUALIFIED
Julie StensethBrazilBernardo Dominic NEGOTIATION
Jennifer AmigonIndiaXuxue Feng RENEWAL
Isabel BowleyFranceXuxue Feng NEGOTIATION
Isabel BowleyRussiaAsiya Javayant NEW
Silvio SlusarskiIndiaStephen Shaw NEGOTIATION
Juan WieserAustraliaAsiya Javayant RENEWAL
Stacey MacleadItalyOnyama Limba RENEWAL
Morrow RutaJapanIoni Bowcher NEW
Ricardo GauchoGermanyAnna Fali UNQUALIFIED
Aika InouyeAustraliaAnna Fali PROPOSAL
Silvio SlusarskiIndiaXuxue Feng NEGOTIATION
Adams MorascaBrazilAnna Fali NEGOTIATION
Costa DilliardAustraliaElwin Sharvill NEGOTIATION
Smith GlickBrazilBernardo Dominic RENEWAL
Ivar PaprockiBrazilIvan 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>