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
Maria MarrierCanadaIoni Bowcher NEGOTIATION
Jefferson SchemmerBrazilIvan Magalhaes RENEWAL
Ricardo GauchoRussiaAmy Elsner PROPOSAL
Deepesh ChuiBrazilElwin Sharvill UNQUALIFIED
Deepesh ChuiItalyOnyama Limba QUALIFIED
Jones VocelkaAustraliaAnna Fali UNQUALIFIED
Misaki RoysterJapanAsiya Javayant QUALIFIED
Arvin AlbaresSpainIvan Magalhaes NEW
Kaitlin OstroskyGermanyAnna Fali QUALIFIED
Jennifer AmigonSpainXuxue Feng UNQUALIFIED
Morrow RutaCanadaOnyama Limba QUALIFIED
Jefferson SchemmerCanadaIoni Bowcher UNQUALIFIED
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Maria MarrierSpainElwin Sharvill PROPOSAL
Jefferson SchemmerItalyIvan Magalhaes PROPOSAL
Emily WhobreyFranceBernardo Dominic NEW
Smith GlickArgentinaXuxue Feng NEW
Jefferson SchemmerCanadaOnyama Limba PROPOSAL
Isabel BowleyBrazilAsiya Javayant NEGOTIATION
Stacey MacleadArgentinaElwin Sharvill PROPOSAL
Octavia MaletSpainAnna Fali NEGOTIATION
Darci PoquetteUnited KingdomIoni Bowcher NEW
James ButtGermanyOnyama Limba RENEWAL
Antonio CaudyUnited KingdomElwin Sharvill NEW
James ButtSpainBernardo Dominic RENEWAL
Leon OldroydRussiaAsiya Javayant QUALIFIED
Greenwood BologniaBrazilIvan Magalhaes NEGOTIATION
Adams MorascaAustraliaElwin Sharvill QUALIFIED
Isabel BowleySpainIoni Bowcher NEW
Leon OldroydSpainAmy Elsner NEW
Jeanfrancois VenereItalyIvan Magalhaes RENEWAL
Francesco ShinkoIndiaAsiya Javayant NEW
Kadeem FlosiItalyAsiya Javayant UNQUALIFIED
James ButtJapanAsiya Javayant UNQUALIFIED
Maria MarrierItalyOnyama Limba PROPOSAL
Clifford RimItalyOnyama Limba PROPOSAL
Aditya KuskoArgentinaAsiya Javayant QUALIFIED
Aika InouyeSpainBernardo Dominic QUALIFIED
Smith GlickJapanElwin Sharvill RENEWAL
Nicolas IturbideGermanyElwin Sharvill QUALIFIED
Alejandro PerinGermanyIoni Bowcher NEGOTIATION
Ashley DoeIndiaAsiya Javayant QUALIFIED
Costa DilliardRussiaXuxue Feng QUALIFIED
David DarakjyArgentinaIvan Magalhaes RENEWAL
Leon OldroydSpainAnna Fali QUALIFIED
Maisha RulapaughAustraliaStephen Shaw UNQUALIFIED
Arvin AlbaresSpainXuxue Feng RENEWAL
Deepesh ChuiAustraliaAmy Elsner NEGOTIATION
Cody SaylorsAustraliaAnna Fali UNQUALIFIED
Ricardo GauchoJapanOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
David DarakjyIndiaBernardo Dominic NEGOTIATION
Aruna FigeroaFranceElwin Sharvill QUALIFIED
Maria MarrierAustraliaAsiya Javayant RENEWAL
Costa DilliardCanadaOnyama Limba QUALIFIED
Darci PoquetteIndiaAnna Fali QUALIFIED
Kaitlin OstroskySpainIoni Bowcher UNQUALIFIED
Aruna FigeroaJapanIoni Bowcher RENEWAL
David DarakjyItalyIvan Magalhaes UNQUALIFIED
Rodrigues CampainRussiaIvan Magalhaes NEGOTIATION
Jones VocelkaJapanIvan Magalhaes PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Emily WhobreyCanada2026-06-10Commercial Press QUALIFIED71Asiya Javayant
1001Cody SaylorsUnited Kingdom2026-06-17Feiner Bros UNQUALIFIED57Bernardo Dominic
1002Emily WhobreyArgentina2026-05-19Dorl, James J Esq NEGOTIATION2Xuxue Feng
1003Rodrigues CampainBrazil2026-06-10Chapman, Ross E Esq NEGOTIATION27Anna Fali
1004Ashley DoeRussia2026-05-31Commercial Press NEGOTIATION13Bernardo Dominic
1005Maisha RulapaughBrazil2026-05-22Chanay, Jeffrey A Esq NEGOTIATION21Ioni Bowcher
1006Salvatore StockhamRussia2026-05-22Dorl, James J Esq QUALIFIED78Asiya Javayant
1007Ivar PaprockiCanada2026-05-19Chanay, Jeffrey A Esq NEW24Xuxue Feng
1008Clifford RimUnited Kingdom2026-05-22Truhlar And Truhlar Attys NEW64Anna Fali
1009Juan WieserJapan2026-06-06Chemel, James L Cpa UNQUALIFIED42Stephen Shaw
1010Ivar PaprockiFrance2026-06-14Dorl, James J Esq QUALIFIED78Onyama Limba
1011Maria MarrierSpain2026-06-06Printing Dimensions NEGOTIATION37Xuxue Feng
1012Ivar PaprockiGermany2026-06-03Rangoni Of Florence UNQUALIFIED41Onyama Limba
1013Tony FollerCanada2026-06-08Morlong Associates PROPOSAL93Stephen Shaw
1014Stacey MacleadUnited Kingdom2026-06-12Buckley Miller Wright UNQUALIFIED48Asiya Javayant
1015Greenwood BologniaAustralia2026-06-12King, Christopher A Esq RENEWAL92Amy Elsner
1016Kadeem FlosiJapan2026-06-10Rousseaux, Michael Esq QUALIFIED97Ioni Bowcher
1017Leja CaldareraItaly2026-05-31Commercial Press QUALIFIED37Stephen Shaw
1018Wickens NestleCanada2026-05-26Rousseaux, Michael Esq RENEWAL56Xuxue Feng
1019Nicolas IturbideBrazil2026-06-13King, Christopher A Esq QUALIFIED48Ivan Magalhaes
1020Jefferson SchemmerBrazil2026-06-10Feltz Printing Service NEGOTIATION24Ioni Bowcher
1021Greenwood BologniaArgentina2026-05-21Chapman, Ross E Esq RENEWAL75Stephen Shaw
1022Munro FerenczUnited Kingdom2026-05-31Rangoni Of Florence UNQUALIFIED61Ivan Magalhaes
1023Jefferson SchemmerBrazil2026-06-08King, Christopher A Esq NEW14Stephen Shaw
1024Rodrigues CampainGermany2026-05-29Dorl, James J Esq RENEWAL60Onyama Limba
1025Costa DilliardUnited Kingdom2026-05-20Feltz Printing Service PROPOSAL17Xuxue Feng
1026Deepesh ChuiUnited Kingdom2026-06-09Chapman, Ross E Esq NEGOTIATION56Elwin Sharvill
1027Emily WhobreyRussia2026-05-23Buckley Miller Wright UNQUALIFIED11Bernardo Dominic
1028Alejandro PerinUnited Kingdom2026-06-11Morlong Associates PROPOSAL60Ioni Bowcher
1029Claire TollnerItaly2026-05-26Chanay, Jeffrey A Esq RENEWAL48Onyama Limba
1030Francesco ShinkoIndia2026-05-23Rangoni Of Florence NEGOTIATION74Bernardo Dominic
1031Mujtaba NickaUnited Kingdom2026-05-26Buckley Miller Wright NEGOTIATION12Xuxue Feng
1032Faith GillianIndia2026-05-25Chanay, Jeffrey A Esq NEW44Amy Elsner
1033Isabel BowleyUnited Kingdom2026-06-13Feiner Bros NEGOTIATION74Stephen Shaw
1034Kadeem FlosiFrance2026-06-16Chanay, Jeffrey A Esq NEW59Amy Elsner
1035Leja CaldareraJapan2026-06-07Rangoni Of Florence RENEWAL97Elwin Sharvill
1036Julie StensethJapan2026-05-28Morlong Associates PROPOSAL83Elwin Sharvill
1037Smith GlickAustralia2026-06-15Chemel, James L Cpa NEW34Anna Fali
1038Francesco ShinkoRussia2026-05-25Printing Dimensions QUALIFIED60Anna Fali
1039Misaki RoysterBrazil2026-05-29Commercial Press NEGOTIATION69Ivan Magalhaes
1040Ashley DoeGermany2026-06-12King, Christopher A Esq QUALIFIED41Ioni Bowcher
1041Costa DilliardJapan2026-06-10Chanay, Jeffrey A Esq UNQUALIFIED24Bernardo Dominic
1042Darci PoquetteItaly2026-05-25Feiner Bros UNQUALIFIED32Onyama Limba
1043Sinclair WaycottAustralia2026-05-24Commercial Press NEW23Stephen Shaw
1044Jefferson SchemmerItaly2026-06-09Truhlar And Truhlar Attys PROPOSAL38Stephen Shaw
1045Leon OldroydGermany2026-06-02Buckley Miller Wright PROPOSAL26Asiya Javayant
1046Johnson SergiBrazil2026-06-12Chapman, Ross E Esq NEGOTIATION98Bernardo Dominic
1047Salvatore StockhamBrazil2026-05-22Chemel, James L Cpa QUALIFIED44Stephen Shaw
1048Emily WhobreyGermany2026-06-10Morlong Associates NEGOTIATION71Bernardo Dominic
1049Costa DilliardJapan2026-05-23Truhlar And Truhlar Attys UNQUALIFIED90Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoJapanAmy Elsner NEW
Nicolas IturbideAustraliaIoni Bowcher UNQUALIFIED
Francesco ShinkoCanadaIvan Magalhaes RENEWAL
Cody SaylorsFranceXuxue Feng UNQUALIFIED
Sinclair WaycottCanadaOnyama Limba UNQUALIFIED
Ricardo GauchoIndiaOnyama Limba UNQUALIFIED
Maisha RulapaughBrazilElwin Sharvill UNQUALIFIED
Silvio SlusarskiCanadaBernardo Dominic UNQUALIFIED
Johnson SergiFranceIvan Magalhaes NEW
Jefferson SchemmerJapanAnna Fali PROPOSAL
James ButtJapanOnyama Limba RENEWAL
Salvatore StockhamJapanAmy Elsner NEW
Chavez BriddickBrazilAsiya Javayant QUALIFIED
Jefferson SchemmerAustraliaAsiya Javayant QUALIFIED
Nicolas IturbideRussiaIvan Magalhaes NEW
Cody SaylorsSpainAnna Fali QUALIFIED
Johnson SergiFranceAmy Elsner NEW
Octavia MaletUnited KingdomStephen Shaw RENEWAL
Ivar PaprockiSpainAsiya Javayant NEGOTIATION
Smith GlickGermanyElwin Sharvill QUALIFIED
Jones VocelkaIndiaAmy Elsner NEW
Jennifer AmigonArgentinaBernardo Dominic PROPOSAL
Kaitlin OstroskyFranceBernardo Dominic PROPOSAL
Aika InouyeJapanStephen Shaw PROPOSAL
Stacey MacleadCanadaBernardo Dominic QUALIFIED
Francesco ShinkoBrazilBernardo Dominic PROPOSAL
James ButtIndiaAsiya Javayant RENEWAL
Wickens NestleGermanyStephen Shaw RENEWAL
Claire TollnerUnited KingdomBernardo Dominic QUALIFIED
Alejandro PerinRussiaIoni Bowcher RENEWAL
Isabel BowleyBrazilStephen Shaw NEW
Octavia MaletSpainStephen Shaw PROPOSAL
Rodrigues CampainArgentinaAnna Fali RENEWAL
Rodrigues CampainJapanAmy Elsner RENEWAL
Greenwood BologniaSpainXuxue Feng UNQUALIFIED
Mujtaba NickaItalyAmy Elsner PROPOSAL
Maria MarrierIndiaIoni Bowcher QUALIFIED
Darci PoquetteUnited KingdomElwin Sharvill UNQUALIFIED
Octavia MaletSpainAmy Elsner UNQUALIFIED
Mayumi KolmetzJapanXuxue Feng NEW
Alejandro PerinCanadaAmy Elsner UNQUALIFIED
Maisha RulapaughBrazilElwin Sharvill QUALIFIED
Clifford RimArgentinaOnyama Limba QUALIFIED
Morrow RutaSpainAnna Fali QUALIFIED
Aruna FigeroaArgentinaXuxue Feng NEW
Leon OldroydItalyStephen Shaw QUALIFIED
Aruna FigeroaJapanStephen Shaw NEGOTIATION
Emily WhobreyArgentinaIoni Bowcher PROPOSAL
Arvin AlbaresIndiaAsiya Javayant QUALIFIED
Jeanfrancois VenereCanadaElwin Sharvill QUALIFIED
Frozen Columns
Name
Deepesh Chui
Julie Stenseth
Stacey Maclead
Maisha Rulapaugh
Aditya Kusko
Arvin Albares
Adams Morasca
Leja Caldarera
Leja Caldarera
Smith Glick
Wickens Nestle
Jeanfrancois Venere
Kaitlin Ostrosky
Misaki Royster
Cody Saylors
Chavez Briddick
Munro Ferencz
Emily Whobrey
Arvin Albares
Aditya Kusko
Clifford Rim
Silvio Slusarski
Alejandro Perin
Leon Oldroyd
Leon Oldroyd
Darci Poquette
Nicolas Iturbide
Jefferson Schemmer
Maisha Rulapaugh
Cody Saylors
Faith Gillian
Salvatore Stockham
Johnson Sergi
Tony Foller
Julie Stenseth
Mujtaba Nicka
Mujtaba Nicka
Isabel Bowley
Nicolas Iturbide
Aruna Figeroa
Aruna Figeroa
Arvin Albares
Izzy Garufi
Maria Marrier
Ivar Paprocki
Silvio Slusarski
Deepesh Chui
Kaitlin Ostrosky
David Darakjy
Arvin Albares
IdCountryDate
1000Canada2026-06-08
1001Japan2026-06-07
1002Brazil2026-06-04
1003India2026-05-21
1004Canada2026-06-10
1005United Kingdom2026-06-07
1006Brazil2026-05-20
1007Italy2026-05-27
1008United Kingdom2026-05-22
1009United Kingdom2026-05-19
1010Canada2026-06-06
1011France2026-05-23
1012Brazil2026-06-06
1013Spain2026-05-20
1014Spain2026-05-29
1015Canada2026-06-13
1016United Kingdom2026-06-06
1017Australia2026-05-24
1018Australia2026-06-15
1019Argentina2026-05-31
1020France2026-05-29
1021Germany2026-06-07
1022Australia2026-06-02
1023Canada2026-05-23
1024Argentina2026-05-27
1025France2026-05-22
1026Japan2026-06-15
1027Australia2026-06-03
1028Germany2026-05-21
1029Brazil2026-05-25
1030Russia2026-05-27
1031Argentina2026-05-29
1032Australia2026-06-16
1033Germany2026-05-24
1034Spain2026-06-16
1035Australia2026-05-24
1036Canada2026-05-20
1037Argentina2026-06-11
1038Australia2026-06-08
1039India2026-05-30
1040Argentina2026-06-12
1041Russia2026-06-17
1042Australia2026-06-11
1043Argentina2026-06-04
1044Japan2026-05-23
1045Spain2026-06-02
1046Brazil2026-06-06
1047Canada2026-06-08
1048United Kingdom2026-06-13
1049Argentina2026-05-19

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Germany2026-05-22
Jefferson Schemmer1001Canada2026-06-15
Kaitlin Ostrosky1002Canada2026-05-25
Aruna Figeroa1003Canada2026-06-13
Cody Saylors1004India2026-05-19
Tony Foller1005Italy2026-06-05
Izzy Garufi1006Argentina2026-06-10
Misaki Royster1007France2026-05-21
Leon Oldroyd1008Japan2026-06-02
Rodrigues Campain1009Canada2026-06-12
Antonio Caudy1010Argentina2026-05-31
Deepesh Chui1011Brazil2026-06-14
Sinclair Waycott1012Spain2026-05-23
Sinclair Waycott1013United Kingdom2026-05-27
David Darakjy1014Japan2026-06-13
Arvin Albares1015Russia2026-05-23
Jennifer Amigon1016Japan2026-06-07
Sinclair Waycott1017Japan2026-06-12
Wickens Nestle1018Argentina2026-06-02
Misaki Royster1019France2026-05-23
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Izzy GarufiUnited KingdomOnyama Limba NEGOTIATION
Deepesh ChuiJapanStephen Shaw QUALIFIED
Maisha RulapaughGermanyBernardo Dominic QUALIFIED
Murillo MaletFranceOnyama Limba QUALIFIED
Nicolas IturbideItalyBernardo Dominic QUALIFIED
Cody SaylorsIndiaAmy Elsner UNQUALIFIED
Mayumi KolmetzSpainIvan Magalhaes PROPOSAL
Juan WieserCanadaBernardo Dominic NEW
David DarakjyArgentinaAmy Elsner RENEWAL
Arvin AlbaresJapanAmy Elsner QUALIFIED
Jefferson SchemmerItalyIvan Magalhaes PROPOSAL
Ivar PaprockiGermanyOnyama Limba NEW
Adams MorascaBrazilBernardo Dominic PROPOSAL
Darci PoquetteArgentinaStephen Shaw RENEWAL
Isabel BowleyAustraliaBernardo Dominic QUALIFIED
Maisha RulapaughArgentinaOnyama Limba RENEWAL
Leon OldroydGermanyElwin Sharvill RENEWAL
Murillo MaletSpainIoni Bowcher NEGOTIATION
James ButtRussiaAmy Elsner PROPOSAL
Julie StensethSpainAmy Elsner NEGOTIATION
Adams MorascaItalyBernardo Dominic QUALIFIED
Mujtaba NickaAustraliaIvan Magalhaes UNQUALIFIED
Nicolas IturbideFranceStephen Shaw UNQUALIFIED
Arvin AlbaresRussiaAmy Elsner RENEWAL
Salvatore StockhamSpainIvan Magalhaes QUALIFIED
Johnson SergiSpainIvan Magalhaes NEGOTIATION
Julie StensethUnited KingdomIoni Bowcher PROPOSAL
Tony FollerSpainXuxue Feng PROPOSAL
Arvin AlbaresCanadaOnyama Limba UNQUALIFIED
Julie StensethBrazilIoni Bowcher RENEWAL
Mayumi KolmetzUnited KingdomIvan Magalhaes NEGOTIATION
Nicolas IturbideIndiaBernardo Dominic QUALIFIED
Aditya KuskoBrazilIvan Magalhaes PROPOSAL
Mayumi KolmetzGermanyIvan Magalhaes QUALIFIED
Aika InouyeUnited KingdomAnna Fali PROPOSAL
Aruna FigeroaUnited KingdomOnyama Limba QUALIFIED
Greenwood BologniaGermanyXuxue Feng PROPOSAL
James ButtArgentinaIvan Magalhaes NEGOTIATION
Jeanfrancois VenereItalyIoni Bowcher RENEWAL
Stacey MacleadCanadaIvan Magalhaes NEGOTIATION

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