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
Aika InouyeAustraliaIoni Bowcher NEGOTIATION
Juan WieserItalyAsiya Javayant NEGOTIATION
Kadeem FlosiAustraliaBernardo Dominic NEGOTIATION
Claire TollnerArgentinaIvan Magalhaes UNQUALIFIED
Octavia MaletBrazilXuxue Feng NEGOTIATION
David DarakjyUnited KingdomOnyama Limba NEW
Salvatore StockhamJapanElwin Sharvill PROPOSAL
Maisha RulapaughFranceElwin Sharvill NEGOTIATION
Deepesh ChuiCanadaOnyama Limba NEW
Tony FollerJapanAnna Fali QUALIFIED
Maisha RulapaughAustraliaAmy Elsner NEW
Misaki RoysterCanadaIoni Bowcher RENEWAL
Murillo MaletCanadaIvan Magalhaes NEW
Faith GillianBrazilElwin Sharvill QUALIFIED
Jefferson SchemmerUnited KingdomXuxue Feng PROPOSAL
David DarakjyBrazilOnyama Limba UNQUALIFIED
Smith GlickSpainIvan Magalhaes RENEWAL
Ashley DoeItalyOnyama Limba UNQUALIFIED
Tony FollerFranceOnyama Limba NEW
Isabel BowleyAustraliaStephen Shaw PROPOSAL
Octavia MaletGermanyAsiya Javayant QUALIFIED
Greenwood BologniaFranceStephen Shaw PROPOSAL
Octavia MaletBrazilElwin Sharvill NEGOTIATION
Izzy GarufiIndiaAsiya Javayant PROPOSAL
Francesco ShinkoBrazilAsiya Javayant RENEWAL
Rodrigues CampainItalyAsiya Javayant NEW
Alejandro PerinGermanyOnyama Limba PROPOSAL
Leon OldroydCanadaOnyama Limba PROPOSAL
David DarakjyCanadaIvan Magalhaes RENEWAL
Greenwood BologniaArgentinaElwin Sharvill NEGOTIATION
Deepesh ChuiRussiaAnna Fali UNQUALIFIED
Clifford RimIndiaIvan Magalhaes RENEWAL
Jones VocelkaAustraliaAnna Fali NEGOTIATION
Leja CaldareraUnited KingdomIvan Magalhaes RENEWAL
Johnson SergiUnited KingdomOnyama Limba PROPOSAL
Jefferson SchemmerSpainAsiya Javayant NEW
David DarakjyItalyOnyama Limba QUALIFIED
Munro FerenczFranceXuxue Feng NEGOTIATION
Kaitlin OstroskyJapanStephen Shaw QUALIFIED
Ricardo GauchoFranceAmy Elsner RENEWAL
Wickens NestleJapanAmy Elsner RENEWAL
Juan WieserSpainOnyama Limba RENEWAL
Jones VocelkaJapanAsiya Javayant RENEWAL
Faith GillianUnited KingdomAnna Fali PROPOSAL
Morrow RutaArgentinaElwin Sharvill QUALIFIED
Salvatore StockhamItalyBernardo Dominic NEGOTIATION
Ashley DoeItalyIvan Magalhaes NEGOTIATION
Salvatore StockhamGermanyAmy Elsner NEGOTIATION
Jennifer AmigonGermanyIoni Bowcher NEGOTIATION
Chavez BriddickJapanAnna Fali RENEWAL
Horizontal
NameCountryRepresentativeStatus
Wickens NestleUnited KingdomStephen Shaw QUALIFIED
Stacey MacleadArgentinaAnna Fali RENEWAL
Julie StensethAustraliaAsiya Javayant NEGOTIATION
Kadeem FlosiArgentinaXuxue Feng QUALIFIED
Chavez BriddickAustraliaIvan Magalhaes PROPOSAL
Morrow RutaBrazilOnyama Limba NEW
Morrow RutaBrazilXuxue Feng NEGOTIATION
Leja CaldareraCanadaElwin Sharvill PROPOSAL
Faith GillianFranceAsiya Javayant UNQUALIFIED
Johnson SergiUnited KingdomElwin Sharvill UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickJapan2026-05-09Dorl, James J Esq NEW42Anna Fali
1001Darci PoquetteBrazil2026-04-24Benton, John B Jr RENEWAL50Anna Fali
1002Mujtaba NickaIndia2026-04-15Printing Dimensions QUALIFIED30Ivan Magalhaes
1003Emily WhobreyItaly2026-04-30Feiner Bros UNQUALIFIED39Stephen Shaw
1004Cody SaylorsRussia2026-04-30Buckley Miller Wright RENEWAL12Asiya Javayant
1005Adams MorascaFrance2026-05-08King, Christopher A Esq PROPOSAL55Asiya Javayant
1006Sinclair WaycottSpain2026-05-11Dorl, James J Esq PROPOSAL14Ioni Bowcher
1007Smith GlickItaly2026-04-14King, Christopher A Esq QUALIFIED55Xuxue Feng
1008Aika InouyeAustralia2026-05-05Printing Dimensions RENEWAL1Stephen Shaw
1009Isabel BowleySpain2026-05-05Benton, John B Jr RENEWAL65Amy Elsner
1010Ivar PaprockiBrazil2026-05-10Rangoni Of Florence NEGOTIATION11Anna Fali
1011Arvin AlbaresItaly2026-04-19Truhlar And Truhlar Attys UNQUALIFIED22Bernardo Dominic
1012Smith GlickItaly2026-04-20Benton, John B Jr UNQUALIFIED52Stephen Shaw
1013Sinclair WaycottJapan2026-05-02Printing Dimensions RENEWAL28Asiya Javayant
1014Octavia MaletJapan2026-05-08Truhlar And Truhlar Attys QUALIFIED38Ivan Magalhaes
1015Silvio SlusarskiItaly2026-04-15Truhlar And Truhlar Attys NEGOTIATION93Bernardo Dominic
1016Smith GlickArgentina2026-04-15Chemel, James L Cpa PROPOSAL53Ioni Bowcher
1017Leja CaldareraIndia2026-05-10Dorl, James J Esq RENEWAL90Xuxue Feng
1018Chavez BriddickIndia2026-05-01Morlong Associates NEGOTIATION33Anna Fali
1019Sinclair WaycottCanada2026-04-28Printing Dimensions NEGOTIATION51Xuxue Feng
1020Misaki RoysterAustralia2026-04-17Dorl, James J Esq PROPOSAL13Ioni Bowcher
1021Clifford RimBrazil2026-05-01Feiner Bros PROPOSAL17Onyama Limba
1022Mujtaba NickaArgentina2026-05-10Rangoni Of Florence QUALIFIED67Amy Elsner
1023Leja CaldareraSpain2026-04-20Printing Dimensions RENEWAL7Anna Fali
1024Mujtaba NickaFrance2026-04-18Truhlar And Truhlar Attys PROPOSAL1Stephen Shaw
1025Mujtaba NickaGermany2026-05-07Rangoni Of Florence PROPOSAL73Asiya Javayant
1026Aditya KuskoSpain2026-04-22Buckley Miller Wright NEW20Onyama Limba
1027Johnson SergiArgentina2026-04-27Benton, John B Jr PROPOSAL97Stephen Shaw
1028Alejandro PerinBrazil2026-05-05Chemel, James L Cpa UNQUALIFIED83Ioni Bowcher
1029Darci PoquetteFrance2026-04-24Feiner Bros QUALIFIED36Xuxue Feng
1030Leon OldroydUnited Kingdom2026-05-13Buckley Miller Wright PROPOSAL26Bernardo Dominic
1031Greenwood BologniaArgentina2026-04-14Printing Dimensions PROPOSAL10Bernardo Dominic
1032Misaki RoysterJapan2026-04-16Truhlar And Truhlar Attys NEW44Stephen Shaw
1033Jefferson SchemmerSpain2026-05-05Morlong Associates PROPOSAL43Elwin Sharvill
1034Jennifer AmigonBrazil2026-04-21Rousseaux, Michael Esq QUALIFIED25Onyama Limba
1035Stacey MacleadBrazil2026-04-21Morlong Associates UNQUALIFIED96Anna Fali
1036Izzy GarufiIndia2026-04-27Buckley Miller Wright QUALIFIED73Bernardo Dominic
1037Ricardo GauchoCanada2026-04-23Chemel, James L Cpa QUALIFIED7Onyama Limba
1038Wickens NestleRussia2026-05-02Rangoni Of Florence NEGOTIATION26Anna Fali
1039Emily WhobreyBrazil2026-05-03Chanay, Jeffrey A Esq NEGOTIATION38Amy Elsner
1040Deepesh ChuiIndia2026-05-02Chapman, Ross E Esq QUALIFIED36Elwin Sharvill
1041Leja CaldareraArgentina2026-04-20Buckley Miller Wright QUALIFIED66Bernardo Dominic
1042Costa DilliardIndia2026-04-26Chapman, Ross E Esq UNQUALIFIED7Ivan Magalhaes
1043Ivar PaprockiIndia2026-04-30Rangoni Of Florence NEW64Bernardo Dominic
1044Kaitlin OstroskyIndia2026-04-23Rangoni Of Florence NEW64Bernardo Dominic
1045James ButtAustralia2026-04-16Chemel, James L Cpa RENEWAL60Bernardo Dominic
1046Nicolas IturbideCanada2026-05-03Printing Dimensions UNQUALIFIED63Stephen Shaw
1047Kaitlin OstroskyArgentina2026-04-25Dorl, James J Esq NEW40Bernardo Dominic
1048Aika InouyeItaly2026-05-04Feltz Printing Service NEW18Asiya Javayant
1049Kadeem FlosiGermany2026-05-09Commercial Press UNQUALIFIED71Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
David DarakjyUnited KingdomBernardo Dominic QUALIFIED
Clifford RimCanadaOnyama Limba QUALIFIED
Jennifer AmigonFranceStephen Shaw NEW
Claire TollnerBrazilIoni Bowcher QUALIFIED
Leja CaldareraIndiaIoni Bowcher PROPOSAL
Jefferson SchemmerCanadaIoni Bowcher PROPOSAL
Isabel BowleyGermanyStephen Shaw UNQUALIFIED
Deepesh ChuiSpainElwin Sharvill PROPOSAL
Kaitlin OstroskyIndiaAnna Fali PROPOSAL
Nicolas IturbideAustraliaStephen Shaw QUALIFIED
Ricardo GauchoFranceAmy Elsner UNQUALIFIED
Octavia MaletFranceStephen Shaw UNQUALIFIED
Johnson SergiGermanyAnna Fali NEGOTIATION
David DarakjyAustraliaElwin Sharvill PROPOSAL
Emily WhobreyGermanyBernardo Dominic QUALIFIED
Aruna FigeroaItalyAsiya Javayant PROPOSAL
Munro FerenczUnited KingdomAmy Elsner NEGOTIATION
Antonio CaudyCanadaXuxue Feng PROPOSAL
Deepesh ChuiFranceIoni Bowcher NEW
Emily WhobreyRussiaBernardo Dominic QUALIFIED
Aruna FigeroaJapanAmy Elsner UNQUALIFIED
Chavez BriddickCanadaXuxue Feng QUALIFIED
Adams MorascaJapanAsiya Javayant NEW
Adams MorascaIndiaAmy Elsner NEGOTIATION
Leon OldroydSpainIvan Magalhaes QUALIFIED
Sinclair WaycottFranceStephen Shaw UNQUALIFIED
Claire TollnerJapanBernardo Dominic RENEWAL
Chavez BriddickIndiaBernardo Dominic UNQUALIFIED
Sinclair WaycottItalyAmy Elsner QUALIFIED
Leon OldroydGermanyAmy Elsner PROPOSAL
Rodrigues CampainItalyIvan Magalhaes PROPOSAL
Isabel BowleyFranceXuxue Feng PROPOSAL
Tony FollerBrazilXuxue Feng NEGOTIATION
Aditya KuskoGermanyAmy Elsner NEW
Kaitlin OstroskySpainIvan Magalhaes PROPOSAL
Juan WieserSpainOnyama Limba RENEWAL
Claire TollnerItalyXuxue Feng UNQUALIFIED
Clifford RimAustraliaAnna Fali RENEWAL
Chavez BriddickAustraliaAmy Elsner NEGOTIATION
Maria MarrierFranceAnna Fali NEW
Deepesh ChuiAustraliaIoni Bowcher RENEWAL
Aika InouyeItalyStephen Shaw NEW
Smith GlickArgentinaElwin Sharvill QUALIFIED
Tony FollerRussiaAmy Elsner NEW
Izzy GarufiAustraliaAmy Elsner NEGOTIATION
Smith GlickIndiaElwin Sharvill UNQUALIFIED
Julie StensethUnited KingdomAnna Fali PROPOSAL
Aruna FigeroaAustraliaAmy Elsner PROPOSAL
Mayumi KolmetzItalyStephen Shaw NEW
Maria MarrierUnited KingdomAmy Elsner PROPOSAL
Frozen Columns
Name
Misaki Royster
Silvio Slusarski
Munro Ferencz
Nicolas Iturbide
Maisha Rulapaugh
Aruna Figeroa
Jeanfrancois Venere
Faith Gillian
Misaki Royster
Silvio Slusarski
Juan Wieser
Rodrigues Campain
Isabel Bowley
Darci Poquette
Wickens Nestle
Jennifer Amigon
Nicolas Iturbide
Ivar Paprocki
Maisha Rulapaugh
James Butt
Emily Whobrey
Leon Oldroyd
Murillo Malet
Misaki Royster
Cody Saylors
Deepesh Chui
Adams Morasca
Octavia Malet
Kaitlin Ostrosky
Smith Glick
Misaki Royster
Francesco Shinko
Wickens Nestle
Isabel Bowley
Kadeem Flosi
Mayumi Kolmetz
Jones Vocelka
Emily Whobrey
Adams Morasca
Wickens Nestle
Juan Wieser
Tony Foller
Johnson Sergi
Emily Whobrey
Salvatore Stockham
Jefferson Schemmer
Kaitlin Ostrosky
Ivar Paprocki
Mujtaba Nicka
Jeanfrancois Venere
IdCountryDate
1000Italy2026-05-11
1001Australia2026-05-01
1002India2026-04-16
1003Italy2026-04-25
1004United Kingdom2026-04-23
1005Brazil2026-05-03
1006Japan2026-05-13
1007Italy2026-04-29
1008Canada2026-05-08
1009United Kingdom2026-04-30
1010Japan2026-04-28
1011France2026-04-30
1012Argentina2026-05-03
1013Australia2026-04-25
1014India2026-04-22
1015Germany2026-04-19
1016France2026-04-20
1017Japan2026-04-24
1018Japan2026-05-05
1019United Kingdom2026-05-07
1020Argentina2026-04-20
1021Australia2026-05-11
1022Russia2026-04-15
1023Spain2026-04-28
1024Russia2026-05-09
1025India2026-05-11
1026Australia2026-05-05
1027Canada2026-05-01
1028Spain2026-04-21
1029Russia2026-05-04
1030Australia2026-04-16
1031Germany2026-04-17
1032Japan2026-04-20
1033Brazil2026-04-29
1034Germany2026-05-13
1035United Kingdom2026-05-06
1036Italy2026-04-18
1037Brazil2026-05-11
1038Germany2026-04-15
1039France2026-04-28
1040India2026-04-17
1041Spain2026-04-27
1042India2026-04-23
1043France2026-04-23
1044Germany2026-05-05
1045United Kingdom2026-04-25
1046France2026-05-13
1047Italy2026-05-05
1048France2026-04-26
1049Australia2026-05-02

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000Canada2026-05-12
Jennifer Amigon1001Italy2026-04-22
Jennifer Amigon1002Germany2026-05-04
Ricardo Gaucho1003Argentina2026-05-10
Tony Foller1004Canada2026-04-29
Ricardo Gaucho1005Australia2026-05-02
Darci Poquette1006India2026-05-13
Octavia Malet1007Argentina2026-04-21
Arvin Albares1008France2026-05-10
Chavez Briddick1009United Kingdom2026-05-09
Isabel Bowley1010United Kingdom2026-04-22
Misaki Royster1011India2026-04-19
Octavia Malet1012Australia2026-05-04
Emily Whobrey1013Canada2026-05-04
Aika Inouye1014Canada2026-04-23
Leja Caldarera1015Japan2026-04-25
Julie Stenseth1016Brazil2026-05-01
Jennifer Amigon1017Russia2026-05-10
Antonio Caudy1018Spain2026-04-27
Sinclair Waycott1019United Kingdom2026-04-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydCanadaAnna Fali UNQUALIFIED
Sinclair WaycottArgentinaIoni Bowcher NEW
Deepesh ChuiItalyBernardo Dominic QUALIFIED
Silvio SlusarskiCanadaAnna Fali UNQUALIFIED
Sinclair WaycottGermanyIoni Bowcher NEGOTIATION
Claire TollnerJapanElwin Sharvill UNQUALIFIED
Chavez BriddickCanadaIoni Bowcher NEGOTIATION
David DarakjyGermanyIvan Magalhaes PROPOSAL
David DarakjySpainOnyama Limba NEGOTIATION
Jennifer AmigonJapanAnna Fali PROPOSAL
Antonio CaudyFranceXuxue Feng PROPOSAL
Jennifer AmigonGermanyOnyama Limba NEW
Maisha RulapaughIndiaElwin Sharvill QUALIFIED
Claire TollnerBrazilOnyama Limba NEGOTIATION
Salvatore StockhamFranceAsiya Javayant NEW
Antonio CaudyJapanAnna Fali UNQUALIFIED
Chavez BriddickItalyAnna Fali UNQUALIFIED
Aruna FigeroaSpainStephen Shaw UNQUALIFIED
Salvatore StockhamJapanAsiya Javayant RENEWAL
Claire TollnerBrazilElwin Sharvill PROPOSAL
Rodrigues CampainAustraliaBernardo Dominic NEGOTIATION
Greenwood BologniaFranceStephen Shaw QUALIFIED
Adams MorascaRussiaOnyama Limba RENEWAL
Maisha RulapaughGermanyAnna Fali RENEWAL
Isabel BowleyGermanyIoni Bowcher UNQUALIFIED
Chavez BriddickIndiaElwin Sharvill QUALIFIED
Maria MarrierJapanXuxue Feng UNQUALIFIED
Smith GlickGermanyElwin Sharvill NEW
Maria MarrierJapanOnyama Limba QUALIFIED
Claire TollnerIndiaElwin Sharvill PROPOSAL
Morrow RutaIndiaBernardo Dominic QUALIFIED
Ashley DoeAustraliaOnyama Limba QUALIFIED
Kadeem FlosiIndiaOnyama Limba QUALIFIED
David DarakjyRussiaBernardo Dominic PROPOSAL
Izzy GarufiUnited KingdomBernardo Dominic QUALIFIED
Izzy GarufiFranceAnna Fali PROPOSAL
Rodrigues CampainIndiaAsiya Javayant PROPOSAL
Darci PoquetteRussiaAsiya Javayant NEGOTIATION
Rodrigues CampainGermanyStephen Shaw RENEWAL
Misaki RoysterArgentinaAsiya Javayant 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>