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
Aruna FigeroaRussiaIoni Bowcher UNQUALIFIED
Tony FollerJapanXuxue Feng QUALIFIED
Ricardo GauchoUnited KingdomElwin Sharvill RENEWAL
Jennifer AmigonRussiaElwin Sharvill RENEWAL
Arvin AlbaresIndiaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereJapanIvan Magalhaes NEGOTIATION
Kadeem FlosiIndiaXuxue Feng UNQUALIFIED
Leja CaldareraBrazilAsiya Javayant QUALIFIED
Aruna FigeroaJapanBernardo Dominic QUALIFIED
Leon OldroydFranceAsiya Javayant QUALIFIED
Stacey MacleadArgentinaXuxue Feng PROPOSAL
Faith GillianAustraliaAmy Elsner PROPOSAL
Nicolas IturbideAustraliaOnyama Limba RENEWAL
Costa DilliardArgentinaIoni Bowcher UNQUALIFIED
Isabel BowleyRussiaElwin Sharvill RENEWAL
Alejandro PerinItalyBernardo Dominic NEW
Silvio SlusarskiJapanStephen Shaw NEW
Ricardo GauchoCanadaIvan Magalhaes PROPOSAL
Misaki RoysterJapanStephen Shaw UNQUALIFIED
Jennifer AmigonArgentinaIvan Magalhaes PROPOSAL
Salvatore StockhamGermanyAsiya Javayant PROPOSAL
Jones VocelkaJapanElwin Sharvill PROPOSAL
Silvio SlusarskiRussiaElwin Sharvill NEGOTIATION
Murillo MaletGermanyStephen Shaw PROPOSAL
Izzy GarufiRussiaElwin Sharvill UNQUALIFIED
Antonio CaudyBrazilXuxue Feng QUALIFIED
Smith GlickItalyXuxue Feng UNQUALIFIED
Wickens NestleFranceStephen Shaw UNQUALIFIED
Silvio SlusarskiSpainStephen Shaw PROPOSAL
Silvio SlusarskiArgentinaXuxue Feng NEW
Isabel BowleyBrazilIoni Bowcher UNQUALIFIED
Salvatore StockhamBrazilAsiya Javayant PROPOSAL
Aditya KuskoJapanElwin Sharvill QUALIFIED
Julie StensethJapanXuxue Feng NEW
Francesco ShinkoSpainStephen Shaw UNQUALIFIED
Greenwood BologniaUnited KingdomXuxue Feng QUALIFIED
Isabel BowleyAustraliaOnyama Limba UNQUALIFIED
Antonio CaudyRussiaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiSpainOnyama Limba UNQUALIFIED
Aditya KuskoCanadaXuxue Feng QUALIFIED
Mujtaba NickaCanadaAnna Fali RENEWAL
Leja CaldareraAustraliaAmy Elsner UNQUALIFIED
Aruna FigeroaJapanElwin Sharvill UNQUALIFIED
Nicolas IturbideRussiaAsiya Javayant NEW
Juan WieserCanadaIvan Magalhaes NEGOTIATION
Rodrigues CampainSpainStephen Shaw NEW
Cody SaylorsGermanyXuxue Feng UNQUALIFIED
Jefferson SchemmerRussiaXuxue Feng PROPOSAL
Emily WhobreyUnited KingdomAsiya Javayant UNQUALIFIED
Izzy GarufiItalyIoni Bowcher UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Adams MorascaIndiaAmy Elsner RENEWAL
Murillo MaletSpainIoni Bowcher NEW
Adams MorascaFranceAmy Elsner RENEWAL
Maisha RulapaughSpainIvan Magalhaes QUALIFIED
Munro FerenczBrazilOnyama Limba NEGOTIATION
Costa DilliardCanadaAsiya Javayant RENEWAL
Wickens NestleRussiaElwin Sharvill UNQUALIFIED
Claire TollnerCanadaStephen Shaw PROPOSAL
Wickens NestleIndiaOnyama Limba RENEWAL
Ashley DoeItalyBernardo Dominic NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Ivar PaprockiAustralia2026-05-20Feiner Bros UNQUALIFIED13Ioni Bowcher
1001Julie StensethAustralia2026-05-17Chanay, Jeffrey A Esq PROPOSAL49Stephen Shaw
1002Juan WieserRussia2026-06-01Chapman, Ross E Esq QUALIFIED29Onyama Limba
1003Jefferson SchemmerFrance2026-06-01Dorl, James J Esq NEW70Ivan Magalhaes
1004Maisha RulapaughAustralia2026-06-03Printing Dimensions PROPOSAL0Bernardo Dominic
1005Tony FollerJapan2026-06-08Rousseaux, Michael Esq NEW39Ioni Bowcher
1006Smith GlickBrazil2026-05-18Benton, John B Jr QUALIFIED39Onyama Limba
1007Greenwood BologniaSpain2026-05-21Morlong Associates PROPOSAL77Bernardo Dominic
1008Smith GlickUnited Kingdom2026-06-11Dorl, James J Esq UNQUALIFIED25Anna Fali
1009James ButtGermany2026-06-10Truhlar And Truhlar Attys PROPOSAL54Anna Fali
1010Octavia MaletGermany2026-05-31Feiner Bros PROPOSAL16Stephen Shaw
1011Emily WhobreyUnited Kingdom2026-05-25Rangoni Of Florence UNQUALIFIED45Anna Fali
1012Deepesh ChuiAustralia2026-05-17Dorl, James J Esq RENEWAL27Ivan Magalhaes
1013Francesco ShinkoGermany2026-05-26Morlong Associates RENEWAL42Ioni Bowcher
1014Arvin AlbaresGermany2026-06-05Rousseaux, Michael Esq NEW99Amy Elsner
1015Aika InouyeUnited Kingdom2026-05-21Buckley Miller Wright NEGOTIATION78Onyama Limba
1016Clifford RimBrazil2026-05-31Commercial Press PROPOSAL11Onyama Limba
1017Adams MorascaIndia2026-05-27Feltz Printing Service RENEWAL79Amy Elsner
1018Emily WhobreyItaly2026-05-29Rousseaux, Michael Esq NEGOTIATION44Stephen Shaw
1019Rodrigues CampainIndia2026-05-17Feltz Printing Service UNQUALIFIED78Ioni Bowcher
1020Antonio CaudyJapan2026-06-06Dorl, James J Esq PROPOSAL79Onyama Limba
1021Clifford RimUnited Kingdom2026-06-05Rousseaux, Michael Esq NEGOTIATION94Amy Elsner
1022Mayumi KolmetzUnited Kingdom2026-05-19Printing Dimensions RENEWAL65Amy Elsner
1023James ButtIndia2026-05-24Chemel, James L Cpa NEW39Amy Elsner
1024Jefferson SchemmerFrance2026-06-05Morlong Associates NEGOTIATION46Onyama Limba
1025Jones VocelkaAustralia2026-05-23Benton, John B Jr RENEWAL10Anna Fali
1026Morrow RutaRussia2026-06-04Morlong Associates NEW11Asiya Javayant
1027Jennifer AmigonGermany2026-05-13Truhlar And Truhlar Attys RENEWAL80Xuxue Feng
1028Deepesh ChuiItaly2026-06-11Chemel, James L Cpa NEW46Stephen Shaw
1029Jeanfrancois VenereItaly2026-05-16Chemel, James L Cpa RENEWAL86Ioni Bowcher
1030Salvatore StockhamRussia2026-05-25Feiner Bros NEW71Ivan Magalhaes
1031Claire TollnerJapan2026-06-07Buckley Miller Wright NEW27Onyama Limba
1032Murillo MaletArgentina2026-05-19Truhlar And Truhlar Attys RENEWAL14Onyama Limba
1033Salvatore StockhamGermany2026-06-01Feiner Bros RENEWAL77Asiya Javayant
1034Kaitlin OstroskyIndia2026-05-28Chanay, Jeffrey A Esq UNQUALIFIED80Elwin Sharvill
1035Mujtaba NickaJapan2026-05-18Chemel, James L Cpa UNQUALIFIED71Bernardo Dominic
1036Juan WieserUnited Kingdom2026-05-31Truhlar And Truhlar Attys PROPOSAL51Anna Fali
1037Alejandro PerinIndia2026-05-28Rangoni Of Florence UNQUALIFIED85Stephen Shaw
1038Izzy GarufiArgentina2026-05-28Chapman, Ross E Esq UNQUALIFIED1Asiya Javayant
1039Isabel BowleySpain2026-05-18Rangoni Of Florence NEGOTIATION86Asiya Javayant
1040Aika InouyeAustralia2026-05-15Dorl, James J Esq NEGOTIATION97Elwin Sharvill
1041Kaitlin OstroskyJapan2026-06-04Morlong Associates PROPOSAL20Anna Fali
1042Julie StensethCanada2026-05-31Feltz Printing Service NEW34Anna Fali
1043Mujtaba NickaCanada2026-06-05Feiner Bros RENEWAL91Bernardo Dominic
1044Munro FerenczItaly2026-06-08Truhlar And Truhlar Attys NEW42Amy Elsner
1045David DarakjyFrance2026-06-02Chapman, Ross E Esq RENEWAL53Bernardo Dominic
1046Antonio CaudyArgentina2026-05-25Feiner Bros QUALIFIED1Stephen Shaw
1047Cody SaylorsRussia2026-05-13Rousseaux, Michael Esq UNQUALIFIED43Onyama Limba
1048Salvatore StockhamCanada2026-05-25Buckley Miller Wright QUALIFIED55Onyama Limba
1049Leon OldroydAustralia2026-06-05King, Christopher A Esq UNQUALIFIED76Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Leon OldroydSpainBernardo Dominic NEW
Francesco ShinkoBrazilIvan Magalhaes UNQUALIFIED
Leja CaldareraUnited KingdomAmy Elsner PROPOSAL
Aditya KuskoFranceXuxue Feng QUALIFIED
Greenwood BologniaBrazilAmy Elsner NEW
Leon OldroydArgentinaAmy Elsner PROPOSAL
Chavez BriddickBrazilStephen Shaw NEGOTIATION
Isabel BowleyGermanyAmy Elsner NEGOTIATION
Mayumi KolmetzIndiaAnna Fali RENEWAL
Darci PoquetteGermanyIvan Magalhaes UNQUALIFIED
Antonio CaudyItalyOnyama Limba PROPOSAL
Darci PoquetteArgentinaStephen Shaw QUALIFIED
Munro FerenczGermanyBernardo Dominic RENEWAL
David DarakjyFranceIoni Bowcher QUALIFIED
Murillo MaletBrazilAnna Fali PROPOSAL
Julie StensethSpainXuxue Feng UNQUALIFIED
Cody SaylorsJapanIvan Magalhaes UNQUALIFIED
Jones VocelkaUnited KingdomBernardo Dominic UNQUALIFIED
Aruna FigeroaGermanyStephen Shaw RENEWAL
Claire TollnerCanadaAmy Elsner NEGOTIATION
Ivar PaprockiGermanyBernardo Dominic NEW
Arvin AlbaresArgentinaAmy Elsner QUALIFIED
Morrow RutaSpainXuxue Feng UNQUALIFIED
Misaki RoysterBrazilOnyama Limba NEW
Ivar PaprockiBrazilElwin Sharvill QUALIFIED
Ivar PaprockiArgentinaElwin Sharvill PROPOSAL
Aruna FigeroaAustraliaAnna Fali PROPOSAL
Clifford RimBrazilXuxue Feng UNQUALIFIED
James ButtFranceAnna Fali RENEWAL
David DarakjyCanadaXuxue Feng RENEWAL
Maria MarrierItalyElwin Sharvill RENEWAL
Nicolas IturbideJapanXuxue Feng UNQUALIFIED
Adams MorascaBrazilIoni Bowcher PROPOSAL
Julie StensethJapanBernardo Dominic NEGOTIATION
Smith GlickBrazilAmy Elsner RENEWAL
Tony FollerFranceElwin Sharvill NEW
Kaitlin OstroskyFranceAsiya Javayant PROPOSAL
Octavia MaletFranceAmy Elsner UNQUALIFIED
Mayumi KolmetzJapanXuxue Feng RENEWAL
Aika InouyeFranceStephen Shaw NEW
Maria MarrierAustraliaAmy Elsner NEW
Nicolas IturbideJapanXuxue Feng UNQUALIFIED
Greenwood BologniaAustraliaStephen Shaw NEW
James ButtAustraliaXuxue Feng PROPOSAL
Cody SaylorsSpainIoni Bowcher PROPOSAL
Deepesh ChuiUnited KingdomOnyama Limba RENEWAL
Ivar PaprockiGermanyXuxue Feng NEW
Alejandro PerinArgentinaElwin Sharvill QUALIFIED
Antonio CaudyJapanElwin Sharvill NEW
Antonio CaudyAustraliaXuxue Feng NEW
Frozen Columns
Name
Emily Whobrey
Faith Gillian
David Darakjy
Cody Saylors
Misaki Royster
Cody Saylors
Claire Tollner
Jennifer Amigon
Misaki Royster
Darci Poquette
Mayumi Kolmetz
Ashley Doe
Aditya Kusko
Mayumi Kolmetz
Julie Stenseth
Morrow Ruta
Arvin Albares
Tony Foller
Julie Stenseth
Leon Oldroyd
Clifford Rim
Jones Vocelka
Antonio Caudy
Jennifer Amigon
Ashley Doe
Chavez Briddick
Johnson Sergi
Costa Dilliard
Emily Whobrey
Leja Caldarera
Claire Tollner
Darci Poquette
James Butt
Arvin Albares
Jeanfrancois Venere
Antonio Caudy
Aditya Kusko
Emily Whobrey
Francesco Shinko
Ivar Paprocki
Kaitlin Ostrosky
Jeanfrancois Venere
Morrow Ruta
Johnson Sergi
Kaitlin Ostrosky
Kaitlin Ostrosky
Darci Poquette
Sinclair Waycott
Juan Wieser
Wickens Nestle
IdCountryDate
1000Russia2026-05-27
1001Italy2026-05-30
1002Russia2026-05-15
1003Germany2026-06-06
1004Russia2026-06-03
1005Japan2026-06-01
1006Canada2026-05-17
1007Germany2026-06-07
1008Japan2026-05-24
1009Italy2026-05-18
1010Australia2026-06-01
1011Germany2026-05-22
1012Brazil2026-06-02
1013Australia2026-05-17
1014India2026-05-20
1015Canada2026-06-06
1016Spain2026-06-07
1017France2026-05-16
1018Canada2026-06-10
1019Russia2026-05-31
1020Argentina2026-06-06
1021Brazil2026-05-27
1022Japan2026-05-17
1023Russia2026-05-14
1024Russia2026-06-10
1025Canada2026-06-05
1026Canada2026-05-26
1027Canada2026-05-14
1028Australia2026-05-21
1029Argentina2026-05-18
1030Germany2026-06-05
1031Japan2026-06-08
1032Argentina2026-05-26
1033Canada2026-05-14
1034Australia2026-06-04
1035Australia2026-05-23
1036United Kingdom2026-05-15
1037Argentina2026-06-11
1038Australia2026-05-24
1039Australia2026-06-11
1040India2026-06-02
1041Brazil2026-05-25
1042Australia2026-05-28
1043Japan2026-06-01
1044Australia2026-05-27
1045France2026-06-04
1046Australia2026-05-18
1047Canada2026-05-20
1048Canada2026-06-06
1049Russia2026-06-08

