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 FigeroaFranceIvan Magalhaes RENEWAL
Morrow RutaRussiaIvan Magalhaes PROPOSAL
Misaki RoysterAustraliaXuxue Feng NEGOTIATION
Munro FerenczItalyAmy Elsner PROPOSAL
Deepesh ChuiItalyAsiya Javayant PROPOSAL
Jefferson SchemmerItalyElwin Sharvill QUALIFIED
Maisha RulapaughAustraliaAnna Fali NEW
Ashley DoeFranceBernardo Dominic PROPOSAL
Mujtaba NickaAustraliaOnyama Limba PROPOSAL
Mayumi KolmetzJapanBernardo Dominic UNQUALIFIED
Antonio CaudyGermanyIoni Bowcher RENEWAL
Aruna FigeroaArgentinaAsiya Javayant PROPOSAL
Francesco ShinkoFranceAsiya Javayant RENEWAL
Claire TollnerJapanAnna Fali NEGOTIATION
Sinclair WaycottSpainIvan Magalhaes QUALIFIED
Octavia MaletGermanyBernardo Dominic NEGOTIATION
Adams MorascaJapanOnyama Limba PROPOSAL
Mujtaba NickaJapanElwin Sharvill QUALIFIED
Ashley DoeFranceAmy Elsner QUALIFIED
Octavia MaletJapanAnna Fali NEGOTIATION
Adams MorascaFranceOnyama Limba QUALIFIED
Tony FollerGermanyAsiya Javayant NEGOTIATION
Chavez BriddickItalyOnyama Limba RENEWAL
Tony FollerAustraliaIoni Bowcher NEGOTIATION
Arvin AlbaresBrazilStephen Shaw NEGOTIATION
Sinclair WaycottItalyIoni Bowcher RENEWAL
David DarakjyRussiaStephen Shaw PROPOSAL
Isabel BowleyBrazilIvan Magalhaes QUALIFIED
Mayumi KolmetzRussiaAmy Elsner UNQUALIFIED
Arvin AlbaresArgentinaAmy Elsner PROPOSAL
Stacey MacleadSpainIoni Bowcher QUALIFIED
Aruna FigeroaItalyIoni Bowcher RENEWAL
Jones VocelkaSpainAmy Elsner QUALIFIED
Ashley DoeJapanIvan Magalhaes UNQUALIFIED
Octavia MaletBrazilStephen Shaw PROPOSAL
Arvin AlbaresSpainIvan Magalhaes RENEWAL
Jeanfrancois VenereJapanAnna Fali PROPOSAL
Clifford RimArgentinaStephen Shaw UNQUALIFIED
Ivar PaprockiAustraliaElwin Sharvill UNQUALIFIED
David DarakjyRussiaElwin Sharvill QUALIFIED
Adams MorascaGermanyXuxue Feng RENEWAL
James ButtUnited KingdomAnna Fali UNQUALIFIED
Arvin AlbaresUnited KingdomIoni Bowcher QUALIFIED
Aruna FigeroaFranceIoni Bowcher NEW
Mujtaba NickaArgentinaStephen Shaw NEW
Jones VocelkaItalyIvan Magalhaes UNQUALIFIED
Octavia MaletItalyOnyama Limba RENEWAL
Stacey MacleadItalyIoni Bowcher QUALIFIED
Julie StensethCanadaBernardo Dominic NEGOTIATION
Adams MorascaAustraliaAmy Elsner QUALIFIED
Horizontal
NameCountryRepresentativeStatus
James ButtFranceIoni Bowcher PROPOSAL
Francesco ShinkoUnited KingdomStephen Shaw RENEWAL
Clifford RimGermanyAsiya Javayant NEW
Rodrigues CampainGermanyAmy Elsner UNQUALIFIED
Costa DilliardItalyXuxue Feng NEW
Misaki RoysterCanadaStephen Shaw UNQUALIFIED
Misaki RoysterUnited KingdomStephen Shaw RENEWAL
Maria MarrierUnited KingdomAmy Elsner UNQUALIFIED
Greenwood BologniaArgentinaElwin Sharvill NEW
Morrow RutaItalyIvan Magalhaes QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaBrazil2025-07-27Benton, John B Jr UNQUALIFIED44Onyama Limba
1001Salvatore StockhamUnited Kingdom2025-07-16Rousseaux, Michael Esq UNQUALIFIED36Bernardo Dominic
1002Silvio SlusarskiRussia2025-07-28Chanay, Jeffrey A Esq RENEWAL0Elwin Sharvill
1003Julie StensethIndia2025-07-21Morlong Associates NEGOTIATION62Elwin Sharvill
1004Faith GillianSpain2025-08-08Morlong Associates PROPOSAL3Stephen Shaw
1005Morrow RutaSpain2025-07-22Commercial Press PROPOSAL87Ivan Magalhaes
1006Rodrigues CampainFrance2025-07-17Chapman, Ross E Esq NEGOTIATION18Bernardo Dominic
1007Rodrigues CampainCanada2025-07-13Commercial Press NEGOTIATION20Ivan Magalhaes
1008Alejandro PerinGermany2025-08-05Rousseaux, Michael Esq RENEWAL45Elwin Sharvill
1009Misaki RoysterFrance2025-08-01Feiner Bros NEW46Stephen Shaw
1010Octavia MaletItaly2025-08-10Chemel, James L Cpa RENEWAL8Ivan Magalhaes
1011Maisha RulapaughJapan2025-07-30Feiner Bros QUALIFIED30Amy Elsner
1012Johnson SergiJapan2025-08-05King, Christopher A Esq NEW4Stephen Shaw
1013Ivar PaprockiAustralia2025-08-01Commercial Press RENEWAL99Onyama Limba
1014Deepesh ChuiUnited Kingdom2025-08-09Rousseaux, Michael Esq NEGOTIATION3Amy Elsner
1015Aika InouyeBrazil2025-08-10Dorl, James J Esq NEGOTIATION25Amy Elsner
1016Misaki RoysterAustralia2025-07-24Rangoni Of Florence UNQUALIFIED61Stephen Shaw
1017Maria MarrierBrazil2025-07-22Buckley Miller Wright NEGOTIATION53Amy Elsner
1018Jefferson SchemmerAustralia2025-08-09Chanay, Jeffrey A Esq PROPOSAL73Stephen Shaw
1019Greenwood BologniaFrance2025-07-30King, Christopher A Esq NEW43Asiya Javayant
1020Salvatore StockhamJapan2025-07-23Feiner Bros QUALIFIED12Ioni Bowcher
1021Octavia MaletIndia2025-07-18Benton, John B Jr UNQUALIFIED41Anna Fali
1022Cody SaylorsIndia2025-07-19Chanay, Jeffrey A Esq NEGOTIATION8Amy Elsner
1023Jennifer AmigonIndia2025-08-09Feltz Printing Service UNQUALIFIED94Stephen Shaw
1024Jennifer AmigonJapan2025-08-06Dorl, James J Esq UNQUALIFIED56Stephen Shaw
1025Morrow RutaSpain2025-07-15Chemel, James L Cpa PROPOSAL97Xuxue Feng
1026Deepesh ChuiBrazil2025-08-05Rangoni Of Florence NEW62Xuxue Feng
1027Octavia MaletGermany2025-07-21Morlong Associates UNQUALIFIED28Bernardo Dominic
1028Francesco ShinkoBrazil2025-07-19Morlong Associates UNQUALIFIED88Asiya Javayant
1029Francesco ShinkoAustralia2025-08-08Chemel, James L Cpa NEGOTIATION66Onyama Limba
1030Kaitlin OstroskyGermany2025-08-05Chanay, Jeffrey A Esq RENEWAL66Onyama Limba
1031Mujtaba NickaIndia2025-08-09Printing Dimensions NEW15Bernardo Dominic
1032Murillo MaletAustralia2025-08-04Buckley Miller Wright QUALIFIED53Onyama Limba
1033Greenwood BologniaUnited Kingdom2025-08-06Morlong Associates NEW56Xuxue Feng
1034Aruna FigeroaCanada2025-08-03Buckley Miller Wright NEGOTIATION36Stephen Shaw
1035Leon OldroydBrazil2025-07-22Buckley Miller Wright PROPOSAL39Asiya Javayant
1036Leon OldroydSpain2025-08-06Feltz Printing Service QUALIFIED94Xuxue Feng
1037Aruna FigeroaItaly2025-07-31Truhlar And Truhlar Attys RENEWAL17Onyama Limba
1038Jennifer AmigonAustralia2025-07-14Rangoni Of Florence PROPOSAL7Bernardo Dominic
1039Isabel BowleyFrance2025-07-22Printing Dimensions QUALIFIED18Xuxue Feng
1040Cody SaylorsFrance2025-07-25Rangoni Of Florence RENEWAL42Elwin Sharvill
1041Wickens NestleIndia2025-07-25Feltz Printing Service PROPOSAL1Elwin Sharvill
1042Sinclair WaycottFrance2025-08-06Printing Dimensions PROPOSAL8Ioni Bowcher
1043James ButtRussia2025-07-13Chemel, James L Cpa RENEWAL38Xuxue Feng
1044Misaki RoysterBrazil2025-08-03Dorl, James J Esq NEGOTIATION91Asiya Javayant
1045Johnson SergiAustralia2025-07-27Feltz Printing Service QUALIFIED47Bernardo Dominic
1046Murillo MaletIndia2025-07-22Printing Dimensions PROPOSAL19Elwin Sharvill
1047Jeanfrancois VenereSpain2025-07-13Buckley Miller Wright NEW80Anna Fali
1048Darci PoquetteCanada2025-07-18Feiner Bros NEW50Ioni Bowcher
1049Mujtaba NickaRussia2025-08-10Buckley Miller Wright QUALIFIED96Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleySpainBernardo Dominic UNQUALIFIED
Jeanfrancois VenereBrazilXuxue Feng UNQUALIFIED
Nicolas IturbideSpainElwin Sharvill RENEWAL
Costa DilliardBrazilStephen Shaw UNQUALIFIED
Maisha RulapaughFranceAnna Fali PROPOSAL
James ButtIndiaBernardo Dominic RENEWAL
Kadeem FlosiSpainBernardo Dominic NEW
Deepesh ChuiJapanXuxue Feng QUALIFIED
Stacey MacleadBrazilOnyama Limba NEGOTIATION
Cody SaylorsFranceXuxue Feng RENEWAL
Maisha RulapaughUnited KingdomStephen Shaw UNQUALIFIED
Chavez BriddickAustraliaAnna Fali UNQUALIFIED
Maisha RulapaughSpainStephen Shaw NEW
Ashley DoeAustraliaAsiya Javayant QUALIFIED
Emily WhobreyItalyStephen Shaw RENEWAL
Mayumi KolmetzRussiaElwin Sharvill NEGOTIATION
Darci PoquetteUnited KingdomOnyama Limba QUALIFIED
Aditya KuskoItalyBernardo Dominic NEW
Arvin AlbaresFranceXuxue Feng NEW
Ivar PaprockiRussiaIvan Magalhaes UNQUALIFIED
Aruna FigeroaCanadaAnna Fali PROPOSAL
Cody SaylorsArgentinaElwin Sharvill UNQUALIFIED
Adams MorascaAustraliaIvan Magalhaes QUALIFIED
Arvin AlbaresCanadaIoni Bowcher RENEWAL
Wickens NestleItalyBernardo Dominic RENEWAL
Stacey MacleadItalyStephen Shaw NEW
Costa DilliardGermanyXuxue Feng NEW
Clifford RimIndiaAmy Elsner PROPOSAL
Julie StensethItalyStephen Shaw QUALIFIED
Aika InouyeAustraliaXuxue Feng QUALIFIED
Misaki RoysterItalyIvan Magalhaes NEW
Smith GlickItalyElwin Sharvill UNQUALIFIED
Isabel BowleyBrazilAmy Elsner NEGOTIATION
Darci PoquetteArgentinaBernardo Dominic UNQUALIFIED
Francesco ShinkoRussiaStephen Shaw UNQUALIFIED
Munro FerenczUnited KingdomAsiya Javayant NEGOTIATION
Johnson SergiGermanyOnyama Limba RENEWAL
Morrow RutaArgentinaElwin Sharvill UNQUALIFIED
Emily WhobreyFranceAnna Fali NEW
Antonio CaudyFranceXuxue Feng UNQUALIFIED
Smith GlickSpainIoni Bowcher NEW
Johnson SergiFranceXuxue Feng PROPOSAL
Claire TollnerItalyAmy Elsner NEW
Maria MarrierSpainElwin Sharvill QUALIFIED
Munro FerenczArgentinaBernardo Dominic RENEWAL
Darci PoquetteBrazilIvan Magalhaes NEGOTIATION
Maisha RulapaughRussiaAsiya Javayant UNQUALIFIED
Alejandro PerinIndiaIoni Bowcher RENEWAL
Francesco ShinkoBrazilXuxue Feng NEW
Morrow RutaItalyOnyama Limba NEGOTIATION
Frozen Columns
Name
Misaki Royster
Cody Saylors
Claire Tollner
Mayumi Kolmetz
Francesco Shinko
Jeanfrancois Venere
Octavia Malet
Ricardo Gaucho
Wickens Nestle
Ashley Doe
Juan Wieser
Deepesh Chui
Antonio Caudy
Tony Foller
Stacey Maclead
Clifford Rim
Emily Whobrey
Leja Caldarera
James Butt
Cody Saylors
Maisha Rulapaugh
Wickens Nestle
Murillo Malet
Cody Saylors
Johnson Sergi
Aika Inouye
Claire Tollner
Leja Caldarera
Cody Saylors
Juan Wieser
Sinclair Waycott
Clifford Rim
Aruna Figeroa
Jones Vocelka
Faith Gillian
Aditya Kusko
Clifford Rim
Nicolas Iturbide
Leon Oldroyd
Ivar Paprocki
Leon Oldroyd
Adams Morasca
Stacey Maclead
Isabel Bowley
Ivar Paprocki
Tony Foller
Emily Whobrey
Izzy Garufi
Rodrigues Campain
Kaitlin Ostrosky
IdCountryDate
1000Brazil2025-07-27
1001United Kingdom2025-07-18
1002India2025-07-24
1003Russia2025-07-13
1004Japan2025-08-08
1005Argentina2025-07-20
1006Canada2025-07-17
1007Germany2025-08-11
1008France2025-08-07
1009France2025-08-09
1010Japan2025-08-11
1011Canada2025-08-07
1012Germany2025-07-13
1013France2025-07-25
1014Spain2025-07-28
1015Russia2025-07-18
1016India2025-07-20
1017Canada2025-07-19
1018Italy2025-08-02
1019Germany2025-07-19
1020United Kingdom2025-08-11
1021Russia2025-07-13
1022Spain2025-07-19
1023Japan2025-08-07
1024United Kingdom2025-07-22
1025Russia2025-08-09
1026Germany2025-07-16
1027Russia2025-07-13
1028Germany2025-07-23
1029Spain2025-08-06
1030Germany2025-08-09
1031France2025-07-24
1032France2025-07-19
1033Russia2025-07-27
1034Germany2025-07-21
1035Italy2025-07-22
1036Australia2025-07-15
1037Argentina2025-08-10
1038France2025-07-17
1039Japan2025-07-26
1040Canada2025-07-25
1041Argentina2025-08-07
1042Brazil2025-07-31
1043Argentina2025-07-29
1044Italy2025-08-06
1045Japan2025-07-21
1046Germany2025-07-30
1047India2025-07-17
1048Japan2025-07-17
1049Germany2025-07-22

