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
Julie StensethBrazilIvan Magalhaes QUALIFIED
Kaitlin OstroskySpainAnna Fali NEGOTIATION
Leja CaldareraIndiaAsiya Javayant UNQUALIFIED
Jennifer AmigonArgentinaAnna Fali UNQUALIFIED
Kadeem FlosiFranceOnyama Limba RENEWAL
Greenwood BologniaGermanyXuxue Feng RENEWAL
Maria MarrierJapanAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaBernardo Dominic QUALIFIED
Misaki RoysterFranceElwin Sharvill RENEWAL
Greenwood BologniaBrazilElwin Sharvill NEW
Aika InouyeSpainStephen Shaw PROPOSAL
Antonio CaudyGermanyXuxue Feng NEGOTIATION
Deepesh ChuiIndiaStephen Shaw QUALIFIED
Rodrigues CampainItalyBernardo Dominic QUALIFIED
Morrow RutaFranceBernardo Dominic UNQUALIFIED
Alejandro PerinGermanyOnyama Limba NEGOTIATION
Antonio CaudyRussiaBernardo Dominic PROPOSAL
Aika InouyeGermanyIoni Bowcher NEGOTIATION
Morrow RutaIndiaBernardo Dominic NEGOTIATION
Jones VocelkaRussiaAnna Fali UNQUALIFIED
Murillo MaletCanadaElwin Sharvill RENEWAL
Leon OldroydJapanXuxue Feng NEGOTIATION
Kadeem FlosiBrazilBernardo Dominic RENEWAL
Maria MarrierArgentinaIoni Bowcher UNQUALIFIED
Kadeem FlosiArgentinaAsiya Javayant NEW
Rodrigues CampainBrazilBernardo Dominic NEGOTIATION
Kaitlin OstroskyItalyXuxue Feng NEGOTIATION
Antonio CaudyBrazilAmy Elsner NEW
Aika InouyeBrazilElwin Sharvill NEGOTIATION
Ivar PaprockiItalyOnyama Limba PROPOSAL
Jeanfrancois VenereUnited KingdomAsiya Javayant RENEWAL
Claire TollnerIndiaXuxue Feng PROPOSAL
Tony FollerItalyAnna Fali UNQUALIFIED
Wickens NestleRussiaIoni Bowcher QUALIFIED
Smith GlickCanadaIoni Bowcher NEGOTIATION
Maisha RulapaughSpainElwin Sharvill NEW
Rodrigues CampainUnited KingdomXuxue Feng UNQUALIFIED
Murillo MaletBrazilStephen Shaw NEW
Jefferson SchemmerAustraliaAmy Elsner UNQUALIFIED
Maisha RulapaughRussiaElwin Sharvill QUALIFIED
Mujtaba NickaJapanBernardo Dominic UNQUALIFIED
Alejandro PerinIndiaBernardo Dominic NEGOTIATION
Mujtaba NickaSpainXuxue Feng PROPOSAL
Misaki RoysterGermanyOnyama Limba PROPOSAL
James ButtItalyOnyama Limba RENEWAL
Smith GlickUnited KingdomIoni Bowcher RENEWAL
Stacey MacleadJapanAmy Elsner NEW
Jefferson SchemmerFranceIvan Magalhaes QUALIFIED
Juan WieserArgentinaIoni Bowcher NEW
Arvin AlbaresCanadaStephen Shaw RENEWAL
Horizontal
NameCountryRepresentativeStatus
Jefferson SchemmerSpainIvan Magalhaes QUALIFIED
Arvin AlbaresRussiaXuxue Feng NEGOTIATION
Chavez BriddickFranceAsiya Javayant PROPOSAL
Johnson SergiBrazilOnyama Limba PROPOSAL
Arvin AlbaresSpainIvan Magalhaes PROPOSAL
Aruna FigeroaRussiaStephen Shaw QUALIFIED
Johnson SergiGermanyIvan Magalhaes NEW
Isabel BowleyBrazilBernardo Dominic RENEWAL
Morrow RutaFranceOnyama Limba UNQUALIFIED
Rodrigues CampainAustraliaIoni Bowcher UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Adams MorascaSpain2025-08-21Chapman, Ross E Esq NEGOTIATION15Stephen Shaw
1001Rodrigues CampainAustralia2025-09-02Printing Dimensions NEGOTIATION86Onyama Limba
1002Leon OldroydSpain2025-09-03Chapman, Ross E Esq UNQUALIFIED94Stephen Shaw
1003Murillo MaletRussia2025-09-05Chanay, Jeffrey A Esq NEW46Anna Fali
1004Salvatore StockhamUnited Kingdom2025-09-06Commercial Press NEW91Ivan Magalhaes
1005Munro FerenczFrance2025-08-12Rousseaux, Michael Esq RENEWAL36Xuxue Feng
1006Johnson SergiIndia2025-08-31Rangoni Of Florence NEGOTIATION73Onyama Limba
1007Leon OldroydRussia2025-08-20King, Christopher A Esq PROPOSAL46Elwin Sharvill
1008Faith GillianSpain2025-09-02Commercial Press UNQUALIFIED14Amy Elsner
1009Stacey MacleadSpain2025-08-31Feltz Printing Service PROPOSAL93Onyama Limba
1010Chavez BriddickAustralia2025-08-22Rangoni Of Florence NEGOTIATION13Ioni Bowcher
1011Alejandro PerinBrazil2025-09-09Rangoni Of Florence PROPOSAL57Amy Elsner
1012Kaitlin OstroskyGermany2025-08-31Truhlar And Truhlar Attys PROPOSAL17Bernardo Dominic
1013Sinclair WaycottJapan2025-08-22Chapman, Ross E Esq NEW9Stephen Shaw
1014David DarakjyCanada2025-08-19Commercial Press NEW48Onyama Limba
1015Stacey MacleadUnited Kingdom2025-08-14King, Christopher A Esq RENEWAL83Elwin Sharvill
1016Sinclair WaycottJapan2025-08-11Truhlar And Truhlar Attys QUALIFIED86Bernardo Dominic
1017Darci PoquetteCanada2025-08-14Rangoni Of Florence NEGOTIATION67Asiya Javayant
1018Rodrigues CampainRussia2025-08-24Dorl, James J Esq NEGOTIATION38Stephen Shaw
1019Morrow RutaArgentina2025-08-25Commercial Press NEW57Elwin Sharvill
1020Murillo MaletGermany2025-09-06King, Christopher A Esq NEGOTIATION71Asiya Javayant
1021Leon OldroydBrazil2025-08-28Chemel, James L Cpa UNQUALIFIED57Stephen Shaw
1022Izzy GarufiItaly2025-08-12Printing Dimensions RENEWAL11Anna Fali
1023Mayumi KolmetzBrazil2025-08-11Buckley Miller Wright QUALIFIED22Asiya Javayant
1024Alejandro PerinUnited Kingdom2025-09-09Chemel, James L Cpa NEGOTIATION39Anna Fali
1025Cody SaylorsFrance2025-08-27Morlong Associates QUALIFIED77Bernardo Dominic
1026Octavia MaletArgentina2025-08-16Morlong Associates RENEWAL3Onyama Limba
1027Tony FollerSpain2025-08-12Chanay, Jeffrey A Esq PROPOSAL6Bernardo Dominic
1028Johnson SergiFrance2025-08-16Rousseaux, Michael Esq NEW64Onyama Limba
1029Alejandro PerinUnited Kingdom2025-08-29Rangoni Of Florence PROPOSAL5Stephen Shaw
1030Alejandro PerinRussia2025-08-15King, Christopher A Esq RENEWAL17Asiya Javayant
1031Greenwood BologniaArgentina2025-09-06Feiner Bros NEGOTIATION83Ioni Bowcher
1032Deepesh ChuiJapan2025-09-06Printing Dimensions PROPOSAL32Asiya Javayant
1033Antonio CaudyIndia2025-09-06Dorl, James J Esq QUALIFIED20Elwin Sharvill
1034Aruna FigeroaItaly2025-09-04Feiner Bros RENEWAL39Asiya Javayant
1035Francesco ShinkoRussia2025-08-19Truhlar And Truhlar Attys RENEWAL7Bernardo Dominic
1036Cody SaylorsFrance2025-08-23Chanay, Jeffrey A Esq NEGOTIATION27Amy Elsner
1037Juan WieserUnited Kingdom2025-08-26Chanay, Jeffrey A Esq PROPOSAL14Onyama Limba
1038Silvio SlusarskiSpain2025-09-07Feltz Printing Service NEW48Ioni Bowcher
1039Faith GillianItaly2025-09-05Rangoni Of Florence UNQUALIFIED95Ioni Bowcher
1040Stacey MacleadArgentina2025-09-04Buckley Miller Wright NEGOTIATION34Asiya Javayant
1041Alejandro PerinCanada2025-08-25Commercial Press PROPOSAL96Asiya Javayant
1042Octavia MaletFrance2025-08-11Chanay, Jeffrey A Esq UNQUALIFIED3Amy Elsner
1043Maria MarrierBrazil2025-08-13Rangoni Of Florence PROPOSAL68Xuxue Feng
1044Maria MarrierUnited Kingdom2025-08-16Rousseaux, Michael Esq NEGOTIATION52Elwin Sharvill
1045Nicolas IturbideFrance2025-09-03Morlong Associates NEW7Bernardo Dominic
1046Francesco ShinkoRussia2025-08-19Rangoni Of Florence RENEWAL25Elwin Sharvill
1047Costa DilliardJapan2025-09-09Truhlar And Truhlar Attys QUALIFIED99Xuxue Feng
1048Faith GillianJapan2025-08-28King, Christopher A Esq NEGOTIATION89Bernardo Dominic
1049Aika InouyeJapan2025-08-30Rangoni Of Florence RENEWAL31Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Adams MorascaArgentinaOnyama Limba NEGOTIATION
Leja CaldareraRussiaAsiya Javayant UNQUALIFIED
Smith GlickIndiaAsiya Javayant NEW
Mujtaba NickaJapanBernardo Dominic QUALIFIED
Greenwood BologniaIndiaBernardo Dominic QUALIFIED
Isabel BowleyFranceIoni Bowcher NEGOTIATION
Mujtaba NickaJapanStephen Shaw PROPOSAL
Alejandro PerinRussiaElwin Sharvill QUALIFIED
Arvin AlbaresRussiaBernardo Dominic PROPOSAL
Deepesh ChuiJapanIoni Bowcher QUALIFIED
Mayumi KolmetzSpainAsiya Javayant UNQUALIFIED
Sinclair WaycottUnited KingdomStephen Shaw NEGOTIATION
Aditya KuskoArgentinaAsiya Javayant UNQUALIFIED
Antonio CaudyJapanAmy Elsner QUALIFIED
Clifford RimItalyOnyama Limba NEGOTIATION
Octavia MaletItalyBernardo Dominic RENEWAL
Ivar PaprockiSpainStephen Shaw UNQUALIFIED
David DarakjyBrazilIoni Bowcher RENEWAL
Kadeem FlosiUnited KingdomBernardo Dominic PROPOSAL
Wickens NestleRussiaElwin Sharvill RENEWAL
Misaki RoysterAustraliaAsiya Javayant NEW
Cody SaylorsJapanAsiya Javayant QUALIFIED
Smith GlickArgentinaElwin Sharvill UNQUALIFIED
Greenwood BologniaIndiaBernardo Dominic RENEWAL
Tony FollerCanadaElwin Sharvill NEGOTIATION
David DarakjyAustraliaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereBrazilAnna Fali NEGOTIATION
Aika InouyeBrazilStephen Shaw PROPOSAL
Mujtaba NickaSpainBernardo Dominic NEGOTIATION
Antonio CaudyGermanyOnyama Limba PROPOSAL
Juan WieserBrazilIvan Magalhaes UNQUALIFIED
Tony FollerItalyElwin Sharvill NEGOTIATION
Greenwood BologniaRussiaIvan Magalhaes NEW
Smith GlickUnited KingdomXuxue Feng NEGOTIATION
Maria MarrierJapanIvan Magalhaes UNQUALIFIED
Mujtaba NickaArgentinaXuxue Feng NEW
Murillo MaletFranceIvan Magalhaes QUALIFIED
Salvatore StockhamJapanAsiya Javayant UNQUALIFIED
Emily WhobreyGermanyAnna Fali NEGOTIATION
Chavez BriddickRussiaElwin Sharvill NEGOTIATION
Emily WhobreyCanadaAsiya Javayant UNQUALIFIED
Isabel BowleyBrazilElwin Sharvill NEGOTIATION
Munro FerenczUnited KingdomOnyama Limba NEGOTIATION
Emily WhobreyAustraliaElwin Sharvill QUALIFIED
Nicolas IturbideSpainOnyama Limba PROPOSAL
Antonio CaudyCanadaElwin Sharvill NEW
Johnson SergiIndiaAsiya Javayant QUALIFIED
Johnson SergiFranceAnna Fali PROPOSAL
Octavia MaletCanadaStephen Shaw NEW
Leon OldroydIndiaAsiya Javayant NEW
Frozen Columns
Name
Ivar Paprocki
Stacey Maclead
Ricardo Gaucho
Antonio Caudy
Ricardo Gaucho
Stacey Maclead
Wickens Nestle
Murillo Malet
Johnson Sergi
Stacey Maclead
Stacey Maclead
Mujtaba Nicka
Jefferson Schemmer
Aika Inouye
Jones Vocelka
Chavez Briddick
Silvio Slusarski
Julie Stenseth
Ashley Doe
Ricardo Gaucho
Nicolas Iturbide
Jones Vocelka
Adams Morasca
Aditya Kusko
Costa Dilliard
Cody Saylors
Leon Oldroyd
Deepesh Chui
Murillo Malet
James Butt
Smith Glick
Clifford Rim
Kaitlin Ostrosky
Faith Gillian
Silvio Slusarski
Kaitlin Ostrosky
Leon Oldroyd
Jefferson Schemmer
Aditya Kusko
Clifford Rim
Mayumi Kolmetz
Isabel Bowley
Nicolas Iturbide
Maisha Rulapaugh
James Butt
Misaki Royster
Antonio Caudy
Greenwood Bolognia
Aditya Kusko
Kaitlin Ostrosky
IdCountryDate
1000Argentina2025-08-15
1001Italy2025-09-01
1002India2025-08-18
1003Canada2025-08-20
1004United Kingdom2025-09-01
1005Italy2025-08-14
1006Australia2025-08-25
1007Australia2025-08-19
1008India2025-08-26
1009Canada2025-08-15
1010France2025-08-22
1011Russia2025-09-06
1012India2025-08-16
1013Canada2025-08-31
1014United Kingdom2025-08-18
1015Germany2025-08-26
1016Canada2025-09-01
1017Japan2025-08-25
1018Japan2025-08-17
1019France2025-08-29
1020Spain2025-08-18
1021Australia2025-08-14
1022India2025-08-13
1023Spain2025-08-23
1024Russia2025-08-17
1025Russia2025-09-06
1026France2025-09-04
1027Italy2025-08-12
1028Spain2025-09-02
1029France2025-08-28
1030Spain2025-08-24
1031Spain2025-08-20
1032United Kingdom2025-08-27
1033India2025-08-20
1034Russia2025-08-26
1035Argentina2025-08-17
1036Germany2025-08-27
1037Canada2025-08-25
1038United Kingdom2025-08-29
1039Brazil2025-08-15
1040United Kingdom2025-08-27
1041Canada2025-08-25
1042Russia2025-08-26
1043Italy2025-08-18
1044Australia2025-08-30
1045United Kingdom2025-09-08
1046Italy2025-08-28
1047Brazil2025-08-21
1048France2025-08-16
1049Russia2025-09-06

