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
Clifford RimBrazilStephen Shaw NEGOTIATION
Darci PoquetteJapanIvan Magalhaes NEW
Emily WhobreyUnited KingdomElwin Sharvill NEGOTIATION
Leja CaldareraJapanIoni Bowcher QUALIFIED
Kaitlin OstroskyBrazilElwin Sharvill NEW
Morrow RutaSpainAsiya Javayant NEGOTIATION
Maisha RulapaughCanadaOnyama Limba RENEWAL
Leja CaldareraItalyOnyama Limba QUALIFIED
Jeanfrancois VenereCanadaIvan Magalhaes RENEWAL
Maria MarrierIndiaElwin Sharvill UNQUALIFIED
Juan WieserSpainAsiya Javayant NEW
Alejandro PerinAustraliaBernardo Dominic PROPOSAL
Kadeem FlosiArgentinaAsiya Javayant QUALIFIED
Faith GillianAustraliaBernardo Dominic PROPOSAL
Ashley DoeJapanStephen Shaw UNQUALIFIED
Alejandro PerinArgentinaAsiya Javayant NEW
Aruna FigeroaArgentinaAmy Elsner NEGOTIATION
Nicolas IturbideRussiaOnyama Limba QUALIFIED
Salvatore StockhamCanadaXuxue Feng UNQUALIFIED
Isabel BowleySpainXuxue Feng RENEWAL
Emily WhobreySpainXuxue Feng NEW
Johnson SergiArgentinaXuxue Feng QUALIFIED
Clifford RimItalyOnyama Limba PROPOSAL
Faith GillianJapanAsiya Javayant PROPOSAL
Alejandro PerinSpainXuxue Feng RENEWAL
Maria MarrierRussiaOnyama Limba NEW
Kadeem FlosiUnited KingdomIoni Bowcher NEW
Isabel BowleyCanadaElwin Sharvill UNQUALIFIED
Izzy GarufiItalyBernardo Dominic PROPOSAL
Darci PoquetteJapanAmy Elsner UNQUALIFIED
Chavez BriddickGermanyIvan Magalhaes UNQUALIFIED
Nicolas IturbideUnited KingdomAmy Elsner NEGOTIATION
Chavez BriddickRussiaXuxue Feng NEGOTIATION
Chavez BriddickIndiaIvan Magalhaes NEGOTIATION
Claire TollnerBrazilBernardo Dominic NEGOTIATION
Claire TollnerCanadaAmy Elsner UNQUALIFIED
Adams MorascaJapanAmy Elsner RENEWAL
Salvatore StockhamFranceBernardo Dominic NEGOTIATION
Maria MarrierFranceAnna Fali RENEWAL
Chavez BriddickGermanyXuxue Feng UNQUALIFIED
Morrow RutaIndiaStephen Shaw RENEWAL
Aika InouyeUnited KingdomStephen Shaw QUALIFIED
James ButtCanadaXuxue Feng NEGOTIATION
Greenwood BologniaSpainAnna Fali NEW
Juan WieserJapanStephen Shaw RENEWAL
Darci PoquetteArgentinaAsiya Javayant QUALIFIED
Claire TollnerItalyBernardo Dominic PROPOSAL
Maria MarrierSpainElwin Sharvill RENEWAL
Tony FollerJapanBernardo Dominic UNQUALIFIED
Mujtaba NickaUnited KingdomIvan Magalhaes PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyIndiaIvan Magalhaes UNQUALIFIED
Arvin AlbaresIndiaBernardo Dominic PROPOSAL
Morrow RutaCanadaIvan Magalhaes QUALIFIED
Stacey MacleadBrazilStephen Shaw QUALIFIED
Aika InouyeIndiaElwin Sharvill PROPOSAL
Francesco ShinkoUnited KingdomOnyama Limba RENEWAL
Silvio SlusarskiBrazilStephen Shaw RENEWAL
Emily WhobreyIndiaIvan Magalhaes RENEWAL
Arvin AlbaresBrazilAsiya Javayant UNQUALIFIED
David DarakjyUnited KingdomStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jefferson SchemmerSpain2025-08-28Buckley Miller Wright NEGOTIATION41Anna Fali
1001Julie StensethAustralia2025-09-08Feltz Printing Service NEGOTIATION68Ivan Magalhaes
1002Leon OldroydAustralia2025-09-15Feiner Bros RENEWAL21Xuxue Feng
1003Johnson SergiUnited Kingdom2025-09-12Chapman, Ross E Esq RENEWAL57Elwin Sharvill
1004Octavia MaletBrazil2025-08-24Rousseaux, Michael Esq QUALIFIED63Amy Elsner
1005Julie StensethSpain2025-08-29Rousseaux, Michael Esq UNQUALIFIED7Xuxue Feng
1006Octavia MaletRussia2025-08-17Dorl, James J Esq UNQUALIFIED60Xuxue Feng
1007Emily WhobreyBrazil2025-09-05Buckley Miller Wright RENEWAL94Ioni Bowcher
1008Mujtaba NickaArgentina2025-08-22Dorl, James J Esq UNQUALIFIED64Elwin Sharvill
1009Costa DilliardUnited Kingdom2025-08-18Rousseaux, Michael Esq RENEWAL70Xuxue Feng
1010Smith GlickRussia2025-08-25Morlong Associates QUALIFIED35Ivan Magalhaes
1011Rodrigues CampainGermany2025-08-19Dorl, James J Esq UNQUALIFIED44Asiya Javayant
1012Ivar PaprockiBrazil2025-08-27Chemel, James L Cpa NEGOTIATION2Stephen Shaw
1013Deepesh ChuiJapan2025-08-22Morlong Associates NEW88Xuxue Feng
1014Juan WieserAustralia2025-08-28Buckley Miller Wright NEW48Onyama Limba
1015Stacey MacleadArgentina2025-09-08Printing Dimensions PROPOSAL23Stephen Shaw
1016Ivar PaprockiIndia2025-08-31Commercial Press UNQUALIFIED97Onyama Limba
1017Murillo MaletUnited Kingdom2025-08-27Feltz Printing Service NEW42Xuxue Feng
1018Jones VocelkaSpain2025-09-10Feltz Printing Service PROPOSAL79Bernardo Dominic
1019Juan WieserIndia2025-09-14King, Christopher A Esq QUALIFIED6Ioni Bowcher
1020Izzy GarufiArgentina2025-08-18Truhlar And Truhlar Attys UNQUALIFIED44Ivan Magalhaes
1021Munro FerenczFrance2025-09-11Rangoni Of Florence QUALIFIED92Anna Fali
1022Silvio SlusarskiItaly2025-09-12Commercial Press NEGOTIATION39Amy Elsner
1023Aditya KuskoBrazil2025-09-12Chemel, James L Cpa UNQUALIFIED78Ioni Bowcher
1024Ivar PaprockiSpain2025-09-07Feltz Printing Service RENEWAL90Anna Fali
1025Maria MarrierArgentina2025-08-21Feiner Bros RENEWAL90Onyama Limba
1026Juan WieserItaly2025-09-03Chapman, Ross E Esq QUALIFIED74Onyama Limba
1027Aika InouyeBrazil2025-09-15Printing Dimensions NEGOTIATION42Onyama Limba
1028Claire TollnerGermany2025-09-04Truhlar And Truhlar Attys NEGOTIATION87Stephen Shaw
1029Izzy GarufiIndia2025-08-21Morlong Associates NEGOTIATION35Ivan Magalhaes
1030Stacey MacleadCanada2025-08-24Chemel, James L Cpa UNQUALIFIED2Ioni Bowcher
1031Aruna FigeroaFrance2025-09-06Rangoni Of Florence QUALIFIED24Anna Fali
1032David DarakjyFrance2025-09-03Benton, John B Jr PROPOSAL55Onyama Limba
1033Jennifer AmigonIndia2025-08-19Rousseaux, Michael Esq UNQUALIFIED5Xuxue Feng
1034Darci PoquetteAustralia2025-09-08King, Christopher A Esq QUALIFIED86Ioni Bowcher
1035Johnson SergiArgentina2025-09-14Truhlar And Truhlar Attys UNQUALIFIED33Onyama Limba
1036Adams MorascaItaly2025-08-23Rousseaux, Michael Esq NEGOTIATION16Asiya Javayant
1037Faith GillianFrance2025-09-08Rangoni Of Florence NEW47Asiya Javayant
1038Misaki RoysterArgentina2025-08-29Chemel, James L Cpa NEW42Ivan Magalhaes
1039Silvio SlusarskiGermany2025-09-12Dorl, James J Esq UNQUALIFIED65Xuxue Feng
1040Aruna FigeroaAustralia2025-09-07Commercial Press NEW7Anna Fali
1041David DarakjyItaly2025-08-17Feiner Bros UNQUALIFIED62Onyama Limba
1042Tony FollerAustralia2025-09-03Rousseaux, Michael Esq QUALIFIED80Stephen Shaw
1043Kaitlin OstroskyCanada2025-09-13Commercial Press QUALIFIED29Onyama Limba
1044Chavez BriddickGermany2025-08-27Truhlar And Truhlar Attys NEGOTIATION73Ioni Bowcher
1045Darci PoquetteSpain2025-08-23Feltz Printing Service PROPOSAL66Amy Elsner
1046Adams MorascaRussia2025-09-15Chanay, Jeffrey A Esq NEGOTIATION27Stephen Shaw
1047Murillo MaletCanada2025-08-26Chemel, James L Cpa NEGOTIATION33Stephen Shaw
1048Munro FerenczCanada2025-09-03Chapman, Ross E Esq UNQUALIFIED57Ivan Magalhaes
1049Nicolas IturbideJapan2025-09-10Benton, John B Jr UNQUALIFIED11Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Emily WhobreyIndiaAnna Fali NEGOTIATION
Jefferson SchemmerBrazilOnyama Limba RENEWAL
Johnson SergiBrazilOnyama Limba NEGOTIATION
Nicolas IturbideAustraliaOnyama Limba NEGOTIATION
Darci PoquetteRussiaElwin Sharvill QUALIFIED
Cody SaylorsIndiaXuxue Feng NEGOTIATION
James ButtItalyAnna Fali QUALIFIED
Kadeem FlosiBrazilIoni Bowcher NEW
Costa DilliardAustraliaAsiya Javayant NEGOTIATION
Rodrigues CampainFranceAmy Elsner NEW
Adams MorascaRussiaIoni Bowcher NEGOTIATION
Deepesh ChuiGermanyOnyama Limba QUALIFIED
Claire TollnerItalyIoni Bowcher RENEWAL
Misaki RoysterIndiaBernardo Dominic QUALIFIED
Nicolas IturbideSpainIoni Bowcher RENEWAL
Arvin AlbaresCanadaAmy Elsner QUALIFIED
Costa DilliardCanadaStephen Shaw QUALIFIED
Chavez BriddickCanadaAsiya Javayant UNQUALIFIED
Antonio CaudyIndiaIvan Magalhaes NEW
Emily WhobreyJapanElwin Sharvill PROPOSAL
Ivar PaprockiFranceAsiya Javayant UNQUALIFIED
Alejandro PerinArgentinaElwin Sharvill NEW
Johnson SergiGermanyStephen Shaw PROPOSAL
Juan WieserItalyAsiya Javayant QUALIFIED
David DarakjySpainStephen Shaw NEGOTIATION
Faith GillianCanadaAmy Elsner PROPOSAL
Aditya KuskoArgentinaOnyama Limba QUALIFIED
Arvin AlbaresGermanyStephen Shaw UNQUALIFIED
Jones VocelkaSpainElwin Sharvill NEGOTIATION
Murillo MaletSpainBernardo Dominic NEGOTIATION
Costa DilliardRussiaAnna Fali NEW
Sinclair WaycottAustraliaElwin Sharvill QUALIFIED
Francesco ShinkoArgentinaXuxue Feng NEGOTIATION
Ashley DoeFranceStephen Shaw NEW
Stacey MacleadRussiaOnyama Limba QUALIFIED
Jones VocelkaIndiaElwin Sharvill NEGOTIATION
Chavez BriddickFranceAsiya Javayant PROPOSAL
Aditya KuskoArgentinaBernardo Dominic RENEWAL
James ButtArgentinaStephen Shaw NEW
Maisha RulapaughItalyOnyama Limba PROPOSAL
Octavia MaletGermanyOnyama Limba QUALIFIED
Jefferson SchemmerIndiaIvan Magalhaes QUALIFIED
Sinclair WaycottSpainIoni Bowcher UNQUALIFIED
Aruna FigeroaArgentinaAsiya Javayant NEW
Greenwood BologniaGermanyIvan Magalhaes NEGOTIATION
Munro FerenczIndiaIvan Magalhaes NEGOTIATION
Misaki RoysterBrazilOnyama Limba QUALIFIED
Kadeem FlosiArgentinaBernardo Dominic PROPOSAL
Maisha RulapaughSpainAmy Elsner RENEWAL
Julie StensethFranceBernardo Dominic NEW
Frozen Columns
Name
James Butt
Octavia Malet
Maria Marrier
Leon Oldroyd
Rodrigues Campain
Ricardo Gaucho
Arvin Albares
Aika Inouye
Aditya Kusko
Misaki Royster
Wickens Nestle
Maria Marrier
Francesco Shinko
Cody Saylors
Salvatore Stockham
Morrow Ruta
Kaitlin Ostrosky
Smith Glick
Antonio Caudy
Morrow Ruta
Ricardo Gaucho
Izzy Garufi
Johnson Sergi
Maria Marrier
Smith Glick
Tony Foller
Smith Glick
Juan Wieser
Octavia Malet
Rodrigues Campain
Antonio Caudy
Costa Dilliard
Aruna Figeroa
Salvatore Stockham
Ivar Paprocki
Kadeem Flosi
Faith Gillian
Isabel Bowley
Juan Wieser
Isabel Bowley
Jeanfrancois Venere
Juan Wieser
Cody Saylors
Deepesh Chui
Claire Tollner
Tony Foller
Aruna Figeroa
Faith Gillian
Darci Poquette
Leon Oldroyd
IdCountryDate
1000Germany2025-09-05
1001Germany2025-08-29
1002France2025-09-10
1003Italy2025-08-20
1004India2025-08-25
1005France2025-09-08
1006India2025-08-18
1007Brazil2025-08-31
1008Spain2025-08-27
1009Australia2025-08-26
1010Brazil2025-08-26
1011Australia2025-09-03
1012Canada2025-08-31
1013Japan2025-08-19
1014Australia2025-09-08
1015Japan2025-08-17
1016Australia2025-08-24
1017Argentina2025-08-24
1018Spain2025-09-09
1019Germany2025-08-18
1020Argentina2025-09-15
1021Brazil2025-08-27
1022Russia2025-09-13
1023France2025-09-07
1024France2025-09-13
1025Italy2025-09-10
1026France2025-08-22
1027Japan2025-09-15
1028Brazil2025-08-29
1029Australia2025-08-27
1030Japan2025-09-08
1031Canada2025-08-23
1032United Kingdom2025-09-11
1033France2025-08-22
1034Italy2025-09-06
1035Russia2025-08-25
1036Argentina2025-09-10
1037Brazil2025-09-05
1038Canada2025-09-09
1039Italy2025-08-21
1040Germany2025-08-25
1041United Kingdom2025-09-08
1042Germany2025-08-24
1043Germany2025-09-11
1044Italy2025-08-18
1045Italy2025-09-05
1046India2025-08-28
1047United Kingdom2025-08-26
1048Australia2025-09-10
1049France2025-08-27

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000Australia2025-09-10
Cody Saylors1001Germany2025-08-20
Kaitlin Ostrosky1002Germany2025-09-07
Julie Stenseth1003France2025-09-10
Jefferson Schemmer1004Argentina2025-08-31
Jones Vocelka1005Italy2025-09-08
Claire Tollner1006Germany2025-09-13
Nicolas Iturbide1007Australia2025-09-09
Darci Poquette1008India2025-09-08
Jefferson Schemmer1009Russia2025-08-25
Stacey Maclead1010Canada2025-09-01
Costa Dilliard1011India2025-09-10
Johnson Sergi1012Italy2025-08-27
Alejandro Perin1013Brazil2025-09-10
Wickens Nestle1014United Kingdom2025-08-23
Nicolas Iturbide1015France2025-08-23
Sinclair Waycott1016Brazil2025-08-19
Tony Foller1017Spain2025-08-22
Juan Wieser1018Japan2025-09-01
Murillo Malet1019Brazil2025-08-28
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Smith GlickItalyStephen Shaw NEGOTIATION
Wickens NestleGermanyOnyama Limba NEGOTIATION
Deepesh ChuiIndiaAnna Fali PROPOSAL
Nicolas IturbideAustraliaAmy Elsner RENEWAL
Tony FollerItalyAnna Fali PROPOSAL
Jennifer AmigonFranceIvan Magalhaes PROPOSAL
Stacey MacleadGermanyBernardo Dominic PROPOSAL
Kaitlin OstroskyCanadaBernardo Dominic QUALIFIED
Ricardo GauchoGermanyBernardo Dominic RENEWAL
Alejandro PerinGermanyIoni Bowcher UNQUALIFIED
Jennifer AmigonFranceAnna Fali NEW
Kaitlin OstroskySpainAnna Fali QUALIFIED
Alejandro PerinJapanIvan Magalhaes UNQUALIFIED
Juan WieserCanadaAmy Elsner PROPOSAL
Chavez BriddickRussiaIvan Magalhaes UNQUALIFIED
Mujtaba NickaAustraliaElwin Sharvill NEGOTIATION
Sinclair WaycottGermanyAnna Fali QUALIFIED
Leja CaldareraArgentinaAsiya Javayant NEW
Mujtaba NickaRussiaElwin Sharvill PROPOSAL
Kaitlin OstroskyArgentinaElwin Sharvill QUALIFIED
Kadeem FlosiCanadaOnyama Limba QUALIFIED
Ricardo GauchoRussiaIvan Magalhaes QUALIFIED
Maria MarrierBrazilAmy Elsner NEGOTIATION
Leon OldroydAustraliaElwin Sharvill PROPOSAL
Aika InouyeIndiaAnna Fali NEGOTIATION
Nicolas IturbideUnited KingdomAnna Fali NEGOTIATION
Tony FollerGermanyAnna Fali UNQUALIFIED
Aditya KuskoItalyXuxue Feng PROPOSAL
Nicolas IturbideFranceStephen Shaw PROPOSAL
Smith GlickJapanAnna Fali NEW
Cody SaylorsAustraliaElwin Sharvill UNQUALIFIED
David DarakjyIndiaAsiya Javayant PROPOSAL
Aruna FigeroaCanadaAnna Fali NEW
Cody SaylorsSpainIoni Bowcher PROPOSAL
Johnson SergiAustraliaIvan Magalhaes QUALIFIED
Mujtaba NickaJapanIvan Magalhaes RENEWAL
Wickens NestleAustraliaBernardo Dominic NEGOTIATION
Tony FollerRussiaAnna Fali PROPOSAL
Smith GlickItalyElwin Sharvill QUALIFIED
Chavez BriddickIndiaAsiya Javayant 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>