On-Demand Data

NameIdCountryDate
Johnson Sergi1000Russia2025-08-06
Sinclair Waycott1001Italy2025-07-28
David Darakjy1002Japan2025-07-23
Octavia Malet1003Brazil2025-07-18
Rodrigues Campain1004Russia2025-07-29
Jones Vocelka1005Australia2025-07-13
Aika Inouye1006Australia2025-07-25
Smith Glick1007Argentina2025-08-09
Rodrigues Campain1008Brazil2025-07-27
Murillo Malet1009Germany2025-07-24
Deepesh Chui1010Argentina2025-07-17
Mujtaba Nicka1011Argentina2025-07-15
Julie Stenseth1012Italy2025-07-23
Sinclair Waycott1013Spain2025-07-28
Emily Whobrey1014Russia2025-07-22
Mayumi Kolmetz1015Italy2025-08-01
Cody Saylors1016United Kingdom2025-07-14
Mayumi Kolmetz1017Japan2025-07-30
Aditya Kusko1018India2025-07-19
Jefferson Schemmer1019Australia2025-08-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydFranceXuxue Feng RENEWAL
Claire TollnerCanadaAnna Fali NEGOTIATION
Izzy GarufiRussiaElwin Sharvill NEW
Francesco ShinkoRussiaOnyama Limba PROPOSAL
Juan WieserItalyAmy Elsner RENEWAL
Mujtaba NickaBrazilOnyama Limba NEGOTIATION
Adams MorascaGermanyIvan Magalhaes NEGOTIATION
Octavia MaletGermanyXuxue Feng NEW
Jennifer AmigonUnited KingdomBernardo Dominic RENEWAL
Wickens NestleUnited KingdomIoni Bowcher PROPOSAL
Salvatore StockhamFranceIoni Bowcher RENEWAL
James ButtCanadaIvan Magalhaes UNQUALIFIED
Aruna FigeroaGermanyBernardo Dominic UNQUALIFIED
Costa DilliardAustraliaAsiya Javayant RENEWAL
Sinclair WaycottJapanAnna Fali UNQUALIFIED
Munro FerenczGermanyAmy Elsner UNQUALIFIED
Kaitlin OstroskyItalyIvan Magalhaes PROPOSAL
Maisha RulapaughIndiaOnyama Limba RENEWAL
Kaitlin OstroskyJapanStephen Shaw QUALIFIED
Julie StensethAustraliaElwin Sharvill UNQUALIFIED
Costa DilliardArgentinaIoni Bowcher NEGOTIATION
Leon OldroydUnited KingdomBernardo Dominic UNQUALIFIED
Maisha RulapaughFranceBernardo Dominic PROPOSAL
Morrow RutaUnited KingdomIoni Bowcher RENEWAL
Rodrigues CampainFranceIoni Bowcher RENEWAL
Smith GlickFranceAmy Elsner PROPOSAL
Clifford RimItalyIoni Bowcher PROPOSAL
Mayumi KolmetzItalyElwin Sharvill UNQUALIFIED
Salvatore StockhamJapanElwin Sharvill QUALIFIED
Darci PoquetteArgentinaStephen Shaw RENEWAL
Aika InouyeAustraliaOnyama Limba NEGOTIATION
Stacey MacleadSpainIvan Magalhaes RENEWAL
Smith GlickBrazilAmy Elsner NEGOTIATION
Leon OldroydSpainStephen Shaw RENEWAL
Mayumi KolmetzUnited KingdomBernardo Dominic QUALIFIED
Darci PoquetteGermanyXuxue Feng NEGOTIATION
Clifford RimUnited KingdomIvan Magalhaes UNQUALIFIED
Adams MorascaIndiaOnyama Limba PROPOSAL
Darci PoquetteAustraliaIvan Magalhaes QUALIFIED
Maria MarrierItalyAmy Elsner 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>