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
Jeanfrancois VenereItalyAnna Fali NEGOTIATION
David DarakjyArgentinaAnna Fali NEGOTIATION
Chavez BriddickCanadaBernardo Dominic QUALIFIED
Maria MarrierUnited KingdomElwin Sharvill NEW
Maisha RulapaughSpainAmy Elsner RENEWAL
Jefferson SchemmerSpainXuxue Feng RENEWAL
Mayumi KolmetzSpainAmy Elsner NEGOTIATION
Rodrigues CampainSpainAnna Fali NEGOTIATION
Jennifer AmigonItalyIoni Bowcher UNQUALIFIED
Murillo MaletBrazilElwin Sharvill PROPOSAL
Jones VocelkaIndiaOnyama Limba NEW
Antonio CaudyBrazilXuxue Feng UNQUALIFIED
Munro FerenczJapanIvan Magalhaes UNQUALIFIED
Isabel BowleyCanadaAnna Fali NEW
Darci PoquetteCanadaBernardo Dominic QUALIFIED
Octavia MaletAustraliaIvan Magalhaes NEGOTIATION
Arvin AlbaresFranceAnna Fali RENEWAL
Maria MarrierSpainBernardo Dominic PROPOSAL
Antonio CaudyFranceElwin Sharvill NEW
Wickens NestleGermanyBernardo Dominic RENEWAL
David DarakjyJapanAmy Elsner PROPOSAL
David DarakjyIndiaBernardo Dominic PROPOSAL
Juan WieserJapanStephen Shaw QUALIFIED
Aruna FigeroaIndiaBernardo Dominic UNQUALIFIED
Leja CaldareraJapanStephen Shaw QUALIFIED
Mujtaba NickaIndiaIoni Bowcher NEW
Tony FollerArgentinaStephen Shaw QUALIFIED
Rodrigues CampainFranceAsiya Javayant UNQUALIFIED
Claire TollnerRussiaElwin Sharvill PROPOSAL
Wickens NestleArgentinaIoni Bowcher UNQUALIFIED
Emily WhobreyBrazilElwin Sharvill NEW
Darci PoquetteCanadaIvan Magalhaes UNQUALIFIED
Mayumi KolmetzJapanIvan Magalhaes RENEWAL
Sinclair WaycottSpainIoni Bowcher UNQUALIFIED
Jones VocelkaCanadaElwin Sharvill QUALIFIED
Isabel BowleyBrazilAnna Fali UNQUALIFIED
Jefferson SchemmerItalyAnna Fali NEGOTIATION
Costa DilliardJapanIoni Bowcher RENEWAL
Maria MarrierArgentinaAsiya Javayant PROPOSAL
Clifford RimGermanyStephen Shaw PROPOSAL
Tony FollerCanadaAsiya Javayant RENEWAL
Sinclair WaycottGermanyStephen Shaw PROPOSAL
Tony FollerGermanyBernardo Dominic UNQUALIFIED
Maria MarrierAustraliaStephen Shaw PROPOSAL
Mayumi KolmetzUnited KingdomAsiya Javayant UNQUALIFIED
Deepesh ChuiFranceStephen Shaw UNQUALIFIED
Leja CaldareraItalyAnna Fali PROPOSAL
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Antonio CaudyBrazilAmy Elsner NEW
Mujtaba NickaIndiaBernardo Dominic UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Faith GillianJapanBernardo Dominic RENEWAL
Mujtaba NickaItalyStephen Shaw QUALIFIED
Faith GillianCanadaStephen Shaw RENEWAL
Maria MarrierFranceOnyama Limba PROPOSAL
Salvatore StockhamAustraliaIoni Bowcher RENEWAL
Clifford RimArgentinaBernardo Dominic QUALIFIED
Clifford RimItalyOnyama Limba NEGOTIATION
Chavez BriddickGermanyElwin Sharvill NEW
Leon OldroydAustraliaOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Smith GlickIndia2026-05-21Morlong Associates PROPOSAL12Ioni Bowcher
1001Salvatore StockhamFrance2026-05-04Printing Dimensions UNQUALIFIED54Amy Elsner
1002Wickens NestleUnited Kingdom2026-05-06Chapman, Ross E Esq PROPOSAL76Anna Fali
1003Arvin AlbaresIndia2026-04-30Chanay, Jeffrey A Esq PROPOSAL42Ioni Bowcher
1004Alejandro PerinSpain2026-05-18Commercial Press RENEWAL15Ivan Magalhaes
1005Ivar PaprockiArgentina2026-05-05Benton, John B Jr PROPOSAL51Asiya Javayant
1006Faith GillianFrance2026-05-14Printing Dimensions NEGOTIATION35Onyama Limba
1007Faith GillianArgentina2026-05-09Feiner Bros UNQUALIFIED28Onyama Limba
1008Aika InouyeGermany2026-04-28Buckley Miller Wright PROPOSAL59Anna Fali
1009Ivar PaprockiBrazil2026-05-17Benton, John B Jr NEGOTIATION69Xuxue Feng
1010Jones VocelkaBrazil2026-05-02Chanay, Jeffrey A Esq NEW21Amy Elsner
1011Cody SaylorsItaly2026-05-09Benton, John B Jr NEGOTIATION70Bernardo Dominic
1012David DarakjySpain2026-05-12Benton, John B Jr NEW47Ioni Bowcher
1013Kaitlin OstroskyArgentina2026-04-28Benton, John B Jr NEW76Onyama Limba
1014Misaki RoysterItaly2026-05-13Chemel, James L Cpa NEW56Ioni Bowcher
1015Julie StensethIndia2026-05-21Chapman, Ross E Esq UNQUALIFIED1Ivan Magalhaes
1016Julie StensethArgentina2026-05-07Chapman, Ross E Esq UNQUALIFIED11Xuxue Feng
1017Ivar PaprockiJapan2026-05-01Chemel, James L Cpa UNQUALIFIED63Elwin Sharvill
1018Jennifer AmigonGermany2026-05-06Buckley Miller Wright NEGOTIATION56Bernardo Dominic
1019Darci PoquetteUnited Kingdom2026-05-21Benton, John B Jr NEGOTIATION82Amy Elsner
1020Murillo MaletRussia2026-05-06Rangoni Of Florence NEW99Onyama Limba
1021Ivar PaprockiFrance2026-05-21Buckley Miller Wright RENEWAL19Ioni Bowcher
1022Maisha RulapaughJapan2026-04-28Rangoni Of Florence PROPOSAL95Xuxue Feng
1023Aika InouyeIndia2026-04-27Printing Dimensions UNQUALIFIED98Elwin Sharvill
1024Aditya KuskoAustralia2026-05-20Benton, John B Jr QUALIFIED55Ioni Bowcher
1025Kaitlin OstroskyIndia2026-05-05Rousseaux, Michael Esq QUALIFIED20Elwin Sharvill
1026Jennifer AmigonCanada2026-04-24Commercial Press NEGOTIATION53Elwin Sharvill
1027David DarakjyRussia2026-05-08Benton, John B Jr RENEWAL38Bernardo Dominic
1028Isabel BowleyRussia2026-05-22Morlong Associates NEW24Stephen Shaw
1029Alejandro PerinRussia2026-05-14Dorl, James J Esq NEGOTIATION88Elwin Sharvill
1030Nicolas IturbideSpain2026-04-29Rousseaux, Michael Esq PROPOSAL8Onyama Limba
1031Tony FollerAustralia2026-05-20Commercial Press NEW24Ivan Magalhaes
1032Kadeem FlosiAustralia2026-04-23Dorl, James J Esq NEW10Elwin Sharvill
1033Alejandro PerinGermany2026-05-05Benton, John B Jr PROPOSAL12Ivan Magalhaes
1034Mujtaba NickaArgentina2026-05-21Morlong Associates PROPOSAL21Xuxue Feng
1035Claire TollnerFrance2026-05-10Truhlar And Truhlar Attys QUALIFIED41Asiya Javayant
1036Deepesh ChuiBrazil2026-05-03Rangoni Of Florence QUALIFIED37Ioni Bowcher
1037Jeanfrancois VenereUnited Kingdom2026-05-22Morlong Associates UNQUALIFIED17Xuxue Feng
1038Octavia MaletItaly2026-05-15Truhlar And Truhlar Attys NEW53Stephen Shaw
1039Faith GillianRussia2026-04-29Chanay, Jeffrey A Esq NEW19Asiya Javayant
1040Deepesh ChuiJapan2026-05-02Dorl, James J Esq NEW20Elwin Sharvill
1041Deepesh ChuiUnited Kingdom2026-05-03Morlong Associates PROPOSAL30Amy Elsner
1042Kadeem FlosiSpain2026-05-06Commercial Press QUALIFIED20Anna Fali
1043Morrow RutaUnited Kingdom2026-05-05Printing Dimensions UNQUALIFIED47Ioni Bowcher
1044Morrow RutaRussia2026-05-21Benton, John B Jr RENEWAL77Asiya Javayant
1045Jefferson SchemmerCanada2026-05-04Dorl, James J Esq QUALIFIED36Onyama Limba
1046Faith GillianCanada2026-05-19Truhlar And Truhlar Attys NEGOTIATION6Ioni Bowcher
1047Greenwood BologniaArgentina2026-05-20Printing Dimensions NEGOTIATION85Xuxue Feng
1048Kaitlin OstroskyAustralia2026-04-27Feltz Printing Service PROPOSAL57Asiya Javayant
1049Ricardo GauchoFrance2026-05-15Commercial Press PROPOSAL54Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyRussiaAnna Fali PROPOSAL
James ButtIndiaAnna Fali NEW
Emily WhobreyUnited KingdomAnna Fali QUALIFIED
Chavez BriddickArgentinaOnyama Limba NEGOTIATION
Julie StensethArgentinaStephen Shaw NEW
Sinclair WaycottSpainXuxue Feng PROPOSAL
Isabel BowleySpainElwin Sharvill PROPOSAL
Salvatore StockhamRussiaAmy Elsner NEW
Morrow RutaSpainXuxue Feng QUALIFIED
David DarakjyJapanAnna Fali RENEWAL
Chavez BriddickGermanyAsiya Javayant QUALIFIED
Emily WhobreyFranceBernardo Dominic PROPOSAL
Johnson SergiArgentinaIoni Bowcher NEGOTIATION
Aika InouyeIndiaBernardo Dominic NEW
David DarakjyItalyOnyama Limba NEGOTIATION
Ivar PaprockiRussiaAmy Elsner QUALIFIED
Murillo MaletArgentinaAsiya Javayant PROPOSAL
Salvatore StockhamFranceElwin Sharvill UNQUALIFIED
Jennifer AmigonArgentinaXuxue Feng UNQUALIFIED
Morrow RutaFranceElwin Sharvill NEW
Ashley DoeUnited KingdomIvan Magalhaes QUALIFIED
Alejandro PerinCanadaAnna Fali UNQUALIFIED
Darci PoquetteArgentinaIvan Magalhaes PROPOSAL
Jeanfrancois VenereArgentinaAnna Fali RENEWAL
Mujtaba NickaSpainIoni Bowcher NEW
Jones VocelkaJapanAmy Elsner NEGOTIATION
Salvatore StockhamJapanIvan Magalhaes RENEWAL
Greenwood BologniaArgentinaOnyama Limba QUALIFIED
Octavia MaletAustraliaBernardo Dominic PROPOSAL
Faith GillianGermanyOnyama Limba NEGOTIATION
Morrow RutaIndiaIvan Magalhaes NEW
Maria MarrierGermanyElwin Sharvill NEGOTIATION
Johnson SergiFranceAmy Elsner UNQUALIFIED
James ButtGermanyIvan Magalhaes QUALIFIED
Clifford RimFranceAmy Elsner NEGOTIATION
Johnson SergiJapanStephen Shaw NEW
Silvio SlusarskiGermanyAmy Elsner NEW
Adams MorascaItalyOnyama Limba QUALIFIED
Julie StensethJapanStephen Shaw UNQUALIFIED
Kadeem FlosiSpainAsiya Javayant NEGOTIATION
Jefferson SchemmerIndiaOnyama Limba NEGOTIATION
Jeanfrancois VenereGermanyAmy Elsner PROPOSAL
Aika InouyeCanadaStephen Shaw UNQUALIFIED
Nicolas IturbideAustraliaXuxue Feng UNQUALIFIED
Munro FerenczFranceAsiya Javayant NEGOTIATION
Cody SaylorsGermanyStephen Shaw NEGOTIATION
Aruna FigeroaAustraliaIoni Bowcher NEGOTIATION
Murillo MaletFranceBernardo Dominic UNQUALIFIED
Jefferson SchemmerCanadaIoni Bowcher NEGOTIATION
Octavia MaletAustraliaXuxue Feng RENEWAL
Frozen Columns
Name
Jones Vocelka
Munro Ferencz
Misaki Royster
Johnson Sergi
Munro Ferencz
Costa Dilliard
Isabel Bowley
Jeanfrancois Venere
Isabel Bowley
Alejandro Perin
Nicolas Iturbide
Murillo Malet
Jennifer Amigon
Darci Poquette
Kadeem Flosi
Maisha Rulapaugh
Murillo Malet
Chavez Briddick
Ivar Paprocki
Leon Oldroyd
Francesco Shinko
Leon Oldroyd
Aruna Figeroa
Arvin Albares
Nicolas Iturbide
Izzy Garufi
Darci Poquette
Julie Stenseth
Leja Caldarera
David Darakjy
Maisha Rulapaugh
Adams Morasca
Octavia Malet
Faith Gillian
Clifford Rim
Octavia Malet
Cody Saylors
Wickens Nestle
Nicolas Iturbide
Nicolas Iturbide
Adams Morasca
Leon Oldroyd
Cody Saylors
Chavez Briddick
Ricardo Gaucho
Adams Morasca
Deepesh Chui
Clifford Rim
Silvio Slusarski
Stacey Maclead
IdCountryDate
1000Canada2026-05-17
1001Spain2026-05-01
1002Australia2026-04-29
1003United Kingdom2026-05-10
1004France2026-04-23
1005India2026-05-02
1006Argentina2026-04-30
1007Italy2026-04-24
1008Russia2026-04-23
1009Brazil2026-04-23
1010Brazil2026-05-06
1011Germany2026-04-26
1012Russia2026-05-15
1013Australia2026-04-29
1014Argentina2026-05-18
1015United Kingdom2026-05-18
1016France2026-04-30
1017Argentina2026-05-15
1018Canada2026-04-30
1019Italy2026-04-29
1020Italy2026-04-29
1021Brazil2026-04-28
1022Japan2026-05-14
1023Japan2026-05-22
1024Italy2026-04-28
1025Canada2026-05-20
1026Brazil2026-05-12
1027Argentina2026-05-10
1028Japan2026-05-20
1029France2026-05-15
1030India2026-04-27
1031France2026-05-18
1032United Kingdom2026-05-17
1033United Kingdom2026-05-12
1034Spain2026-05-04
1035Japan2026-05-07
1036Australia2026-05-21
1037Canada2026-05-05
1038Canada2026-04-28
1039Argentina2026-05-10
1040Italy2026-05-14
1041United Kingdom2026-05-09
1042Spain2026-05-09
1043Russia2026-05-14
1044Australia2026-05-20
1045Japan2026-04-26
1046Argentina2026-04-27
1047France2026-05-11
1048Argentina2026-05-18
1049United Kingdom2026-05-02

