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 FigeroaCanadaAnna Fali NEW
Octavia MaletSpainAmy Elsner NEGOTIATION
Julie StensethRussiaBernardo Dominic QUALIFIED
Mayumi KolmetzJapanIvan Magalhaes PROPOSAL
James ButtAustraliaAsiya Javayant NEW
Adams MorascaUnited KingdomAmy Elsner RENEWAL
Claire TollnerBrazilOnyama Limba QUALIFIED
Clifford RimIndiaStephen Shaw NEW
Octavia MaletBrazilIoni Bowcher PROPOSAL
Kaitlin OstroskyRussiaIvan Magalhaes RENEWAL
David DarakjyUnited KingdomOnyama Limba NEGOTIATION
Arvin AlbaresItalyIvan Magalhaes NEGOTIATION
Smith GlickRussiaAmy Elsner UNQUALIFIED
Tony FollerFranceBernardo Dominic UNQUALIFIED
Kadeem FlosiBrazilAsiya Javayant PROPOSAL
Faith GillianSpainStephen Shaw QUALIFIED
Morrow RutaJapanBernardo Dominic NEW
Rodrigues CampainBrazilOnyama Limba PROPOSAL
Aditya KuskoIndiaElwin Sharvill PROPOSAL
Morrow RutaIndiaStephen Shaw NEW
Aika InouyeIndiaXuxue Feng UNQUALIFIED
Wickens NestleCanadaElwin Sharvill RENEWAL
Kadeem FlosiSpainAmy Elsner NEW
Juan WieserAustraliaOnyama Limba UNQUALIFIED
Johnson SergiJapanStephen Shaw NEGOTIATION
Jennifer AmigonIndiaElwin Sharvill NEGOTIATION
Darci PoquetteFranceAsiya Javayant PROPOSAL
Sinclair WaycottSpainBernardo Dominic QUALIFIED
Stacey MacleadAustraliaXuxue Feng PROPOSAL
Silvio SlusarskiGermanyXuxue Feng PROPOSAL
Mujtaba NickaUnited KingdomIvan Magalhaes NEGOTIATION
Aika InouyeSpainBernardo Dominic QUALIFIED
Julie StensethAustraliaIoni Bowcher UNQUALIFIED
Jones VocelkaArgentinaStephen Shaw NEGOTIATION
Sinclair WaycottIndiaIvan Magalhaes NEGOTIATION
Johnson SergiFranceIoni Bowcher PROPOSAL
Costa DilliardSpainBernardo Dominic RENEWAL
Aditya KuskoFranceStephen Shaw RENEWAL
Murillo MaletAustraliaElwin Sharvill RENEWAL
Misaki RoysterArgentinaIoni Bowcher NEGOTIATION
Munro FerenczAustraliaIoni Bowcher PROPOSAL
Salvatore StockhamCanadaIoni Bowcher NEGOTIATION
Jefferson SchemmerCanadaBernardo Dominic QUALIFIED
Jennifer AmigonCanadaAsiya Javayant NEW
Salvatore StockhamCanadaStephen Shaw QUALIFIED
Octavia MaletCanadaIoni Bowcher PROPOSAL
Ivar PaprockiArgentinaIoni Bowcher PROPOSAL
Isabel BowleySpainElwin Sharvill UNQUALIFIED
Aditya KuskoUnited KingdomIoni Bowcher NEGOTIATION
Julie StensethUnited KingdomElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiBrazilElwin Sharvill QUALIFIED
Munro FerenczIndiaElwin Sharvill NEW
Octavia MaletRussiaXuxue Feng PROPOSAL
Jeanfrancois VenereRussiaAnna Fali PROPOSAL
James ButtSpainStephen Shaw RENEWAL
Faith GillianBrazilBernardo Dominic RENEWAL
Ricardo GauchoAustraliaXuxue Feng QUALIFIED
Ashley DoeItalyElwin Sharvill NEGOTIATION
Leja CaldareraItalyIoni Bowcher RENEWAL
Deepesh ChuiGermanyAsiya Javayant UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierRussia2025-09-27Feltz Printing Service RENEWAL42Asiya Javayant
1001Deepesh ChuiGermany2025-10-17Buckley Miller Wright UNQUALIFIED46Ioni Bowcher
1002Francesco ShinkoAustralia2025-09-29Dorl, James J Esq RENEWAL47Xuxue Feng
1003Wickens NestleCanada2025-10-07Truhlar And Truhlar Attys NEGOTIATION36Bernardo Dominic
1004Murillo MaletJapan2025-10-19Morlong Associates NEW44Amy Elsner
1005Ashley DoeAustralia2025-10-07Printing Dimensions NEGOTIATION91Stephen Shaw
1006Leon OldroydIndia2025-10-08Feltz Printing Service QUALIFIED94Amy Elsner
1007Rodrigues CampainSpain2025-10-11Feiner Bros QUALIFIED61Onyama Limba
1008Mayumi KolmetzArgentina2025-10-18Printing Dimensions NEW81Anna Fali
1009Costa DilliardIndia2025-10-18Feltz Printing Service QUALIFIED53Ivan Magalhaes
1010Francesco ShinkoItaly2025-10-09Rangoni Of Florence PROPOSAL9Anna Fali
1011Jefferson SchemmerArgentina2025-10-08King, Christopher A Esq NEGOTIATION9Asiya Javayant
1012Faith GillianIndia2025-09-24Commercial Press UNQUALIFIED91Ivan Magalhaes
1013Aditya KuskoAustralia2025-10-14Chapman, Ross E Esq PROPOSAL39Onyama Limba
1014Antonio CaudyGermany2025-10-06Benton, John B Jr NEW98Xuxue Feng
1015Morrow RutaGermany2025-10-22Printing Dimensions UNQUALIFIED94Onyama Limba
1016Clifford RimSpain2025-10-11Printing Dimensions UNQUALIFIED61Amy Elsner
1017Arvin AlbaresRussia2025-09-25Benton, John B Jr NEGOTIATION85Ioni Bowcher
1018Izzy GarufiRussia2025-10-13Chanay, Jeffrey A Esq RENEWAL94Onyama Limba
1019Nicolas IturbideRussia2025-10-16Benton, John B Jr UNQUALIFIED4Anna Fali
1020Emily WhobreyIndia2025-10-08Rousseaux, Michael Esq NEW99Bernardo Dominic
1021Kaitlin OstroskyRussia2025-10-11Feiner Bros RENEWAL88Bernardo Dominic
1022Juan WieserGermany2025-10-07Morlong Associates NEW13Onyama Limba
1023Chavez BriddickGermany2025-09-30Benton, John B Jr QUALIFIED15Stephen Shaw
1024Sinclair WaycottIndia2025-10-09King, Christopher A Esq UNQUALIFIED78Anna Fali
1025David DarakjyBrazil2025-10-14Chapman, Ross E Esq NEW39Ivan Magalhaes
1026Ricardo GauchoAustralia2025-10-14Chemel, James L Cpa NEGOTIATION4Elwin Sharvill
1027Silvio SlusarskiAustralia2025-10-22King, Christopher A Esq NEW54Amy Elsner
1028Leja CaldareraIndia2025-10-19King, Christopher A Esq UNQUALIFIED11Stephen Shaw
1029Antonio CaudyCanada2025-10-17Chanay, Jeffrey A Esq NEW60Asiya Javayant
1030Kaitlin OstroskyFrance2025-10-05Dorl, James J Esq NEGOTIATION1Anna Fali
1031Sinclair WaycottFrance2025-10-17Rousseaux, Michael Esq UNQUALIFIED1Elwin Sharvill
1032Antonio CaudyAustralia2025-10-16Benton, John B Jr PROPOSAL5Xuxue Feng
1033Aditya KuskoRussia2025-10-11Dorl, James J Esq PROPOSAL33Anna Fali
1034Leja CaldareraBrazil2025-10-12Commercial Press PROPOSAL80Anna Fali
1035Cody SaylorsFrance2025-09-27Morlong Associates PROPOSAL43Asiya Javayant
1036Silvio SlusarskiFrance2025-10-07Chapman, Ross E Esq QUALIFIED87Amy Elsner
1037Juan WieserSpain2025-10-20Truhlar And Truhlar Attys NEW40Ioni Bowcher
1038Misaki RoysterArgentina2025-09-23Chanay, Jeffrey A Esq UNQUALIFIED36Stephen Shaw
1039Murillo MaletRussia2025-10-20Rousseaux, Michael Esq RENEWAL51Bernardo Dominic
1040Ashley DoeFrance2025-10-18Chemel, James L Cpa RENEWAL32Ioni Bowcher
1041Aika InouyeBrazil2025-10-04Buckley Miller Wright UNQUALIFIED65Xuxue Feng
1042David DarakjyUnited Kingdom2025-10-01Chapman, Ross E Esq PROPOSAL99Anna Fali
1043Ivar PaprockiBrazil2025-10-15Chanay, Jeffrey A Esq RENEWAL28Xuxue Feng
1044Aditya KuskoRussia2025-10-03Truhlar And Truhlar Attys QUALIFIED43Onyama Limba
1045Tony FollerIndia2025-10-13King, Christopher A Esq QUALIFIED88Xuxue Feng
1046Arvin AlbaresIndia2025-10-08Benton, John B Jr NEGOTIATION14Onyama Limba
1047Jennifer AmigonIndia2025-09-23Morlong Associates RENEWAL12Ioni Bowcher
1048Faith GillianUnited Kingdom2025-09-24Dorl, James J Esq RENEWAL17Onyama Limba
1049Leon OldroydFrance2025-10-06Chapman, Ross E Esq QUALIFIED86Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Ivar PaprockiSpainElwin Sharvill QUALIFIED
Wickens NestleBrazilAmy Elsner NEGOTIATION
Juan WieserRussiaXuxue Feng NEGOTIATION
Ricardo GauchoJapanXuxue Feng NEGOTIATION
Smith GlickIndiaAsiya Javayant NEGOTIATION
Stacey MacleadIndiaXuxue Feng PROPOSAL
Morrow RutaArgentinaIvan Magalhaes RENEWAL
Wickens NestleItalyIoni Bowcher NEW
Faith GillianAustraliaIoni Bowcher PROPOSAL
Jennifer AmigonAustraliaBernardo Dominic UNQUALIFIED
Misaki RoysterFranceAsiya Javayant NEW
Aika InouyeUnited KingdomAsiya Javayant UNQUALIFIED
Ricardo GauchoJapanIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilAnna Fali NEGOTIATION
Greenwood BologniaJapanXuxue Feng RENEWAL
Francesco ShinkoJapanAnna Fali UNQUALIFIED
Juan WieserArgentinaOnyama Limba NEGOTIATION
Jefferson SchemmerGermanyStephen Shaw QUALIFIED
David DarakjyUnited KingdomAsiya Javayant NEGOTIATION
Silvio SlusarskiGermanyIvan Magalhaes PROPOSAL
Arvin AlbaresSpainIoni Bowcher QUALIFIED
Deepesh ChuiUnited KingdomBernardo Dominic RENEWAL
Darci PoquetteBrazilStephen Shaw UNQUALIFIED
Jones VocelkaRussiaIoni Bowcher PROPOSAL
James ButtUnited KingdomIvan Magalhaes RENEWAL
Julie StensethFranceIoni Bowcher NEGOTIATION
Leja CaldareraJapanBernardo Dominic RENEWAL
Kadeem FlosiFranceStephen Shaw PROPOSAL
Aika InouyeArgentinaStephen Shaw UNQUALIFIED
Jeanfrancois VenereRussiaBernardo Dominic RENEWAL
Morrow RutaArgentinaAnna Fali PROPOSAL
Francesco ShinkoGermanyIvan Magalhaes NEW
James ButtGermanyXuxue Feng UNQUALIFIED
David DarakjySpainIoni Bowcher QUALIFIED
Jefferson SchemmerUnited KingdomElwin Sharvill UNQUALIFIED
Maria MarrierCanadaStephen Shaw UNQUALIFIED
Francesco ShinkoCanadaAnna Fali PROPOSAL
Arvin AlbaresFranceBernardo Dominic UNQUALIFIED
Antonio CaudyCanadaElwin Sharvill NEGOTIATION
David DarakjyJapanOnyama Limba UNQUALIFIED
David DarakjyAustraliaXuxue Feng NEW
Kaitlin OstroskySpainAnna Fali PROPOSAL
Leja CaldareraIndiaStephen Shaw PROPOSAL
Greenwood BologniaSpainBernardo Dominic RENEWAL
Faith GillianCanadaOnyama Limba QUALIFIED
Juan WieserUnited KingdomAsiya Javayant NEGOTIATION
Faith GillianItalyAsiya Javayant NEGOTIATION
David DarakjyRussiaAmy Elsner QUALIFIED
Faith GillianBrazilXuxue Feng UNQUALIFIED
Isabel BowleyGermanyOnyama Limba QUALIFIED
Frozen Columns
Name
Cody Saylors
Claire Tollner
Greenwood Bolognia
Chavez Briddick
Claire Tollner
Aditya Kusko
Sinclair Waycott
Aditya Kusko
Chavez Briddick
Aruna Figeroa
Salvatore Stockham
Octavia Malet
Salvatore Stockham
James Butt
Aika Inouye
Julie Stenseth
Darci Poquette
Leja Caldarera
Aruna Figeroa
Octavia Malet
Costa Dilliard
Sinclair Waycott
Tony Foller
Ashley Doe
Isabel Bowley
Ivar Paprocki
David Darakjy
Leon Oldroyd
Leon Oldroyd
Maisha Rulapaugh
Isabel Bowley
Kaitlin Ostrosky
Mayumi Kolmetz
Silvio Slusarski
Munro Ferencz
Munro Ferencz
Chavez Briddick
David Darakjy
Deepesh Chui
Greenwood Bolognia
Darci Poquette
Aruna Figeroa
Darci Poquette
Greenwood Bolognia
Octavia Malet
Maria Marrier
Costa Dilliard
Ashley Doe
Cody Saylors
Wickens Nestle
IdCountryDate
1000Australia2025-09-28
1001Brazil2025-09-24
1002Japan2025-10-03
1003India2025-10-09
1004Spain2025-10-13
1005Spain2025-09-28
1006France2025-10-08
1007France2025-10-11
1008Germany2025-10-17
1009India2025-10-01
1010Canada2025-09-28
1011Australia2025-10-12
1012Italy2025-10-09
1013India2025-10-19
1014Russia2025-10-15
1015Japan2025-10-07
1016Canada2025-09-26
1017Argentina2025-10-16
1018Russia2025-10-02
1019Australia2025-10-07
1020France2025-10-02
1021Canada2025-09-28
1022India2025-10-14
1023Canada2025-10-11
1024Argentina2025-10-12
1025Italy2025-09-26
1026Australia2025-10-07
1027Italy2025-10-21
1028Japan2025-10-15
1029Italy2025-10-03
1030Australia2025-10-20
1031Russia2025-10-21
1032India2025-10-06
1033Australia2025-10-05
1034France2025-10-04
1035Brazil2025-10-19
1036France2025-09-30
1037Brazil2025-09-26
1038France2025-09-24
1039Australia2025-09-26
1040Argentina2025-10-13
1041Russia2025-10-04
1042Japan2025-09-24
1043Brazil2025-10-18
1044Australia2025-09-23
1045India2025-09-28
1046Argentina2025-09-25
1047Italy2025-10-19
1048Russia2025-10-10
1049Germany2025-10-20

