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
Nicolas IturbideArgentinaIvan Magalhaes PROPOSAL
Ashley DoeFranceBernardo Dominic NEW
Faith GillianUnited KingdomOnyama Limba RENEWAL
Jefferson SchemmerFranceAnna Fali QUALIFIED
Aditya KuskoJapanXuxue Feng NEW
Claire TollnerItalyStephen Shaw NEGOTIATION
Maria MarrierItalyXuxue Feng PROPOSAL
Jefferson SchemmerCanadaStephen Shaw QUALIFIED
Leja CaldareraCanadaElwin Sharvill NEW
Adams MorascaItalyStephen Shaw NEW
Smith GlickIndiaAnna Fali PROPOSAL
Mujtaba NickaItalyAsiya Javayant NEGOTIATION
Julie StensethAustraliaStephen Shaw QUALIFIED
Chavez BriddickFranceIvan Magalhaes NEW
Jones VocelkaItalyAnna Fali UNQUALIFIED
Faith GillianUnited KingdomBernardo Dominic RENEWAL
Munro FerenczArgentinaIoni Bowcher NEGOTIATION
Julie StensethIndiaElwin Sharvill RENEWAL
Jeanfrancois VenereSpainOnyama Limba PROPOSAL
Jefferson SchemmerIndiaAmy Elsner UNQUALIFIED
Sinclair WaycottBrazilOnyama Limba RENEWAL
Aruna FigeroaArgentinaIoni Bowcher RENEWAL
Sinclair WaycottAustraliaAmy Elsner PROPOSAL
Jeanfrancois VenereItalyAsiya Javayant QUALIFIED
Octavia MaletGermanyAnna Fali NEGOTIATION
Adams MorascaIndiaBernardo Dominic QUALIFIED
Deepesh ChuiArgentinaBernardo Dominic PROPOSAL
Mujtaba NickaFranceAsiya Javayant QUALIFIED
Wickens NestleAustraliaAnna Fali UNQUALIFIED
Mujtaba NickaBrazilAnna Fali RENEWAL
Isabel BowleyCanadaIoni Bowcher NEGOTIATION
Tony FollerIndiaAsiya Javayant NEW
Antonio CaudyRussiaElwin Sharvill QUALIFIED
Adams MorascaFranceOnyama Limba UNQUALIFIED
Munro FerenczFranceOnyama Limba UNQUALIFIED
Faith GillianUnited KingdomIoni Bowcher NEGOTIATION
Claire TollnerRussiaAnna Fali NEGOTIATION
Octavia MaletSpainBernardo Dominic NEGOTIATION
Francesco ShinkoSpainElwin Sharvill QUALIFIED
Isabel BowleyItalyXuxue Feng NEW
Jennifer AmigonJapanAmy Elsner NEW
Aditya KuskoIndiaIoni Bowcher NEGOTIATION
Sinclair WaycottRussiaIoni Bowcher RENEWAL
Chavez BriddickGermanyIvan Magalhaes NEGOTIATION
Stacey MacleadUnited KingdomBernardo Dominic UNQUALIFIED
Alejandro PerinGermanyXuxue Feng NEW
Jefferson SchemmerFranceBernardo Dominic RENEWAL
Tony FollerCanadaAnna Fali QUALIFIED
Jefferson SchemmerFranceAnna Fali NEGOTIATION
Salvatore StockhamItalyIvan Magalhaes RENEWAL
Horizontal
NameCountryRepresentativeStatus
Emily WhobreyItalyIoni Bowcher NEW
Jones VocelkaRussiaBernardo Dominic NEW
Jefferson SchemmerItalyAsiya Javayant PROPOSAL
Arvin AlbaresUnited KingdomXuxue Feng QUALIFIED
Alejandro PerinIndiaXuxue Feng UNQUALIFIED
Cody SaylorsJapanElwin Sharvill QUALIFIED
Mujtaba NickaArgentinaIoni Bowcher NEW
Smith GlickUnited KingdomStephen Shaw RENEWAL
Francesco ShinkoCanadaXuxue Feng RENEWAL
Smith GlickCanadaBernardo Dominic UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Chavez BriddickIndia2026-06-03Morlong Associates UNQUALIFIED77Asiya Javayant
1001Johnson SergiSpain2026-05-30Dorl, James J Esq RENEWAL90Ivan Magalhaes
1002Ashley DoeSpain2026-06-09Printing Dimensions QUALIFIED98Xuxue Feng
1003Mayumi KolmetzFrance2026-05-26Feiner Bros NEGOTIATION16Amy Elsner
1004Arvin AlbaresFrance2026-05-23Rousseaux, Michael Esq RENEWAL82Onyama Limba
1005Antonio CaudyBrazil2026-05-27Feiner Bros PROPOSAL74Amy Elsner
1006Maria MarrierJapan2026-06-03Chanay, Jeffrey A Esq NEW54Anna Fali
1007Ashley DoeRussia2026-05-17Buckley Miller Wright PROPOSAL36Elwin Sharvill
1008Silvio SlusarskiGermany2026-05-20Printing Dimensions RENEWAL78Stephen Shaw
1009Ricardo GauchoIndia2026-05-19Feltz Printing Service PROPOSAL57Elwin Sharvill
1010Aika InouyeBrazil2026-05-20Rangoni Of Florence RENEWAL98Anna Fali
1011Clifford RimGermany2026-05-16King, Christopher A Esq QUALIFIED75Amy Elsner
1012Isabel BowleyJapan2026-05-24Rousseaux, Michael Esq NEW32Stephen Shaw
1013Salvatore StockhamFrance2026-05-23Rousseaux, Michael Esq NEGOTIATION67Stephen Shaw
1014Leja CaldareraGermany2026-05-19Rangoni Of Florence UNQUALIFIED74Xuxue Feng
1015Rodrigues CampainJapan2026-05-29King, Christopher A Esq NEGOTIATION28Onyama Limba
1016Mayumi KolmetzUnited Kingdom2026-05-23Chanay, Jeffrey A Esq NEGOTIATION76Elwin Sharvill
1017Silvio SlusarskiSpain2026-06-04Rousseaux, Michael Esq PROPOSAL93Ioni Bowcher
1018James ButtBrazil2026-05-30Rousseaux, Michael Esq QUALIFIED91Ioni Bowcher
1019Jefferson SchemmerUnited Kingdom2026-06-06Feltz Printing Service UNQUALIFIED74Stephen Shaw
1020James ButtBrazil2026-05-23Printing Dimensions QUALIFIED25Onyama Limba
1021Salvatore StockhamArgentina2026-05-26Morlong Associates QUALIFIED42Amy Elsner
1022Faith GillianRussia2026-06-02Buckley Miller Wright UNQUALIFIED63Elwin Sharvill
1023Johnson SergiGermany2026-06-12Rangoni Of Florence QUALIFIED41Ioni Bowcher
1024Munro FerenczBrazil2026-05-28Rangoni Of Florence UNQUALIFIED63Onyama Limba
1025Mayumi KolmetzSpain2026-05-15Chanay, Jeffrey A Esq RENEWAL68Amy Elsner
1026David DarakjyAustralia2026-05-28Rousseaux, Michael Esq NEGOTIATION33Bernardo Dominic
1027Jeanfrancois VenereSpain2026-05-20Truhlar And Truhlar Attys NEGOTIATION42Ioni Bowcher
1028Faith GillianFrance2026-06-04Truhlar And Truhlar Attys PROPOSAL6Bernardo Dominic
1029Mujtaba NickaBrazil2026-06-11Truhlar And Truhlar Attys QUALIFIED58Stephen Shaw
1030Kadeem FlosiGermany2026-06-09Chapman, Ross E Esq QUALIFIED8Xuxue Feng
1031Smith GlickAustralia2026-06-12Truhlar And Truhlar Attys RENEWAL64Stephen Shaw
1032Chavez BriddickArgentina2026-05-19Benton, John B Jr NEGOTIATION73Anna Fali
1033Izzy GarufiCanada2026-06-11Feiner Bros PROPOSAL92Xuxue Feng
1034Arvin AlbaresJapan2026-05-21Feiner Bros NEW34Stephen Shaw
1035Deepesh ChuiFrance2026-05-25Rangoni Of Florence UNQUALIFIED64Asiya Javayant
1036Sinclair WaycottIndia2026-06-12Buckley Miller Wright QUALIFIED6Onyama Limba
1037Johnson SergiSpain2026-05-26Chanay, Jeffrey A Esq NEW58Ivan Magalhaes
1038Aruna FigeroaSpain2026-06-10Feltz Printing Service NEW93Anna Fali
1039Alejandro PerinFrance2026-05-22Dorl, James J Esq UNQUALIFIED48Xuxue Feng
1040Morrow RutaUnited Kingdom2026-05-27Chapman, Ross E Esq UNQUALIFIED44Elwin Sharvill
1041Jennifer AmigonIndia2026-05-24King, Christopher A Esq NEW63Asiya Javayant
1042Munro FerenczCanada2026-05-24Chapman, Ross E Esq PROPOSAL4Amy Elsner
1043Nicolas IturbideAustralia2026-05-14Chapman, Ross E Esq NEW78Bernardo Dominic
1044Nicolas IturbideIndia2026-05-20Truhlar And Truhlar Attys UNQUALIFIED11Stephen Shaw
1045Francesco ShinkoJapan2026-06-04Chemel, James L Cpa NEGOTIATION61Ioni Bowcher
1046Aruna FigeroaRussia2026-05-21Dorl, James J Esq RENEWAL83Stephen Shaw
1047Munro FerenczBrazil2026-05-14Truhlar And Truhlar Attys NEW2Onyama Limba
1048David DarakjyAustralia2026-05-21Chemel, James L Cpa UNQUALIFIED41Onyama Limba
1049Smith GlickUnited Kingdom2026-06-06Chemel, James L Cpa NEGOTIATION63Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
James ButtBrazilStephen Shaw NEGOTIATION
Nicolas IturbideAustraliaXuxue Feng PROPOSAL
Jeanfrancois VenereSpainAmy Elsner NEGOTIATION
Jefferson SchemmerItalyIoni Bowcher NEGOTIATION
Ivar PaprockiJapanStephen Shaw RENEWAL
Mayumi KolmetzFranceIvan Magalhaes NEGOTIATION
Faith GillianIndiaStephen Shaw NEGOTIATION
Mujtaba NickaArgentinaAmy Elsner NEW
Mujtaba NickaRussiaOnyama Limba NEGOTIATION
Ricardo GauchoSpainIvan Magalhaes RENEWAL
Clifford RimSpainAmy Elsner PROPOSAL
Rodrigues CampainJapanStephen Shaw UNQUALIFIED
Jennifer AmigonItalyXuxue Feng RENEWAL
Aditya KuskoItalyIvan Magalhaes PROPOSAL
Jefferson SchemmerIndiaOnyama Limba RENEWAL
Ivar PaprockiAustraliaElwin Sharvill QUALIFIED
Kadeem FlosiRussiaAmy Elsner UNQUALIFIED
Ashley DoeBrazilElwin Sharvill UNQUALIFIED
Kadeem FlosiItalyBernardo Dominic QUALIFIED
Arvin AlbaresUnited KingdomOnyama Limba RENEWAL
Izzy GarufiSpainElwin Sharvill NEGOTIATION
Emily WhobreyIndiaElwin Sharvill QUALIFIED
Johnson SergiIndiaAsiya Javayant PROPOSAL
Mujtaba NickaRussiaOnyama Limba UNQUALIFIED
Isabel BowleySpainAmy Elsner RENEWAL
Octavia MaletSpainAsiya Javayant NEGOTIATION
James ButtFranceAsiya Javayant QUALIFIED
Mayumi KolmetzArgentinaAnna Fali NEW
Clifford RimArgentinaOnyama Limba NEW
Rodrigues CampainRussiaAsiya Javayant PROPOSAL
Chavez BriddickArgentinaElwin Sharvill NEGOTIATION
Cody SaylorsIndiaBernardo Dominic NEGOTIATION
Leon OldroydSpainAnna Fali PROPOSAL
Chavez BriddickFranceIoni Bowcher NEGOTIATION
Julie StensethRussiaOnyama Limba QUALIFIED
Ricardo GauchoArgentinaIoni Bowcher UNQUALIFIED
Smith GlickCanadaXuxue Feng UNQUALIFIED
Ashley DoeBrazilAnna Fali UNQUALIFIED
Francesco ShinkoCanadaAmy Elsner NEW
Jefferson SchemmerUnited KingdomAmy Elsner QUALIFIED
Ivar PaprockiIndiaAnna Fali NEGOTIATION
Aruna FigeroaItalyOnyama Limba QUALIFIED
Wickens NestleFranceOnyama Limba UNQUALIFIED
Isabel BowleyJapanBernardo Dominic NEGOTIATION
Arvin AlbaresSpainAsiya Javayant UNQUALIFIED
Faith GillianArgentinaBernardo Dominic UNQUALIFIED
Silvio SlusarskiBrazilXuxue Feng RENEWAL
Kaitlin OstroskyRussiaAmy Elsner RENEWAL
Misaki RoysterRussiaAmy Elsner NEGOTIATION
David DarakjyArgentinaXuxue Feng PROPOSAL
Frozen Columns
Name
Emily Whobrey
Jones Vocelka
Silvio Slusarski
Maria Marrier
Mujtaba Nicka
Nicolas Iturbide
Aika Inouye
Cody Saylors
Chavez Briddick
David Darakjy
Julie Stenseth
Adams Morasca
Leon Oldroyd
Deepesh Chui
Francesco Shinko
Murillo Malet
Tony Foller
Kaitlin Ostrosky
Jefferson Schemmer
Julie Stenseth
Morrow Ruta
Nicolas Iturbide
Ricardo Gaucho
Sinclair Waycott
Salvatore Stockham
Aruna Figeroa
Costa Dilliard
Alejandro Perin
Smith Glick
Kaitlin Ostrosky
Salvatore Stockham
Aditya Kusko
Isabel Bowley
Mayumi Kolmetz
Silvio Slusarski
Emily Whobrey
Stacey Maclead
Aruna Figeroa
Mujtaba Nicka
Jones Vocelka
Jones Vocelka
Claire Tollner
Emily Whobrey
Nicolas Iturbide
Munro Ferencz
Wickens Nestle
Johnson Sergi
Claire Tollner
Claire Tollner
Alejandro Perin
IdCountryDate
1000Spain2026-05-15
1001Spain2026-05-29
1002Germany2026-06-04
1003Canada2026-05-25
1004India2026-05-29
1005Australia2026-05-22
1006Australia2026-05-26
1007India2026-05-14
1008Russia2026-06-07
1009United Kingdom2026-05-27
1010Argentina2026-05-19
1011Italy2026-06-06
1012Japan2026-06-08
1013India2026-06-01
1014United Kingdom2026-05-29
1015Russia2026-06-07
1016Russia2026-05-28
1017Australia2026-05-31
1018Germany2026-05-31
1019Brazil2026-05-23
1020Germany2026-05-25
1021Canada2026-06-08
1022Germany2026-06-10
1023Spain2026-05-28
1024United Kingdom2026-06-03
1025Italy2026-06-07
1026Argentina2026-06-10
1027Spain2026-06-07
1028Argentina2026-05-22
1029France2026-06-02
1030Italy2026-05-26
1031Argentina2026-05-30
1032Australia2026-05-14
1033Canada2026-05-31
1034Spain2026-05-21
1035Australia2026-05-16
1036Italy2026-06-07
1037Argentina2026-05-14
1038Australia2026-05-19
1039Canada2026-05-15
1040Canada2026-06-08
1041Japan2026-05-16
1042India2026-05-23
1043United Kingdom2026-05-26
1044Russia2026-05-22
1045Spain2026-05-17
1046United Kingdom2026-05-23
1047India2026-05-20
1048Canada2026-05-14
1049United Kingdom2026-05-22

