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
Leon OldroydBrazilAmy Elsner QUALIFIED
Jones VocelkaCanadaIvan Magalhaes UNQUALIFIED
Jefferson SchemmerFranceStephen Shaw RENEWAL
Rodrigues CampainBrazilBernardo Dominic NEGOTIATION
Johnson SergiAustraliaAnna Fali NEW
Kadeem FlosiArgentinaAsiya Javayant UNQUALIFIED
Mujtaba NickaAustraliaXuxue Feng NEW
Tony FollerSpainAsiya Javayant UNQUALIFIED
Kaitlin OstroskyRussiaIvan Magalhaes RENEWAL
Adams MorascaArgentinaAsiya Javayant PROPOSAL
Faith GillianFranceAsiya Javayant RENEWAL
Rodrigues CampainUnited KingdomAsiya Javayant NEW
Wickens NestleJapanXuxue Feng QUALIFIED
Rodrigues CampainGermanyAnna Fali UNQUALIFIED
Ricardo GauchoSpainBernardo Dominic NEGOTIATION
Kadeem FlosiArgentinaAmy Elsner NEW
Aika InouyeGermanyAsiya Javayant UNQUALIFIED
Clifford RimAustraliaAsiya Javayant RENEWAL
Claire TollnerBrazilIvan Magalhaes UNQUALIFIED
Stacey MacleadCanadaXuxue Feng NEGOTIATION
Stacey MacleadFranceElwin Sharvill PROPOSAL
Misaki RoysterGermanyOnyama Limba UNQUALIFIED
Chavez BriddickAustraliaElwin Sharvill NEGOTIATION
Silvio SlusarskiItalyIvan Magalhaes PROPOSAL
Salvatore StockhamFranceOnyama Limba NEW
Johnson SergiUnited KingdomIvan Magalhaes NEW
Nicolas IturbideGermanyElwin Sharvill PROPOSAL
Jefferson SchemmerFranceElwin Sharvill NEW
Nicolas IturbideArgentinaElwin Sharvill UNQUALIFIED
Alejandro PerinItalyElwin Sharvill UNQUALIFIED
Johnson SergiCanadaAnna Fali UNQUALIFIED
Maisha RulapaughUnited KingdomIvan Magalhaes RENEWAL
Nicolas IturbideGermanyAmy Elsner RENEWAL
Wickens NestleArgentinaAnna Fali NEW
Jefferson SchemmerBrazilStephen Shaw NEW
Ivar PaprockiSpainAmy Elsner NEW
Isabel BowleyAustraliaBernardo Dominic NEW
Francesco ShinkoUnited KingdomOnyama Limba UNQUALIFIED
Jennifer AmigonArgentinaOnyama Limba UNQUALIFIED
Octavia MaletAustraliaAnna Fali RENEWAL
Jones VocelkaRussiaXuxue Feng PROPOSAL
Silvio SlusarskiArgentinaIoni Bowcher NEW
Maria MarrierArgentinaElwin Sharvill QUALIFIED
Murillo MaletUnited KingdomOnyama Limba NEW
Isabel BowleyUnited KingdomElwin Sharvill QUALIFIED
Smith GlickJapanOnyama Limba NEGOTIATION
Clifford RimGermanyBernardo Dominic UNQUALIFIED
Octavia MaletBrazilStephen Shaw RENEWAL
Nicolas IturbideBrazilBernardo Dominic QUALIFIED
Octavia MaletIndiaOnyama Limba QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aruna FigeroaJapanElwin Sharvill RENEWAL
Emily WhobreyArgentinaAmy Elsner UNQUALIFIED
Claire TollnerSpainAmy Elsner UNQUALIFIED
Misaki RoysterUnited KingdomIvan Magalhaes PROPOSAL
James ButtUnited KingdomIvan Magalhaes UNQUALIFIED
Aika InouyeFranceBernardo Dominic QUALIFIED
Deepesh ChuiAustraliaAnna Fali PROPOSAL
Aditya KuskoJapanAnna Fali NEW
Jefferson SchemmerUnited KingdomStephen Shaw RENEWAL
Jennifer AmigonGermanyBernardo Dominic RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Francesco ShinkoArgentina2026-05-01Truhlar And Truhlar Attys QUALIFIED23Bernardo Dominic
1001Francesco ShinkoJapan2026-04-26Chemel, James L Cpa NEW41Ioni Bowcher
1002Jefferson SchemmerFrance2026-05-02Morlong Associates RENEWAL30Onyama Limba
1003Maisha RulapaughItaly2026-05-01King, Christopher A Esq QUALIFIED32Stephen Shaw
1004Jefferson SchemmerAustralia2026-05-12King, Christopher A Esq UNQUALIFIED29Asiya Javayant
1005Morrow RutaFrance2026-05-05Printing Dimensions UNQUALIFIED17Xuxue Feng
1006Izzy GarufiBrazil2026-05-15Dorl, James J Esq NEGOTIATION18Bernardo Dominic
1007Jefferson SchemmerCanada2026-04-27Chemel, James L Cpa RENEWAL97Elwin Sharvill
1008Clifford RimGermany2026-04-27Buckley Miller Wright NEW89Asiya Javayant
1009Rodrigues CampainCanada2026-05-03Truhlar And Truhlar Attys RENEWAL20Ivan Magalhaes
1010Maria MarrierItaly2026-05-21Chemel, James L Cpa NEGOTIATION80Asiya Javayant
1011Jeanfrancois VenereIndia2026-05-17Chanay, Jeffrey A Esq QUALIFIED17Xuxue Feng
1012Jefferson SchemmerBrazil2026-05-01Printing Dimensions NEGOTIATION92Ioni Bowcher
1013Leja CaldareraIndia2026-05-10Feiner Bros NEGOTIATION70Asiya Javayant
1014James ButtGermany2026-05-15Chapman, Ross E Esq QUALIFIED31Ioni Bowcher
1015Nicolas IturbideIndia2026-05-21Morlong Associates RENEWAL65Xuxue Feng
1016Faith GillianRussia2026-05-20Feltz Printing Service NEW64Amy Elsner
1017Costa DilliardRussia2026-05-05Rangoni Of Florence UNQUALIFIED13Bernardo Dominic
1018Aditya KuskoUnited Kingdom2026-04-28Truhlar And Truhlar Attys UNQUALIFIED88Ioni Bowcher
1019Nicolas IturbideAustralia2026-05-20Feltz Printing Service NEW76Bernardo Dominic
1020Cody SaylorsFrance2026-05-01Feiner Bros QUALIFIED44Amy Elsner
1021Stacey MacleadGermany2026-05-07Feiner Bros NEW10Amy Elsner
1022Kaitlin OstroskyRussia2026-05-22Chanay, Jeffrey A Esq NEW93Xuxue Feng
1023Rodrigues CampainFrance2026-04-27Feltz Printing Service NEGOTIATION24Amy Elsner
1024Salvatore StockhamBrazil2026-05-22Rousseaux, Michael Esq PROPOSAL34Ivan Magalhaes
1025Octavia MaletArgentina2026-05-16Chapman, Ross E Esq RENEWAL18Anna Fali
1026Leon OldroydBrazil2026-05-05Commercial Press RENEWAL73Amy Elsner
1027Adams MorascaBrazil2026-05-18Feiner Bros QUALIFIED90Ioni Bowcher
1028Octavia MaletIndia2026-05-17King, Christopher A Esq NEGOTIATION12Xuxue Feng
1029Arvin AlbaresCanada2026-05-03Rousseaux, Michael Esq PROPOSAL11Stephen Shaw
1030Stacey MacleadIndia2026-05-09Rangoni Of Florence NEW10Amy Elsner
1031Emily WhobreyIndia2026-05-11Commercial Press PROPOSAL85Elwin Sharvill
1032Isabel BowleySpain2026-05-07Chapman, Ross E Esq UNQUALIFIED70Asiya Javayant
1033Octavia MaletGermany2026-05-07Dorl, James J Esq PROPOSAL20Elwin Sharvill
1034Stacey MacleadGermany2026-05-22Chemel, James L Cpa NEW75Ioni Bowcher
1035Arvin AlbaresSpain2026-05-03Morlong Associates QUALIFIED68Ioni Bowcher
1036James ButtFrance2026-05-12Feltz Printing Service NEW1Ivan Magalhaes
1037Smith GlickUnited Kingdom2026-05-12King, Christopher A Esq RENEWAL8Amy Elsner
1038Munro FerenczArgentina2026-05-18Feltz Printing Service PROPOSAL41Bernardo Dominic
1039Chavez BriddickJapan2026-04-30Chemel, James L Cpa NEGOTIATION37Ivan Magalhaes
1040Nicolas IturbideIndia2026-05-02Morlong Associates NEGOTIATION31Onyama Limba
1041Ricardo GauchoBrazil2026-05-18Chemel, James L Cpa PROPOSAL67Bernardo Dominic
1042Stacey MacleadCanada2026-05-23Chanay, Jeffrey A Esq QUALIFIED3Bernardo Dominic
1043Silvio SlusarskiUnited Kingdom2026-05-13Chemel, James L Cpa NEW98Ivan Magalhaes
1044Antonio CaudyRussia2026-04-25Feltz Printing Service UNQUALIFIED55Stephen Shaw
1045Munro FerenczBrazil2026-04-29Feiner Bros NEGOTIATION27Stephen Shaw
1046Darci PoquetteArgentina2026-04-26Feltz Printing Service QUALIFIED74Ioni Bowcher
1047Francesco ShinkoIndia2026-05-08Chapman, Ross E Esq RENEWAL9Asiya Javayant
1048Johnson SergiItaly2026-04-29Dorl, James J Esq UNQUALIFIED13Elwin Sharvill
1049Aika InouyeIndia2026-04-29Chemel, James L Cpa PROPOSAL92Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Stacey MacleadAustraliaIoni Bowcher PROPOSAL
Kadeem FlosiAustraliaIvan Magalhaes NEGOTIATION
Deepesh ChuiCanadaOnyama Limba PROPOSAL
Johnson SergiAustraliaBernardo Dominic UNQUALIFIED
Darci PoquetteSpainBernardo Dominic UNQUALIFIED
Cody SaylorsSpainAsiya Javayant RENEWAL
Juan WieserIndiaBernardo Dominic QUALIFIED
Isabel BowleyCanadaXuxue Feng UNQUALIFIED
Johnson SergiFranceElwin Sharvill UNQUALIFIED
Aika InouyeCanadaOnyama Limba RENEWAL
Aruna FigeroaIndiaAmy Elsner QUALIFIED
Ivar PaprockiFranceBernardo Dominic QUALIFIED
Adams MorascaUnited KingdomAmy Elsner UNQUALIFIED
David DarakjyIndiaIoni Bowcher NEGOTIATION
Adams MorascaIndiaAmy Elsner NEW
Mujtaba NickaArgentinaIoni Bowcher NEGOTIATION
Emily WhobreyAustraliaBernardo Dominic NEW
Francesco ShinkoRussiaStephen Shaw PROPOSAL
Murillo MaletGermanyStephen Shaw PROPOSAL
Misaki RoysterArgentinaBernardo Dominic UNQUALIFIED
Smith GlickRussiaAnna Fali PROPOSAL
Silvio SlusarskiCanadaAnna Fali UNQUALIFIED
Chavez BriddickRussiaStephen Shaw RENEWAL
Clifford RimArgentinaAsiya Javayant QUALIFIED
Arvin AlbaresRussiaXuxue Feng QUALIFIED
Aika InouyeItalyAnna Fali NEW
Clifford RimFranceBernardo Dominic RENEWAL
Greenwood BologniaArgentinaStephen Shaw PROPOSAL
Maria MarrierIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzItalyAnna Fali RENEWAL
Deepesh ChuiSpainIoni Bowcher NEGOTIATION
David DarakjyItalyAmy Elsner RENEWAL
Leon OldroydJapanIoni Bowcher UNQUALIFIED
David DarakjyGermanyXuxue Feng PROPOSAL
Aika InouyeFranceAnna Fali PROPOSAL
Leja CaldareraGermanyAnna Fali NEW
Aditya KuskoAustraliaAnna Fali NEGOTIATION
Juan WieserUnited KingdomXuxue Feng UNQUALIFIED
Misaki RoysterUnited KingdomIvan Magalhaes NEGOTIATION
Murillo MaletCanadaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereUnited KingdomIvan Magalhaes NEW
Johnson SergiRussiaElwin Sharvill QUALIFIED
Aruna FigeroaSpainOnyama Limba PROPOSAL
Smith GlickArgentinaAnna Fali RENEWAL
Nicolas IturbideJapanAmy Elsner RENEWAL
Mayumi KolmetzAustraliaAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomOnyama Limba UNQUALIFIED
Silvio SlusarskiJapanAsiya Javayant RENEWAL
Isabel BowleyCanadaIoni Bowcher UNQUALIFIED
Murillo MaletRussiaIoni Bowcher PROPOSAL
Frozen Columns
Name
Isabel Bowley
James Butt
Emily Whobrey
Isabel Bowley
Antonio Caudy
Emily Whobrey
Aika Inouye
Clifford Rim
Antonio Caudy
Sinclair Waycott
Maisha Rulapaugh
Johnson Sergi
Rodrigues Campain
Greenwood Bolognia
Ricardo Gaucho
Greenwood Bolognia
Arvin Albares
Isabel Bowley
Leja Caldarera
Aika Inouye
Ricardo Gaucho
Sinclair Waycott
Adams Morasca
David Darakjy
Francesco Shinko
Arvin Albares
Francesco Shinko
Munro Ferencz
Claire Tollner
Nicolas Iturbide
Kaitlin Ostrosky
Emily Whobrey
Aruna Figeroa
Stacey Maclead
Johnson Sergi
Arvin Albares
James Butt
Kaitlin Ostrosky
Morrow Ruta
Kadeem Flosi
Maria Marrier
Darci Poquette
Chavez Briddick
Leja Caldarera
Jones Vocelka
Kaitlin Ostrosky
Juan Wieser
Sinclair Waycott
James Butt
Murillo Malet
IdCountryDate
1000India2026-05-21
1001United Kingdom2026-04-30
1002India2026-05-11
1003Japan2026-05-04
1004India2026-05-12
1005Spain2026-05-14
1006France2026-05-19
1007Italy2026-05-18
1008Germany2026-05-21
1009Brazil2026-05-03
1010France2026-04-29
1011Germany2026-04-27
1012Germany2026-05-16
1013Canada2026-05-18
1014Japan2026-05-16
1015France2026-05-18
1016Brazil2026-05-06
1017Spain2026-05-18
1018India2026-05-23
1019United Kingdom2026-05-14
1020India2026-05-06
1021Australia2026-05-15
1022France2026-05-21
1023Brazil2026-05-21
1024Germany2026-04-28
1025Japan2026-04-24
1026Russia2026-05-16
1027Japan2026-05-06
1028Argentina2026-05-18
1029Brazil2026-05-23
1030France2026-05-06
1031Japan2026-05-13
1032Canada2026-05-23
1033Brazil2026-05-15
1034Italy2026-04-27
1035Argentina2026-05-22
1036Spain2026-05-08
1037Canada2026-04-24
1038Spain2026-05-15
1039Japan2026-04-30
1040Canada2026-05-08
1041Italy2026-04-29
1042Brazil2026-04-26
1043Brazil2026-05-01
1044India2026-05-06
1045France2026-04-30
1046France2026-05-14
1047France2026-05-04
1048Spain2026-04-27
1049United Kingdom2026-05-22

