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 StensethItalyAsiya Javayant QUALIFIED
Jones VocelkaGermanyOnyama Limba QUALIFIED
Salvatore StockhamRussiaOnyama Limba UNQUALIFIED
Adams MorascaRussiaIoni Bowcher PROPOSAL
Aika InouyeAustraliaIoni Bowcher QUALIFIED
Leon OldroydSpainBernardo Dominic NEGOTIATION
David DarakjyUnited KingdomIoni Bowcher NEW
Izzy GarufiItalyStephen Shaw QUALIFIED
Jennifer AmigonFranceStephen Shaw NEGOTIATION
Juan WieserSpainStephen Shaw RENEWAL
Chavez BriddickSpainIoni Bowcher QUALIFIED
Jeanfrancois VenereSpainElwin Sharvill NEGOTIATION
Kaitlin OstroskyArgentinaBernardo Dominic UNQUALIFIED
Cody SaylorsSpainAmy Elsner RENEWAL
Aika InouyeRussiaElwin Sharvill QUALIFIED
Jennifer AmigonIndiaStephen Shaw RENEWAL
Wickens NestleAustraliaAmy Elsner PROPOSAL
Isabel BowleyFranceAmy Elsner PROPOSAL
Kaitlin OstroskyIndiaBernardo Dominic QUALIFIED
Costa DilliardItalyIoni Bowcher UNQUALIFIED
Antonio CaudyAustraliaAsiya Javayant RENEWAL
Arvin AlbaresFranceAmy Elsner NEGOTIATION
Antonio CaudyCanadaIoni Bowcher QUALIFIED
Maisha RulapaughItalyAnna Fali QUALIFIED
Aditya KuskoJapanIoni Bowcher QUALIFIED
Adams MorascaJapanStephen Shaw UNQUALIFIED
Izzy GarufiRussiaAsiya Javayant PROPOSAL
Stacey MacleadUnited KingdomOnyama Limba QUALIFIED
Alejandro PerinGermanyIvan Magalhaes NEGOTIATION
Kaitlin OstroskySpainStephen Shaw UNQUALIFIED
Jeanfrancois VenereArgentinaAsiya Javayant NEGOTIATION
Adams MorascaGermanyIvan Magalhaes RENEWAL
Misaki RoysterAustraliaElwin Sharvill UNQUALIFIED
Mujtaba NickaBrazilXuxue Feng UNQUALIFIED
Kaitlin OstroskyAustraliaElwin Sharvill NEGOTIATION
Maria MarrierArgentinaIoni Bowcher PROPOSAL
Darci PoquetteJapanAsiya Javayant NEGOTIATION
Leon OldroydCanadaAnna Fali UNQUALIFIED
Maria MarrierFranceAmy Elsner PROPOSAL
Isabel BowleyArgentinaOnyama Limba NEGOTIATION
Mujtaba NickaIndiaIvan Magalhaes NEW
Isabel BowleyCanadaElwin Sharvill NEGOTIATION
Izzy GarufiCanadaXuxue Feng PROPOSAL
Octavia MaletJapanElwin Sharvill UNQUALIFIED
Maisha RulapaughAustraliaAmy Elsner NEW
Salvatore StockhamJapanAnna Fali NEW
Kaitlin OstroskyRussiaIvan Magalhaes QUALIFIED
Leon OldroydFranceElwin Sharvill QUALIFIED
Claire TollnerRussiaAsiya Javayant RENEWAL
Alejandro PerinUnited KingdomAsiya Javayant PROPOSAL
Horizontal
NameCountryRepresentativeStatus
David DarakjyUnited KingdomAnna Fali NEGOTIATION
David DarakjyCanadaOnyama Limba NEW
Jones VocelkaIndiaIvan Magalhaes UNQUALIFIED
Sinclair WaycottIndiaAsiya Javayant RENEWAL
Jones VocelkaIndiaOnyama Limba NEGOTIATION
Rodrigues CampainCanadaAsiya Javayant UNQUALIFIED
Morrow RutaItalyStephen Shaw PROPOSAL
Arvin AlbaresCanadaXuxue Feng NEGOTIATION
Ashley DoeItalyIoni Bowcher RENEWAL
Izzy GarufiBrazilOnyama Limba RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Tony FollerJapan2026-04-09Chemel, James L Cpa UNQUALIFIED74Ioni Bowcher
1001Aditya KuskoItaly2026-04-06Chanay, Jeffrey A Esq QUALIFIED30Anna Fali
1002Ivar PaprockiFrance2026-04-29Chapman, Ross E Esq NEGOTIATION93Onyama Limba
1003Juan WieserGermany2026-04-04Rousseaux, Michael Esq NEW6Elwin Sharvill
1004Clifford RimUnited Kingdom2026-04-26Feiner Bros UNQUALIFIED37Stephen Shaw
1005Jefferson SchemmerIndia2026-04-27Buckley Miller Wright QUALIFIED61Onyama Limba
1006Johnson SergiGermany2026-04-18Printing Dimensions NEW51Stephen Shaw
1007Chavez BriddickJapan2026-04-28Buckley Miller Wright PROPOSAL37Elwin Sharvill
1008Claire TollnerBrazil2026-04-16Feltz Printing Service NEW78Ivan Magalhaes
1009Julie StensethJapan2026-04-12Chanay, Jeffrey A Esq NEGOTIATION43Anna Fali
1010Silvio SlusarskiItaly2026-04-17King, Christopher A Esq NEGOTIATION9Ioni Bowcher
1011Murillo MaletAustralia2026-04-09Printing Dimensions NEGOTIATION51Ivan Magalhaes
1012Juan WieserSpain2026-04-29Truhlar And Truhlar Attys NEW32Amy Elsner
1013Emily WhobreyUnited Kingdom2026-05-03Buckley Miller Wright UNQUALIFIED57Elwin Sharvill
1014Nicolas IturbideJapan2026-04-29Dorl, James J Esq RENEWAL78Bernardo Dominic
1015Juan WieserItaly2026-04-19Dorl, James J Esq UNQUALIFIED74Stephen Shaw
1016Jennifer AmigonCanada2026-04-06Chanay, Jeffrey A Esq NEW70Ivan Magalhaes
1017Izzy GarufiJapan2026-04-06Rangoni Of Florence RENEWAL70Ivan Magalhaes
1018Antonio CaudyJapan2026-04-08Printing Dimensions NEGOTIATION70Ioni Bowcher
1019Morrow RutaSpain2026-04-19Rousseaux, Michael Esq RENEWAL26Ivan Magalhaes
1020Mayumi KolmetzJapan2026-04-26Chapman, Ross E Esq NEGOTIATION95Onyama Limba
1021Jefferson SchemmerGermany2026-04-24Dorl, James J Esq QUALIFIED95Ioni Bowcher
1022Misaki RoysterArgentina2026-04-05Truhlar And Truhlar Attys PROPOSAL55Stephen Shaw
1023Aruna FigeroaUnited Kingdom2026-05-02Chanay, Jeffrey A Esq UNQUALIFIED79Bernardo Dominic
1024Isabel BowleyBrazil2026-04-28King, Christopher A Esq NEW75Asiya Javayant
1025Murillo MaletBrazil2026-04-04Printing Dimensions NEGOTIATION8Ioni Bowcher
1026Cody SaylorsFrance2026-04-17King, Christopher A Esq UNQUALIFIED46Stephen Shaw
1027Leon OldroydRussia2026-04-10Commercial Press UNQUALIFIED27Amy Elsner
1028Adams MorascaBrazil2026-04-22Truhlar And Truhlar Attys NEGOTIATION65Elwin Sharvill
1029Kaitlin OstroskyGermany2026-04-14Rousseaux, Michael Esq PROPOSAL1Elwin Sharvill
1030Darci PoquetteSpain2026-04-15Rousseaux, Michael Esq NEGOTIATION70Xuxue Feng
1031James ButtFrance2026-04-19Morlong Associates RENEWAL39Bernardo Dominic
1032Julie StensethItaly2026-04-05Rousseaux, Michael Esq QUALIFIED96Stephen Shaw
1033Alejandro PerinAustralia2026-04-11Buckley Miller Wright UNQUALIFIED25Stephen Shaw
1034Isabel BowleyGermany2026-04-20Chapman, Ross E Esq QUALIFIED75Xuxue Feng
1035Juan WieserJapan2026-04-27Feiner Bros NEW13Asiya Javayant
1036Jones VocelkaAustralia2026-04-25Feltz Printing Service UNQUALIFIED79Onyama Limba
1037Arvin AlbaresAustralia2026-04-10King, Christopher A Esq NEGOTIATION62Ivan Magalhaes
1038Jeanfrancois VenereCanada2026-04-11Buckley Miller Wright QUALIFIED49Amy Elsner
1039Chavez BriddickCanada2026-04-26Feiner Bros UNQUALIFIED74Stephen Shaw
1040Munro FerenczSpain2026-04-07Printing Dimensions NEW97Onyama Limba
1041Leon OldroydIndia2026-04-24Chanay, Jeffrey A Esq NEGOTIATION15Amy Elsner
1042Nicolas IturbideIndia2026-04-06King, Christopher A Esq PROPOSAL14Stephen Shaw
1043Johnson SergiFrance2026-04-15Chanay, Jeffrey A Esq QUALIFIED2Xuxue Feng
1044Deepesh ChuiArgentina2026-05-02Commercial Press QUALIFIED76Anna Fali
1045Aika InouyeCanada2026-04-28Chemel, James L Cpa QUALIFIED8Ioni Bowcher
1046Leja CaldareraJapan2026-04-13Feiner Bros RENEWAL73Anna Fali
1047Arvin AlbaresIndia2026-04-23Buckley Miller Wright UNQUALIFIED21Ioni Bowcher
1048Octavia MaletSpain2026-05-01Rangoni Of Florence QUALIFIED94Anna Fali
1049Ashley DoeBrazil2026-04-14Truhlar And Truhlar Attys QUALIFIED73Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Jefferson SchemmerItalyStephen Shaw NEW
Arvin AlbaresGermanyOnyama Limba UNQUALIFIED
Emily WhobreyCanadaBernardo Dominic UNQUALIFIED
Morrow RutaSpainBernardo Dominic RENEWAL
Adams MorascaJapanOnyama Limba PROPOSAL
Misaki RoysterIndiaXuxue Feng NEW
Stacey MacleadBrazilOnyama Limba NEW
Deepesh ChuiGermanyOnyama Limba UNQUALIFIED
Costa DilliardBrazilIoni Bowcher PROPOSAL
Juan WieserGermanyBernardo Dominic UNQUALIFIED
Ivar PaprockiGermanyStephen Shaw NEW
Emily WhobreyUnited KingdomIvan Magalhaes RENEWAL
Aditya KuskoBrazilStephen Shaw QUALIFIED
Kaitlin OstroskyCanadaBernardo Dominic QUALIFIED
Greenwood BologniaBrazilXuxue Feng PROPOSAL
Jeanfrancois VenereArgentinaIvan Magalhaes PROPOSAL
Leon OldroydItalyIvan Magalhaes UNQUALIFIED
Greenwood BologniaUnited KingdomIvan Magalhaes UNQUALIFIED
Aruna FigeroaUnited KingdomOnyama Limba NEGOTIATION
Isabel BowleyJapanAnna Fali PROPOSAL
Ivar PaprockiUnited KingdomXuxue Feng PROPOSAL
James ButtIndiaIvan Magalhaes NEGOTIATION
Mayumi KolmetzUnited KingdomStephen Shaw PROPOSAL
Chavez BriddickBrazilElwin Sharvill RENEWAL
Morrow RutaCanadaOnyama Limba QUALIFIED
Izzy GarufiCanadaAmy Elsner PROPOSAL
Mayumi KolmetzCanadaAmy Elsner RENEWAL
Nicolas IturbideUnited KingdomXuxue Feng PROPOSAL
Leja CaldareraAustraliaOnyama Limba QUALIFIED
Alejandro PerinItalyIoni Bowcher NEW
Morrow RutaAustraliaAmy Elsner UNQUALIFIED
Chavez BriddickBrazilStephen Shaw RENEWAL
Alejandro PerinBrazilElwin Sharvill RENEWAL
Costa DilliardBrazilIoni Bowcher UNQUALIFIED
Jones VocelkaFranceAsiya Javayant UNQUALIFIED
Sinclair WaycottRussiaElwin Sharvill NEGOTIATION
Aika InouyeItalyAmy Elsner RENEWAL
Ivar PaprockiUnited KingdomAnna Fali NEW
Deepesh ChuiJapanBernardo Dominic NEW
Stacey MacleadArgentinaIoni Bowcher NEW
Aika InouyeUnited KingdomStephen Shaw UNQUALIFIED
Alejandro PerinFranceBernardo Dominic RENEWAL
Nicolas IturbideFranceIvan Magalhaes NEW
Juan WieserItalyAmy Elsner UNQUALIFIED
Aditya KuskoItalyOnyama Limba NEGOTIATION
Julie StensethArgentinaOnyama Limba NEW
Faith GillianArgentinaAmy Elsner PROPOSAL
Maisha RulapaughCanadaBernardo Dominic QUALIFIED
Jeanfrancois VenereFranceStephen Shaw QUALIFIED
Julie StensethCanadaOnyama Limba RENEWAL
Frozen Columns
Name
Greenwood Bolognia
Jefferson Schemmer
Misaki Royster
Maisha Rulapaugh
David Darakjy
Deepesh Chui
Mujtaba Nicka
Morrow Ruta
Antonio Caudy
Kaitlin Ostrosky
Octavia Malet
Leja Caldarera
Alejandro Perin
Stacey Maclead
Jefferson Schemmer
Costa Dilliard
Maisha Rulapaugh
Munro Ferencz
Antonio Caudy
Misaki Royster
Aditya Kusko
Smith Glick
Kaitlin Ostrosky
Aruna Figeroa
Deepesh Chui
Munro Ferencz
Alejandro Perin
Tony Foller
Alejandro Perin
Juan Wieser
Jeanfrancois Venere
Izzy Garufi
Munro Ferencz
Darci Poquette
Smith Glick
Aditya Kusko
Chavez Briddick
Sinclair Waycott
Alejandro Perin
Claire Tollner
Claire Tollner
Mujtaba Nicka
Leja Caldarera
Kaitlin Ostrosky
Deepesh Chui
Juan Wieser
Deepesh Chui
Maria Marrier
Leja Caldarera
Faith Gillian
IdCountryDate
1000Australia2026-04-27
1001Spain2026-04-09
1002United Kingdom2026-04-23
1003Germany2026-04-26
1004United Kingdom2026-04-13
1005Russia2026-04-21
1006Japan2026-04-29
1007Canada2026-05-03
1008Canada2026-04-15
1009Australia2026-05-02
1010Russia2026-04-25
1011India2026-04-24
1012Argentina2026-04-19
1013Canada2026-04-14
1014Italy2026-04-24
1015United Kingdom2026-04-10
1016India2026-04-09
1017India2026-04-30
1018Japan2026-04-13
1019Japan2026-04-15
1020Japan2026-04-27
1021Australia2026-04-12
1022Italy2026-04-12
1023France2026-04-28
1024Canada2026-04-25
1025Brazil2026-05-03
1026Argentina2026-04-16
1027India2026-04-24
1028United Kingdom2026-05-03
1029India2026-04-28
1030United Kingdom2026-04-20
1031Spain2026-04-19
1032India2026-04-28
1033Italy2026-04-23
1034Brazil2026-04-27
1035Australia2026-04-13
1036Canada2026-04-23
1037Japan2026-04-25
1038Japan2026-04-16
1039United Kingdom2026-04-23
1040United Kingdom2026-04-26
1041Spain2026-04-23
1042Argentina2026-04-18
1043United Kingdom2026-05-03
1044Russia2026-04-22
1045France2026-04-07
1046Argentina2026-04-29
1047Russia2026-04-29
1048Australia2026-04-04
1049Argentina2026-04-13