On-Demand Data

NameIdCountryDate
Tony Foller1000France2026-05-16
Murillo Malet1001Japan2026-05-30
Nicolas Iturbide1002Germany2026-05-20
Aruna Figeroa1003Argentina2026-06-05
Julie Stenseth1004United Kingdom2026-06-04
Leon Oldroyd1005France2026-05-22
Morrow Ruta1006Japan2026-06-01
Misaki Royster1007Spain2026-06-02
Salvatore Stockham1008Brazil2026-06-11
Costa Dilliard1009Australia2026-06-11
Izzy Garufi1010Japan2026-05-26
Ivar Paprocki1011United Kingdom2026-05-19
Maria Marrier1012United Kingdom2026-05-24
Maisha Rulapaugh1013Italy2026-05-22
Chavez Briddick1014Canada2026-05-22
Salvatore Stockham1015Brazil2026-05-22
Munro Ferencz1016Japan2026-06-07
Aika Inouye1017Australia2026-05-30
Mujtaba Nicka1018India2026-05-19
Clifford Rim1019Germany2026-05-22
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Mujtaba NickaJapanAnna Fali NEW
Salvatore StockhamUnited KingdomElwin Sharvill NEGOTIATION
Smith GlickRussiaOnyama Limba NEGOTIATION
Misaki RoysterRussiaAmy Elsner NEGOTIATION
Leja CaldareraBrazilIvan Magalhaes NEGOTIATION
Ashley DoeRussiaIvan Magalhaes RENEWAL
Salvatore StockhamSpainXuxue Feng UNQUALIFIED
Chavez BriddickGermanyIvan Magalhaes PROPOSAL
Aruna FigeroaGermanyStephen Shaw RENEWAL
Aika InouyeIndiaElwin Sharvill UNQUALIFIED
Jennifer AmigonUnited KingdomAsiya Javayant UNQUALIFIED
Silvio SlusarskiJapanIvan Magalhaes RENEWAL
Leon OldroydIndiaIoni Bowcher RENEWAL
Kadeem FlosiFranceOnyama Limba UNQUALIFIED
Jeanfrancois VenereIndiaOnyama Limba NEGOTIATION
Sinclair WaycottIndiaAnna Fali QUALIFIED
Ashley DoeRussiaXuxue Feng QUALIFIED
Greenwood BologniaArgentinaBernardo Dominic UNQUALIFIED
Ashley DoeCanadaStephen Shaw UNQUALIFIED
Sinclair WaycottGermanyXuxue Feng QUALIFIED
Faith GillianRussiaElwin Sharvill QUALIFIED
Julie StensethAustraliaAmy Elsner QUALIFIED
Claire TollnerArgentinaStephen Shaw NEGOTIATION
Aruna FigeroaCanadaIoni Bowcher RENEWAL
Misaki RoysterFranceStephen Shaw NEW
Smith GlickFranceOnyama Limba NEGOTIATION
Smith GlickArgentinaAnna Fali QUALIFIED
Adams MorascaCanadaOnyama Limba PROPOSAL
Morrow RutaCanadaStephen Shaw PROPOSAL
Ivar PaprockiArgentinaElwin Sharvill PROPOSAL
Jones VocelkaBrazilAnna Fali NEGOTIATION
Ricardo GauchoIndiaXuxue Feng RENEWAL
Chavez BriddickArgentinaAsiya Javayant NEW
Jefferson SchemmerGermanyIvan Magalhaes NEW
Francesco ShinkoRussiaStephen Shaw NEW
Faith GillianUnited KingdomAsiya Javayant PROPOSAL
Deepesh ChuiCanadaBernardo Dominic QUALIFIED
Silvio SlusarskiArgentinaOnyama Limba NEGOTIATION
Mayumi KolmetzGermanyIvan Magalhaes RENEWAL
Adams MorascaUnited KingdomIvan Magalhaes NEW

<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>