On-Demand Data

NameIdCountryDate
Isabel Bowley1000Germany2025-08-29
Faith Gillian1001Germany2025-09-03
Salvatore Stockham1002Australia2025-09-03
Juan Wieser1003Germany2025-08-23
Ricardo Gaucho1004Italy2025-08-12
Smith Glick1005United Kingdom2025-08-25
Julie Stenseth1006France2025-08-17
Murillo Malet1007Argentina2025-08-27
Claire Tollner1008Italy2025-08-25
Murillo Malet1009Argentina2025-08-30
Ricardo Gaucho1010Canada2025-09-01
Tony Foller1011United Kingdom2025-08-13
Johnson Sergi1012France2025-08-12
David Darakjy1013Russia2025-08-23
Ricardo Gaucho1014Italy2025-08-20
Deepesh Chui1015Japan2025-09-01
Faith Gillian1016Russia2025-09-08
Munro Ferencz1017France2025-08-16
Kaitlin Ostrosky1018Russia2025-09-04
Murillo Malet1019France2025-09-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Alejandro PerinGermanyIoni Bowcher NEW
Aika InouyeBrazilOnyama Limba RENEWAL
Ricardo GauchoSpainAmy Elsner NEGOTIATION
Emily WhobreyFranceBernardo Dominic RENEWAL
Silvio SlusarskiBrazilIoni Bowcher QUALIFIED
Clifford RimGermanyXuxue Feng NEW
Munro FerenczAustraliaStephen Shaw PROPOSAL
Misaki RoysterIndiaStephen Shaw NEW
Clifford RimItalyXuxue Feng RENEWAL
Costa DilliardSpainAsiya Javayant UNQUALIFIED
Cody SaylorsSpainAmy Elsner PROPOSAL
Adams MorascaArgentinaBernardo Dominic QUALIFIED
Emily WhobreyJapanIoni Bowcher UNQUALIFIED
Izzy GarufiUnited KingdomElwin Sharvill NEW
Maria MarrierArgentinaElwin Sharvill NEGOTIATION
Tony FollerRussiaAsiya Javayant RENEWAL
David DarakjyAustraliaStephen Shaw NEW
Francesco ShinkoUnited KingdomXuxue Feng QUALIFIED
Aika InouyeAustraliaXuxue Feng NEW
Clifford RimBrazilBernardo Dominic NEW
Ricardo GauchoFranceAmy Elsner QUALIFIED
Misaki RoysterUnited KingdomStephen Shaw RENEWAL
Costa DilliardCanadaIvan Magalhaes PROPOSAL
Cody SaylorsSpainXuxue Feng NEGOTIATION
Aruna FigeroaJapanIvan Magalhaes NEW
Juan WieserFranceXuxue Feng NEGOTIATION
Smith GlickFranceXuxue Feng PROPOSAL
Jennifer AmigonIndiaAmy Elsner NEGOTIATION
Deepesh ChuiRussiaStephen Shaw PROPOSAL
Stacey MacleadIndiaStephen Shaw NEW
Darci PoquetteGermanyIvan Magalhaes PROPOSAL
Ricardo GauchoSpainBernardo Dominic NEW
Francesco ShinkoJapanXuxue Feng QUALIFIED
Aika InouyeJapanOnyama Limba RENEWAL
Clifford RimBrazilIvan Magalhaes PROPOSAL
Jennifer AmigonAustraliaBernardo Dominic RENEWAL
Rodrigues CampainGermanyBernardo Dominic PROPOSAL
Mujtaba NickaCanadaElwin Sharvill QUALIFIED
Octavia MaletBrazilXuxue Feng RENEWAL
Salvatore StockhamAustraliaElwin Sharvill 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>