On-Demand Data

NameIdCountryDate
Sinclair Waycott1000Spain2026-04-28
Francesco Shinko1001Japan2026-04-30
Antonio Caudy1002Argentina2026-04-09
Nicolas Iturbide1003Brazil2026-04-06
Claire Tollner1004France2026-04-08
Arvin Albares1005United Kingdom2026-04-28
Octavia Malet1006Australia2026-04-05
David Darakjy1007Russia2026-05-02
Jeanfrancois Venere1008Canada2026-04-12
Maria Marrier1009India2026-04-16
Jennifer Amigon1010Argentina2026-04-27
Rodrigues Campain1011India2026-04-14
Alejandro Perin1012United Kingdom2026-04-26
Julie Stenseth1013Russia2026-05-02
Morrow Ruta1014Italy2026-04-27
Rodrigues Campain1015Italy2026-04-04
Ashley Doe1016France2026-04-06
Tony Foller1017Australia2026-04-13
Octavia Malet1018India2026-04-10
Ivar Paprocki1019Italy2026-04-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeRussiaAsiya Javayant NEW
Juan WieserItalyAnna Fali NEW
Stacey MacleadUnited KingdomBernardo Dominic RENEWAL
Munro FerenczArgentinaAmy Elsner QUALIFIED
Faith GillianJapanStephen Shaw QUALIFIED
Munro FerenczBrazilBernardo Dominic PROPOSAL
Juan WieserFranceAnna Fali QUALIFIED
Leja CaldareraJapanOnyama Limba RENEWAL
Rodrigues CampainCanadaAmy Elsner QUALIFIED
Isabel BowleyCanadaIoni Bowcher QUALIFIED
Emily WhobreyIndiaAsiya Javayant PROPOSAL
Emily WhobreySpainAnna Fali PROPOSAL
Aruna FigeroaJapanAmy Elsner UNQUALIFIED
Darci PoquetteJapanAnna Fali PROPOSAL
Emily WhobreyGermanyOnyama Limba PROPOSAL
Jeanfrancois VenereCanadaElwin Sharvill PROPOSAL
Nicolas IturbideSpainXuxue Feng UNQUALIFIED
Alejandro PerinFranceXuxue Feng QUALIFIED
Silvio SlusarskiAustraliaIvan Magalhaes QUALIFIED
Alejandro PerinUnited KingdomElwin Sharvill RENEWAL
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Adams MorascaJapanElwin Sharvill UNQUALIFIED
Kaitlin OstroskyRussiaIvan Magalhaes QUALIFIED
Maria MarrierUnited KingdomIoni Bowcher QUALIFIED
Adams MorascaSpainAsiya Javayant PROPOSAL
Wickens NestleCanadaIoni Bowcher PROPOSAL
Adams MorascaSpainAnna Fali RENEWAL
Emily WhobreyAustraliaElwin Sharvill PROPOSAL
David DarakjyFranceStephen Shaw QUALIFIED
Izzy GarufiIndiaIvan Magalhaes NEGOTIATION
Aruna FigeroaArgentinaAmy Elsner UNQUALIFIED
Costa DilliardUnited KingdomElwin Sharvill UNQUALIFIED
Maisha RulapaughIndiaAmy Elsner QUALIFIED
Maisha RulapaughRussiaXuxue Feng RENEWAL
Izzy GarufiBrazilBernardo Dominic QUALIFIED
James ButtBrazilStephen Shaw NEW
Maria MarrierBrazilAnna Fali PROPOSAL
Juan WieserUnited KingdomIoni Bowcher UNQUALIFIED
Maisha RulapaughUnited KingdomBernardo Dominic RENEWAL
James ButtAustraliaAmy Elsner RENEWAL

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