On-Demand Data

NameIdCountryDate
David Darakjy1000India2026-05-16
Aruna Figeroa1001India2026-06-08
Faith Gillian1002Australia2026-06-08
Emily Whobrey1003Japan2026-06-08
Stacey Maclead1004Germany2026-05-31
Aditya Kusko1005Italy2026-06-07
Silvio Slusarski1006Russia2026-05-14
Aika Inouye1007Brazil2026-05-23
Sinclair Waycott1008France2026-05-29
Maisha Rulapaugh1009Spain2026-05-14
Tony Foller1010Australia2026-05-20
Jones Vocelka1011Argentina2026-06-02
Ashley Doe1012India2026-05-19
Munro Ferencz1013Canada2026-05-18
Julie Stenseth1014France2026-06-06
Darci Poquette1015Japan2026-06-05
Isabel Bowley1016Germany2026-05-27
Darci Poquette1017Russia2026-06-08
Juan Wieser1018Canada2026-05-29
Ashley Doe1019Canada2026-06-04
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Rodrigues CampainCanadaStephen Shaw PROPOSAL
Mayumi KolmetzSpainIvan Magalhaes NEGOTIATION
Aditya KuskoGermanyAnna Fali UNQUALIFIED
Izzy GarufiBrazilAnna Fali NEW
Ivar PaprockiAustraliaIoni Bowcher PROPOSAL
Francesco ShinkoJapanAmy Elsner UNQUALIFIED
Jefferson SchemmerAustraliaStephen Shaw RENEWAL
Alejandro PerinUnited KingdomBernardo Dominic UNQUALIFIED
Alejandro PerinRussiaAnna Fali NEW
Wickens NestleUnited KingdomBernardo Dominic QUALIFIED
Morrow RutaAustraliaAnna Fali PROPOSAL
Leja CaldareraFranceAnna Fali QUALIFIED
Alejandro PerinBrazilBernardo Dominic UNQUALIFIED
Juan WieserArgentinaXuxue Feng QUALIFIED
Kaitlin OstroskyJapanIvan Magalhaes RENEWAL
Francesco ShinkoItalyOnyama Limba RENEWAL
Leja CaldareraSpainIoni Bowcher RENEWAL
Mujtaba NickaGermanyStephen Shaw PROPOSAL
Sinclair WaycottGermanyAsiya Javayant NEGOTIATION
Maria MarrierGermanyAsiya Javayant QUALIFIED
Mayumi KolmetzAustraliaXuxue Feng PROPOSAL
Aruna FigeroaCanadaIvan Magalhaes UNQUALIFIED
Ashley DoeAustraliaAnna Fali UNQUALIFIED
Maisha RulapaughUnited KingdomIoni Bowcher UNQUALIFIED
Alejandro PerinAustraliaAnna Fali UNQUALIFIED
Arvin AlbaresSpainAmy Elsner NEGOTIATION
Sinclair WaycottSpainOnyama Limba NEGOTIATION
Kaitlin OstroskyAustraliaIvan Magalhaes QUALIFIED
Wickens NestleUnited KingdomAmy Elsner RENEWAL
Ricardo GauchoGermanyOnyama Limba RENEWAL
Greenwood BologniaJapanIvan Magalhaes NEW
Ashley DoeFranceAnna Fali RENEWAL
Jones VocelkaBrazilOnyama Limba RENEWAL
Francesco ShinkoGermanyStephen Shaw NEGOTIATION
Maria MarrierFranceOnyama Limba NEGOTIATION
Darci PoquetteArgentinaOnyama Limba NEGOTIATION
Deepesh ChuiIndiaIoni Bowcher NEGOTIATION
Chavez BriddickFranceIoni Bowcher NEW
Rodrigues CampainIndiaStephen Shaw PROPOSAL
Aika InouyeArgentinaOnyama Limba UNQUALIFIED

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