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
Mujtaba NickaItalyXuxue Feng RENEWAL
Stacey MacleadUnited KingdomElwin Sharvill PROPOSAL
Francesco ShinkoFranceXuxue Feng PROPOSAL
Jones VocelkaUnited KingdomElwin Sharvill UNQUALIFIED
Murillo MaletJapanOnyama Limba UNQUALIFIED
Maria MarrierRussiaIoni Bowcher NEGOTIATION
Izzy GarufiUnited KingdomElwin Sharvill UNQUALIFIED
Adams MorascaCanadaIvan Magalhaes QUALIFIED
Jennifer AmigonGermanyIoni Bowcher QUALIFIED
Ashley DoeUnited KingdomOnyama Limba UNQUALIFIED
Mujtaba NickaArgentinaBernardo Dominic PROPOSAL
Wickens NestleGermanyAmy Elsner NEGOTIATION
Deepesh ChuiUnited KingdomIvan Magalhaes PROPOSAL
Faith GillianItalyIvan Magalhaes QUALIFIED
James ButtCanadaXuxue Feng QUALIFIED
Ashley DoeAustraliaAnna Fali NEGOTIATION
Francesco ShinkoGermanyStephen Shaw NEW
Mujtaba NickaAustraliaAnna Fali NEGOTIATION
Arvin AlbaresIndiaBernardo Dominic NEW
Isabel BowleyItalyXuxue Feng UNQUALIFIED
Ivar PaprockiRussiaElwin Sharvill QUALIFIED
Munro FerenczFranceOnyama Limba RENEWAL
Silvio SlusarskiArgentinaBernardo Dominic NEGOTIATION
Ricardo GauchoItalyAmy Elsner UNQUALIFIED
Jones VocelkaFranceBernardo Dominic NEGOTIATION
Kadeem FlosiGermanyIvan Magalhaes NEW
Tony FollerArgentinaAmy Elsner QUALIFIED
Aika InouyeFranceAnna Fali PROPOSAL
Murillo MaletSpainAmy Elsner UNQUALIFIED
Maria MarrierUnited KingdomElwin Sharvill NEW
Arvin AlbaresRussiaStephen Shaw UNQUALIFIED
Izzy GarufiGermanyAsiya Javayant QUALIFIED
Jefferson SchemmerRussiaBernardo Dominic RENEWAL
Ivar PaprockiArgentinaIvan Magalhaes PROPOSAL
Izzy GarufiArgentinaIoni Bowcher QUALIFIED
Leja CaldareraJapanIvan Magalhaes RENEWAL
Nicolas IturbideCanadaIoni Bowcher PROPOSAL
Antonio CaudyAustraliaAsiya Javayant PROPOSAL
Mujtaba NickaGermanyAsiya Javayant QUALIFIED
Ivar PaprockiAustraliaOnyama Limba NEGOTIATION
Tony FollerIndiaOnyama Limba PROPOSAL
Kadeem FlosiIndiaElwin Sharvill QUALIFIED
Izzy GarufiJapanStephen Shaw QUALIFIED
Ricardo GauchoGermanyBernardo Dominic NEW
Smith GlickUnited KingdomElwin Sharvill PROPOSAL
Juan WieserAustraliaStephen Shaw RENEWAL
Alejandro PerinArgentinaAnna Fali NEW
Alejandro PerinAustraliaElwin Sharvill NEW
Kadeem FlosiIndiaOnyama Limba UNQUALIFIED
Faith GillianUnited KingdomBernardo Dominic RENEWAL
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiJapanStephen Shaw UNQUALIFIED
Salvatore StockhamArgentinaIvan Magalhaes PROPOSAL
Faith GillianUnited KingdomIoni Bowcher UNQUALIFIED
Octavia MaletFranceXuxue Feng PROPOSAL
David DarakjySpainOnyama Limba NEGOTIATION
Kaitlin OstroskyFranceAnna Fali NEGOTIATION
Izzy GarufiUnited KingdomIvan Magalhaes NEW
Kaitlin OstroskyArgentinaStephen Shaw NEGOTIATION
Antonio CaudyBrazilStephen Shaw UNQUALIFIED
Johnson SergiFranceIvan Magalhaes RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Sinclair WaycottCanada2026-06-04Rousseaux, Michael Esq PROPOSAL39Ioni Bowcher
1001Maria MarrierItaly2026-05-29Printing Dimensions NEW69Stephen Shaw
1002Jeanfrancois VenereJapan2026-06-05King, Christopher A Esq UNQUALIFIED38Asiya Javayant
1003Murillo MaletUnited Kingdom2026-06-05Chemel, James L Cpa NEGOTIATION46Stephen Shaw
1004Izzy GarufiItaly2026-06-01Feltz Printing Service UNQUALIFIED1Xuxue Feng
1005Johnson SergiIndia2026-05-31Morlong Associates QUALIFIED76Onyama Limba
1006Mujtaba NickaUnited Kingdom2026-05-14Buckley Miller Wright NEW87Anna Fali
1007Emily WhobreyRussia2026-05-27Feiner Bros NEGOTIATION73Anna Fali
1008Misaki RoysterGermany2026-05-24Feltz Printing Service PROPOSAL15Amy Elsner
1009Leja CaldareraArgentina2026-06-04Feiner Bros NEGOTIATION5Ivan Magalhaes
1010Nicolas IturbideArgentina2026-05-11Morlong Associates QUALIFIED84Elwin Sharvill
1011Jefferson SchemmerJapan2026-05-24Buckley Miller Wright UNQUALIFIED18Anna Fali
1012Chavez BriddickBrazil2026-06-05Truhlar And Truhlar Attys PROPOSAL57Ivan Magalhaes
1013Adams MorascaItaly2026-05-17Chemel, James L Cpa RENEWAL53Onyama Limba
1014Stacey MacleadSpain2026-05-10Commercial Press RENEWAL56Ivan Magalhaes
1015Misaki RoysterBrazil2026-05-25Rousseaux, Michael Esq PROPOSAL69Anna Fali
1016Johnson SergiSpain2026-05-21Chanay, Jeffrey A Esq QUALIFIED78Bernardo Dominic
1017Greenwood BologniaBrazil2026-06-02Feltz Printing Service UNQUALIFIED41Ivan Magalhaes
1018Salvatore StockhamArgentina2026-06-08Chanay, Jeffrey A Esq NEGOTIATION24Stephen Shaw
1019Mayumi KolmetzAustralia2026-06-01Chapman, Ross E Esq PROPOSAL80Amy Elsner
1020Munro FerenczFrance2026-06-04Feiner Bros PROPOSAL17Elwin Sharvill
1021Darci PoquetteCanada2026-06-08Chemel, James L Cpa RENEWAL76Asiya Javayant
1022Kaitlin OstroskyIndia2026-05-18Commercial Press NEW50Amy Elsner
1023Rodrigues CampainArgentina2026-05-22Chapman, Ross E Esq RENEWAL69Onyama Limba
1024Adams MorascaBrazil2026-05-12Truhlar And Truhlar Attys RENEWAL87Ivan Magalhaes
1025Mujtaba NickaGermany2026-05-15Rangoni Of Florence UNQUALIFIED26Stephen Shaw
1026Nicolas IturbideGermany2026-06-02Dorl, James J Esq QUALIFIED8Onyama Limba
1027Rodrigues CampainArgentina2026-06-04Truhlar And Truhlar Attys PROPOSAL54Onyama Limba
1028Tony FollerGermany2026-06-05Printing Dimensions NEW97Ioni Bowcher
1029Johnson SergiUnited Kingdom2026-05-31Chapman, Ross E Esq PROPOSAL16Asiya Javayant
1030Chavez BriddickFrance2026-06-06King, Christopher A Esq UNQUALIFIED89Anna Fali
1031David DarakjyFrance2026-06-03Chemel, James L Cpa NEGOTIATION78Onyama Limba
1032Greenwood BologniaRussia2026-06-06Dorl, James J Esq QUALIFIED9Stephen Shaw
1033Isabel BowleySpain2026-05-16Chemel, James L Cpa UNQUALIFIED16Stephen Shaw
1034Leon OldroydRussia2026-05-24Buckley Miller Wright NEGOTIATION29Stephen Shaw
1035Clifford RimIndia2026-05-30Truhlar And Truhlar Attys RENEWAL8Bernardo Dominic
1036Francesco ShinkoSpain2026-06-02Benton, John B Jr NEGOTIATION49Onyama Limba
1037Octavia MaletBrazil2026-05-22Buckley Miller Wright PROPOSAL35Ivan Magalhaes
1038Johnson SergiArgentina2026-05-16King, Christopher A Esq RENEWAL32Bernardo Dominic
1039Antonio CaudyBrazil2026-05-13King, Christopher A Esq NEW96Amy Elsner
1040Arvin AlbaresJapan2026-05-30Morlong Associates UNQUALIFIED24Onyama Limba
1041Sinclair WaycottItaly2026-05-29King, Christopher A Esq UNQUALIFIED36Asiya Javayant
1042Julie StensethArgentina2026-05-30Commercial Press QUALIFIED81Bernardo Dominic
1043Tony FollerJapan2026-05-24Printing Dimensions NEW62Ioni Bowcher
1044Ivar PaprockiAustralia2026-05-31Buckley Miller Wright QUALIFIED32Anna Fali
1045Tony FollerSpain2026-06-08Commercial Press RENEWAL55Onyama Limba
1046Julie StensethJapan2026-05-11Commercial Press NEGOTIATION83Ivan Magalhaes
1047Ricardo GauchoArgentina2026-05-22Printing Dimensions RENEWAL56Xuxue Feng
1048Jeanfrancois VenereBrazil2026-05-31Printing Dimensions PROPOSAL91Bernardo Dominic
1049Izzy GarufiCanada2026-05-23Feltz Printing Service PROPOSAL15Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Stacey MacleadCanadaAnna Fali NEGOTIATION
Claire TollnerIndiaStephen Shaw PROPOSAL
Mayumi KolmetzItalyElwin Sharvill RENEWAL
Darci PoquetteItalyAnna Fali NEGOTIATION
Maria MarrierUnited KingdomAsiya Javayant PROPOSAL
Alejandro PerinIndiaElwin Sharvill PROPOSAL
Kadeem FlosiUnited KingdomOnyama Limba NEW
Misaki RoysterJapanBernardo Dominic NEW
Alejandro PerinCanadaStephen Shaw UNQUALIFIED
David DarakjyBrazilAnna Fali RENEWAL
Leon OldroydFranceStephen Shaw UNQUALIFIED
Francesco ShinkoRussiaOnyama Limba RENEWAL
Julie StensethGermanyAsiya Javayant NEW
Chavez BriddickRussiaAsiya Javayant NEGOTIATION
Emily WhobreySpainXuxue Feng RENEWAL
Leon OldroydUnited KingdomStephen Shaw QUALIFIED
Leon OldroydRussiaElwin Sharvill QUALIFIED
Chavez BriddickAustraliaXuxue Feng NEW
Mujtaba NickaSpainAmy Elsner NEGOTIATION
Deepesh ChuiSpainAnna Fali QUALIFIED
Izzy GarufiAustraliaIoni Bowcher PROPOSAL
Maisha RulapaughUnited KingdomAsiya Javayant UNQUALIFIED
Deepesh ChuiRussiaOnyama Limba NEW
Mayumi KolmetzBrazilStephen Shaw QUALIFIED
Maria MarrierUnited KingdomOnyama Limba UNQUALIFIED
Kadeem FlosiSpainElwin Sharvill UNQUALIFIED
Mayumi KolmetzBrazilBernardo Dominic QUALIFIED
Misaki RoysterRussiaAsiya Javayant RENEWAL
Nicolas IturbideAustraliaAnna Fali NEW
Juan WieserJapanAsiya Javayant NEW
Kadeem FlosiBrazilOnyama Limba QUALIFIED
Aika InouyeCanadaAnna Fali NEW
Arvin AlbaresItalyElwin Sharvill RENEWAL
Silvio SlusarskiFranceStephen Shaw UNQUALIFIED
Alejandro PerinJapanAmy Elsner RENEWAL
Jeanfrancois VenereBrazilXuxue Feng QUALIFIED
Maria MarrierIndiaAsiya Javayant NEW
Adams MorascaArgentinaIvan Magalhaes NEGOTIATION
Tony FollerGermanyAmy Elsner RENEWAL
Octavia MaletAustraliaAsiya Javayant NEW
Faith GillianArgentinaAsiya Javayant PROPOSAL
Kadeem FlosiRussiaOnyama Limba QUALIFIED
Costa DilliardUnited KingdomBernardo Dominic NEGOTIATION
Jefferson SchemmerUnited KingdomOnyama Limba NEW
Ivar PaprockiSpainAsiya Javayant QUALIFIED
Emily WhobreyBrazilAsiya Javayant UNQUALIFIED
Arvin AlbaresFranceIoni Bowcher NEW
Clifford RimJapanElwin Sharvill NEW
Emily WhobreyUnited KingdomOnyama Limba NEW
Octavia MaletFranceIoni Bowcher UNQUALIFIED
Frozen Columns
Name
Johnson Sergi
Johnson Sergi
Rodrigues Campain
Octavia Malet
Maisha Rulapaugh
Deepesh Chui
Stacey Maclead
Deepesh Chui
Kaitlin Ostrosky
Juan Wieser
Emily Whobrey
Smith Glick
Clifford Rim
Francesco Shinko
Aruna Figeroa
Aditya Kusko
Chavez Briddick
Deepesh Chui
Stacey Maclead
Jefferson Schemmer
Mujtaba Nicka
Tony Foller
Aditya Kusko
Clifford Rim
Misaki Royster
Jefferson Schemmer
Octavia Malet
Antonio Caudy
Misaki Royster
James Butt
Alejandro Perin
Deepesh Chui
Greenwood Bolognia
Cody Saylors
Clifford Rim
Mayumi Kolmetz
Morrow Ruta
Chavez Briddick
Kaitlin Ostrosky
Smith Glick
Jefferson Schemmer
Rodrigues Campain
Leja Caldarera
Morrow Ruta
Jeanfrancois Venere
Francesco Shinko
Izzy Garufi
Juan Wieser
Leja Caldarera
Chavez Briddick
IdCountryDate
1000Spain2026-06-01
1001Brazil2026-05-27
1002Australia2026-05-25
1003Argentina2026-05-24
1004France2026-05-17
1005Italy2026-06-05
1006United Kingdom2026-05-23
1007Italy2026-05-19
1008United Kingdom2026-06-07
1009Russia2026-06-07
1010Japan2026-05-14
1011Spain2026-05-11
1012Italy2026-05-19
1013Spain2026-05-26
1014Spain2026-06-07
1015Brazil2026-06-04
1016France2026-05-12
1017Australia2026-05-23
1018Brazil2026-05-31
1019Spain2026-05-12
1020Canada2026-05-19
1021Canada2026-05-25
1022Italy2026-06-02
1023Australia2026-06-05
1024France2026-05-26
1025India2026-05-12
1026Canada2026-05-23
1027France2026-06-01
1028Australia2026-06-08
1029Japan2026-05-26
1030Australia2026-05-15
1031Russia2026-06-07
1032United Kingdom2026-05-26
1033Italy2026-05-22
1034Germany2026-05-13
1035United Kingdom2026-05-26
1036Japan2026-05-15
1037Brazil2026-06-02
1038India2026-05-18
1039Russia2026-06-03
1040Canada2026-05-28
1041Russia2026-05-13
1042Canada2026-05-24
1043France2026-05-25
1044Argentina2026-06-02
1045Brazil2026-05-21
1046Canada2026-06-08
1047Germany2026-05-31
1048Italy2026-05-12
1049Australia2026-05-21