On-Demand Data

NameIdCountryDate
Darci Poquette1000Japan2026-04-26
Juan Wieser1001Japan2026-05-22
Stacey Maclead1002Australia2026-05-16
Leja Caldarera1003Australia2026-05-10
Nicolas Iturbide1004Brazil2026-05-19
Jones Vocelka1005Russia2026-05-03
Aika Inouye1006Japan2026-05-05
Aruna Figeroa1007Italy2026-04-30
Emily Whobrey1008Brazil2026-05-14
Izzy Garufi1009Italy2026-05-19
Aruna Figeroa1010United Kingdom2026-05-19
Francesco Shinko1011Argentina2026-04-27
Leon Oldroyd1012Canada2026-04-26
Tony Foller1013United Kingdom2026-05-05
Mayumi Kolmetz1014Australia2026-04-28
Munro Ferencz1015Germany2026-05-16
Mujtaba Nicka1016Japan2026-05-06
Munro Ferencz1017India2026-05-13
Deepesh Chui1018Germany2026-05-04
Ricardo Gaucho1019Canada2026-04-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiFranceAsiya Javayant QUALIFIED
Kaitlin OstroskyBrazilIvan Magalhaes RENEWAL
Smith GlickUnited KingdomElwin Sharvill NEW
Cody SaylorsAustraliaAmy Elsner PROPOSAL
Silvio SlusarskiRussiaAmy Elsner PROPOSAL
Ashley DoeJapanOnyama Limba QUALIFIED
Jones VocelkaSpainOnyama Limba RENEWAL
Leon OldroydIndiaXuxue Feng PROPOSAL
Leon OldroydAustraliaXuxue Feng QUALIFIED
Smith GlickFranceAmy Elsner PROPOSAL
Mujtaba NickaItalyAsiya Javayant NEW
Octavia MaletItalyElwin Sharvill NEGOTIATION
Murillo MaletGermanyOnyama Limba NEW
Mayumi KolmetzGermanyAsiya Javayant NEGOTIATION
Aika InouyeItalyStephen Shaw UNQUALIFIED
Ricardo GauchoRussiaXuxue Feng NEGOTIATION
Aditya KuskoJapanAmy Elsner QUALIFIED
Maisha RulapaughGermanyAmy Elsner NEGOTIATION
Misaki RoysterRussiaAmy Elsner PROPOSAL
Jennifer AmigonAustraliaStephen Shaw QUALIFIED
Smith GlickArgentinaIoni Bowcher NEGOTIATION
Clifford RimAustraliaStephen Shaw QUALIFIED
Juan WieserSpainAmy Elsner RENEWAL
Aika InouyeArgentinaStephen Shaw QUALIFIED
Chavez BriddickAustraliaAnna Fali UNQUALIFIED
Chavez BriddickJapanOnyama Limba NEW
Costa DilliardFranceBernardo Dominic QUALIFIED
Mayumi KolmetzSpainXuxue Feng NEW
Misaki RoysterRussiaIvan Magalhaes NEGOTIATION
Maisha RulapaughAustraliaElwin Sharvill UNQUALIFIED
Munro FerenczCanadaAsiya Javayant PROPOSAL
Deepesh ChuiAustraliaAsiya Javayant QUALIFIED
Francesco ShinkoRussiaBernardo Dominic UNQUALIFIED
Johnson SergiAustraliaBernardo Dominic NEW
Jennifer AmigonItalyOnyama Limba PROPOSAL
Nicolas IturbideRussiaIvan Magalhaes RENEWAL
Isabel BowleyRussiaAmy Elsner NEW
Francesco ShinkoSpainElwin Sharvill RENEWAL
Ricardo GauchoBrazilBernardo Dominic NEW
Tony FollerGermanyOnyama 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>