On-Demand Data

NameIdCountryDate
Johnson Sergi1000Argentina2025-10-21
David Darakjy1001India2025-10-18
Aika Inouye1002Brazil2025-10-11
Smith Glick1003Germany2025-10-08
Smith Glick1004Japan2025-09-26
Greenwood Bolognia1005Germany2025-10-15
Tony Foller1006Japan2025-09-26
Murillo Malet1007Russia2025-10-16
Johnson Sergi1008France2025-09-23
Silvio Slusarski1009Australia2025-10-01
Nicolas Iturbide1010Brazil2025-10-13
Sinclair Waycott1011Russia2025-10-15
David Darakjy1012United Kingdom2025-10-18
Deepesh Chui1013India2025-10-08
Nicolas Iturbide1014United Kingdom2025-09-24
Murillo Malet1015Australia2025-09-25
Nicolas Iturbide1016France2025-10-11
Chavez Briddick1017Spain2025-10-06
Maisha Rulapaugh1018Germany2025-10-09
James Butt1019Germany2025-10-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kadeem FlosiItalyAnna Fali QUALIFIED
Leon OldroydSpainIvan Magalhaes RENEWAL
Maisha RulapaughCanadaAmy Elsner NEW
Wickens NestleArgentinaIvan Magalhaes NEGOTIATION
Octavia MaletUnited KingdomAnna Fali NEW
Sinclair WaycottBrazilAsiya Javayant QUALIFIED
Munro FerenczItalyStephen Shaw RENEWAL
Claire TollnerCanadaIvan Magalhaes UNQUALIFIED
Aditya KuskoUnited KingdomIvan Magalhaes NEGOTIATION
Leja CaldareraItalyBernardo Dominic RENEWAL
James ButtIndiaIoni Bowcher PROPOSAL
Juan WieserArgentinaIoni Bowcher RENEWAL
Clifford RimIndiaElwin Sharvill RENEWAL
Emily WhobreyFranceStephen Shaw RENEWAL
Silvio SlusarskiGermanyIoni Bowcher RENEWAL
Emily WhobreyCanadaStephen Shaw PROPOSAL
Jones VocelkaRussiaIoni Bowcher UNQUALIFIED
Nicolas IturbideRussiaBernardo Dominic UNQUALIFIED
Isabel BowleyBrazilStephen Shaw RENEWAL
Ricardo GauchoBrazilOnyama Limba QUALIFIED
Jefferson SchemmerRussiaAmy Elsner QUALIFIED
Aruna FigeroaItalyElwin Sharvill RENEWAL
Smith GlickFranceAmy Elsner QUALIFIED
Murillo MaletUnited KingdomXuxue Feng NEGOTIATION
Deepesh ChuiBrazilElwin Sharvill NEGOTIATION
Johnson SergiCanadaOnyama Limba NEW
Clifford RimCanadaAsiya Javayant NEW
Isabel BowleyFranceIvan Magalhaes NEGOTIATION
Juan WieserItalyBernardo Dominic QUALIFIED
Nicolas IturbideArgentinaStephen Shaw PROPOSAL
Izzy GarufiGermanyElwin Sharvill NEGOTIATION
David DarakjyFranceIvan Magalhaes PROPOSAL
Deepesh ChuiUnited KingdomXuxue Feng QUALIFIED
Mujtaba NickaAustraliaBernardo Dominic QUALIFIED
Silvio SlusarskiJapanIoni Bowcher UNQUALIFIED
Ivar PaprockiIndiaBernardo Dominic QUALIFIED
Julie StensethFranceAnna Fali NEGOTIATION
Aika InouyeBrazilAnna Fali PROPOSAL
Maisha RulapaughSpainIoni Bowcher UNQUALIFIED
David DarakjyUnited KingdomElwin Sharvill 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>