On-Demand Data

NameIdCountryDate
Jeanfrancois Venere1000Canada2026-05-22
Munro Ferencz1001France2026-06-01
Chavez Briddick1002Brazil2026-05-25
Jefferson Schemmer1003Italy2026-05-25
Emily Whobrey1004Spain2026-05-15
Murillo Malet1005United Kingdom2026-05-22
Adams Morasca1006Spain2026-05-13
Maisha Rulapaugh1007United Kingdom2026-05-23
Leon Oldroyd1008Japan2026-05-23
Jeanfrancois Venere1009Brazil2026-06-03
Morrow Ruta1010Brazil2026-06-06
Alejandro Perin1011Spain2026-05-12
Alejandro Perin1012Japan2026-06-06
Mayumi Kolmetz1013France2026-05-31
Darci Poquette1014Russia2026-05-11
Aruna Figeroa1015Russia2026-05-20
Tony Foller1016Canada2026-05-29
Isabel Bowley1017United Kingdom2026-05-18
Nicolas Iturbide1018Brazil2026-05-24
Isabel Bowley1019Germany2026-05-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Stacey MacleadBrazilAnna Fali QUALIFIED
Munro FerenczFranceXuxue Feng RENEWAL
Jefferson SchemmerArgentinaAnna Fali PROPOSAL
Morrow RutaRussiaAnna Fali PROPOSAL
Jones VocelkaAustraliaIvan Magalhaes RENEWAL
Jeanfrancois VenereAustraliaXuxue Feng PROPOSAL
Salvatore StockhamUnited KingdomIvan Magalhaes RENEWAL
David DarakjyGermanyStephen Shaw NEW
Izzy GarufiCanadaOnyama Limba NEGOTIATION
James ButtCanadaStephen Shaw NEGOTIATION
Mayumi KolmetzCanadaBernardo Dominic QUALIFIED
Salvatore StockhamUnited KingdomIvan Magalhaes NEGOTIATION
Tony FollerSpainXuxue Feng RENEWAL
Darci PoquetteSpainAnna Fali QUALIFIED
Adams MorascaSpainIvan Magalhaes NEGOTIATION
Rodrigues CampainIndiaStephen Shaw PROPOSAL
Ricardo GauchoUnited KingdomIoni Bowcher PROPOSAL
Costa DilliardFranceStephen Shaw QUALIFIED
Stacey MacleadArgentinaXuxue Feng NEW
Tony FollerFranceIvan Magalhaes RENEWAL
Aditya KuskoSpainBernardo Dominic UNQUALIFIED
Arvin AlbaresCanadaIvan Magalhaes RENEWAL
Ashley DoeJapanIvan Magalhaes NEW
Antonio CaudyIndiaStephen Shaw PROPOSAL
Wickens NestleFranceAsiya Javayant UNQUALIFIED
Leja CaldareraArgentinaXuxue Feng RENEWAL
Silvio SlusarskiIndiaAsiya Javayant RENEWAL
Jones VocelkaGermanyAnna Fali NEW
Kadeem FlosiAustraliaStephen Shaw RENEWAL
Francesco ShinkoIndiaElwin Sharvill NEW
Jennifer AmigonSpainIvan Magalhaes NEW
Smith GlickBrazilAsiya Javayant UNQUALIFIED
Smith GlickCanadaElwin Sharvill QUALIFIED
Deepesh ChuiAustraliaIvan Magalhaes UNQUALIFIED
Salvatore StockhamJapanAmy Elsner UNQUALIFIED
Deepesh ChuiJapanIoni Bowcher RENEWAL
Aika InouyeGermanyIvan Magalhaes RENEWAL
Aika InouyeGermanyIvan Magalhaes NEGOTIATION
Octavia MaletBrazilXuxue Feng NEGOTIATION
Francesco ShinkoSpainAnna Fali UNQUALIFIED

<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>