On-Demand Data

NameIdCountryDate
Rodrigues Campain1000France2026-05-14
Antonio Caudy1001Argentina2026-05-20
Cody Saylors1002United Kingdom2026-05-03
Salvatore Stockham1003Brazil2026-05-04
Misaki Royster1004Canada2026-05-21
Wickens Nestle1005Argentina2026-05-22
Greenwood Bolognia1006United Kingdom2026-05-08
Stacey Maclead1007Italy2026-04-26
Francesco Shinko1008United Kingdom2026-05-13
Silvio Slusarski1009Australia2026-05-19
Cody Saylors1010Japan2026-05-06
Johnson Sergi1011Germany2026-05-01
Costa Dilliard1012Germany2026-04-29
Darci Poquette1013Italy2026-05-05
Ashley Doe1014Argentina2026-05-11
Greenwood Bolognia1015Canada2026-05-06
Greenwood Bolognia1016Australia2026-05-08
Adams Morasca1017Japan2026-04-26
Mayumi Kolmetz1018United Kingdom2026-04-28
David Darakjy1019France2026-05-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Clifford RimFranceAnna Fali NEGOTIATION
Kaitlin OstroskyItalyElwin Sharvill QUALIFIED
Misaki RoysterJapanBernardo Dominic PROPOSAL
Johnson SergiCanadaElwin Sharvill QUALIFIED
Aditya KuskoItalyBernardo Dominic NEGOTIATION
Murillo MaletCanadaAmy Elsner RENEWAL
Antonio CaudyJapanIvan Magalhaes QUALIFIED
Isabel BowleyJapanStephen Shaw QUALIFIED
Ivar PaprockiFranceElwin Sharvill QUALIFIED
Munro FerenczItalyStephen Shaw UNQUALIFIED
Cody SaylorsFranceIoni Bowcher QUALIFIED
Deepesh ChuiIndiaIvan Magalhaes QUALIFIED
Salvatore StockhamBrazilAnna Fali UNQUALIFIED
Jefferson SchemmerGermanyStephen Shaw QUALIFIED
Aruna FigeroaJapanAsiya Javayant NEW
Stacey MacleadGermanyElwin Sharvill QUALIFIED
Rodrigues CampainJapanIvan Magalhaes NEW
Leja CaldareraItalyIvan Magalhaes PROPOSAL
Alejandro PerinCanadaIvan Magalhaes PROPOSAL
Sinclair WaycottArgentinaAsiya Javayant QUALIFIED
Rodrigues CampainItalyIvan Magalhaes UNQUALIFIED
Morrow RutaGermanyXuxue Feng NEW
Juan WieserRussiaAmy Elsner QUALIFIED
Leja CaldareraJapanBernardo Dominic UNQUALIFIED
Jefferson SchemmerFranceOnyama Limba QUALIFIED
Stacey MacleadSpainIoni Bowcher UNQUALIFIED
Smith GlickJapanElwin Sharvill UNQUALIFIED
Tony FollerJapanStephen Shaw UNQUALIFIED
Jennifer AmigonFranceBernardo Dominic NEGOTIATION
Faith GillianBrazilIvan Magalhaes QUALIFIED
Nicolas IturbideGermanyStephen Shaw NEGOTIATION
Arvin AlbaresGermanyIoni Bowcher RENEWAL
Ivar PaprockiFranceElwin Sharvill NEGOTIATION
Claire TollnerJapanIvan Magalhaes RENEWAL
Misaki RoysterRussiaAnna Fali PROPOSAL
Maria MarrierItalyAmy Elsner UNQUALIFIED
Claire TollnerAustraliaAnna Fali NEW
Juan WieserFranceAnna Fali PROPOSAL
Ivar PaprockiJapanIoni Bowcher QUALIFIED
Johnson SergiBrazilIoni Bowcher 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>