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
Jefferson SchemmerSpainOnyama Limba NEGOTIATION
Antonio CaudyGermanyIvan Magalhaes PROPOSAL
Jefferson SchemmerArgentinaAmy Elsner NEGOTIATION
Jefferson SchemmerIndiaElwin Sharvill QUALIFIED
Jeanfrancois VenereArgentinaIvan Magalhaes PROPOSAL
Greenwood BologniaRussiaIoni Bowcher UNQUALIFIED
James ButtCanadaBernardo Dominic NEGOTIATION
Aruna FigeroaUnited KingdomBernardo Dominic NEW
Johnson SergiItalyAnna Fali NEW
Octavia MaletJapanXuxue Feng NEGOTIATION
Izzy GarufiUnited KingdomAsiya Javayant NEGOTIATION
Julie StensethArgentinaAnna Fali NEGOTIATION
Smith GlickCanadaIoni Bowcher PROPOSAL
Silvio SlusarskiArgentinaAsiya Javayant NEGOTIATION
Mayumi KolmetzRussiaXuxue Feng NEW
Ricardo GauchoItalyXuxue Feng QUALIFIED
Faith GillianBrazilIoni Bowcher NEW
Tony FollerUnited KingdomElwin Sharvill UNQUALIFIED
Mayumi KolmetzSpainIoni Bowcher QUALIFIED
Morrow RutaUnited KingdomStephen Shaw QUALIFIED
Greenwood BologniaRussiaAnna Fali NEGOTIATION
Ashley DoeRussiaAnna Fali RENEWAL
Jones VocelkaIndiaAsiya Javayant NEW
Morrow RutaUnited KingdomIoni Bowcher NEW
Ashley DoeFranceElwin Sharvill NEW
Smith GlickBrazilAmy Elsner NEW
Claire TollnerArgentinaXuxue Feng PROPOSAL
Alejandro PerinSpainAsiya Javayant NEGOTIATION
Kaitlin OstroskyItalyAmy Elsner NEGOTIATION
Ricardo GauchoGermanyOnyama Limba UNQUALIFIED
Chavez BriddickAustraliaIoni Bowcher NEW
Ashley DoeFranceElwin Sharvill PROPOSAL
Leja CaldareraAustraliaStephen Shaw PROPOSAL
Morrow RutaJapanAsiya Javayant QUALIFIED
Kaitlin OstroskyItalyBernardo Dominic NEW
Deepesh ChuiFranceStephen Shaw PROPOSAL
Costa DilliardUnited KingdomElwin Sharvill RENEWAL
Greenwood BologniaFranceAsiya Javayant NEW
Izzy GarufiRussiaAsiya Javayant PROPOSAL
Leon OldroydAustraliaElwin Sharvill UNQUALIFIED
Sinclair WaycottIndiaAsiya Javayant NEW
Emily WhobreyBrazilAsiya Javayant QUALIFIED
Stacey MacleadBrazilStephen Shaw NEGOTIATION
Kaitlin OstroskyIndiaBernardo Dominic PROPOSAL
Mayumi KolmetzItalyAsiya Javayant RENEWAL
Jennifer AmigonSpainBernardo Dominic UNQUALIFIED
Aruna FigeroaSpainAmy Elsner NEGOTIATION
Aruna FigeroaArgentinaXuxue Feng NEGOTIATION
Sinclair WaycottArgentinaIvan Magalhaes UNQUALIFIED
Maria MarrierFranceOnyama Limba UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Aika InouyeUnited KingdomAnna Fali NEW
Jones VocelkaFranceIoni Bowcher NEGOTIATION
Ricardo GauchoRussiaOnyama Limba UNQUALIFIED
Isabel BowleyRussiaIoni Bowcher NEGOTIATION
Salvatore StockhamJapanElwin Sharvill PROPOSAL
Leon OldroydAustraliaStephen Shaw PROPOSAL
Maria MarrierAustraliaStephen Shaw QUALIFIED
Aruna FigeroaJapanAsiya Javayant UNQUALIFIED
Johnson SergiGermanyOnyama Limba RENEWAL
Maria MarrierGermanyAnna Fali PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereIndia2025-10-13Chapman, Ross E Esq PROPOSAL24Amy Elsner
1001Juan WieserItaly2025-10-25Commercial Press PROPOSAL64Ioni Bowcher
1002Ashley DoeSpain2025-10-23Rangoni Of Florence UNQUALIFIED21Onyama Limba
1003Stacey MacleadBrazil2025-10-07King, Christopher A Esq QUALIFIED43Elwin Sharvill
1004David DarakjyBrazil2025-10-03Truhlar And Truhlar Attys UNQUALIFIED52Ivan Magalhaes
1005Jones VocelkaIndia2025-10-29Chemel, James L Cpa RENEWAL55Ivan Magalhaes
1006Claire TollnerJapan2025-10-31Truhlar And Truhlar Attys NEGOTIATION40Ivan Magalhaes
1007Kaitlin OstroskyGermany2025-10-31King, Christopher A Esq UNQUALIFIED19Ioni Bowcher
1008David DarakjySpain2025-10-12Dorl, James J Esq UNQUALIFIED56Elwin Sharvill
1009Cody SaylorsCanada2025-10-19King, Christopher A Esq NEW14Anna Fali
1010Maria MarrierAustralia2025-10-16King, Christopher A Esq PROPOSAL51Ivan Magalhaes
1011Salvatore StockhamGermany2025-10-26Chapman, Ross E Esq PROPOSAL96Xuxue Feng
1012Aruna FigeroaUnited Kingdom2025-10-31Rousseaux, Michael Esq RENEWAL64Stephen Shaw
1013Arvin AlbaresFrance2025-10-18Chanay, Jeffrey A Esq PROPOSAL31Anna Fali
1014Emily WhobreyUnited Kingdom2025-11-01Feltz Printing Service NEW50Bernardo Dominic
1015Jeanfrancois VenereItaly2025-10-06Dorl, James J Esq PROPOSAL7Anna Fali
1016Aruna FigeroaIndia2025-10-12Commercial Press UNQUALIFIED67Elwin Sharvill
1017Wickens NestleUnited Kingdom2025-10-11Rousseaux, Michael Esq NEW53Anna Fali
1018Nicolas IturbideBrazil2025-10-22Chanay, Jeffrey A Esq NEW28Stephen Shaw
1019Morrow RutaItaly2025-10-07Rangoni Of Florence QUALIFIED80Anna Fali
1020Claire TollnerUnited Kingdom2025-10-22Feiner Bros NEGOTIATION35Onyama Limba
1021Morrow RutaSpain2025-10-23Chemel, James L Cpa PROPOSAL98Ivan Magalhaes
1022Izzy GarufiGermany2025-10-11Benton, John B Jr RENEWAL26Amy Elsner
1023Faith GillianUnited Kingdom2025-10-23Morlong Associates RENEWAL39Anna Fali
1024Aika InouyeArgentina2025-10-14Rangoni Of Florence QUALIFIED88Amy Elsner
1025Leja CaldareraRussia2025-10-03Feiner Bros NEGOTIATION9Ivan Magalhaes
1026Jeanfrancois VenereBrazil2025-10-24Truhlar And Truhlar Attys PROPOSAL93Amy Elsner
1027Octavia MaletCanada2025-10-04Printing Dimensions UNQUALIFIED75Asiya Javayant
1028Jennifer AmigonBrazil2025-10-31Dorl, James J Esq RENEWAL9Ivan Magalhaes
1029James ButtSpain2025-10-09Chanay, Jeffrey A Esq NEGOTIATION5Stephen Shaw
1030Tony FollerUnited Kingdom2025-10-23Chapman, Ross E Esq RENEWAL87Elwin Sharvill
1031Octavia MaletAustralia2025-10-21Chapman, Ross E Esq UNQUALIFIED88Ivan Magalhaes
1032Jennifer AmigonRussia2025-10-06Feiner Bros RENEWAL36Anna Fali
1033Leja CaldareraUnited Kingdom2025-10-04Truhlar And Truhlar Attys NEGOTIATION85Anna Fali
1034Cody SaylorsUnited Kingdom2025-10-10Printing Dimensions UNQUALIFIED64Onyama Limba
1035Johnson SergiItaly2025-10-06Dorl, James J Esq RENEWAL56Asiya Javayant
1036Aditya KuskoCanada2025-10-07Dorl, James J Esq PROPOSAL70Xuxue Feng
1037Maria MarrierUnited Kingdom2025-10-15Chanay, Jeffrey A Esq NEGOTIATION92Elwin Sharvill
1038Octavia MaletArgentina2025-10-03Truhlar And Truhlar Attys NEGOTIATION7Ivan Magalhaes
1039Leon OldroydAustralia2025-10-16Rangoni Of Florence RENEWAL36Bernardo Dominic
1040Jeanfrancois VenereRussia2025-10-21Chemel, James L Cpa NEW79Xuxue Feng
1041Adams MorascaBrazil2025-10-19Chemel, James L Cpa NEW60Amy Elsner
1042Antonio CaudyJapan2025-10-08Morlong Associates RENEWAL67Ioni Bowcher
1043Smith GlickJapan2025-10-18Buckley Miller Wright NEGOTIATION97Ivan Magalhaes
1044Tony FollerItaly2025-10-03Chapman, Ross E Esq UNQUALIFIED58Elwin Sharvill
1045Adams MorascaFrance2025-10-27Commercial Press RENEWAL52Ioni Bowcher
1046Faith GillianArgentina2025-10-30Chapman, Ross E Esq NEGOTIATION71Bernardo Dominic
1047Isabel BowleyJapan2025-10-13Dorl, James J Esq RENEWAL92Xuxue Feng
1048Kaitlin OstroskyJapan2025-10-27Rangoni Of Florence UNQUALIFIED79Elwin Sharvill
1049Smith GlickJapan2025-10-14Feltz Printing Service NEW47Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Emily WhobreySpainAmy Elsner UNQUALIFIED
Darci PoquetteRussiaAmy Elsner QUALIFIED
David DarakjyAustraliaXuxue Feng RENEWAL
Mujtaba NickaArgentinaStephen Shaw UNQUALIFIED
Faith GillianFranceIvan Magalhaes UNQUALIFIED
Octavia MaletIndiaOnyama Limba NEW
Adams MorascaCanadaOnyama Limba QUALIFIED
Jennifer AmigonArgentinaAsiya Javayant QUALIFIED
Octavia MaletAustraliaXuxue Feng NEGOTIATION
Smith GlickArgentinaOnyama Limba UNQUALIFIED
Kadeem FlosiIndiaBernardo Dominic PROPOSAL
Mujtaba NickaCanadaBernardo Dominic PROPOSAL
Jefferson SchemmerUnited KingdomIoni Bowcher PROPOSAL
Kadeem FlosiUnited KingdomElwin Sharvill QUALIFIED
Kadeem FlosiItalyIvan Magalhaes NEW
Ivar PaprockiItalyAnna Fali NEGOTIATION
Stacey MacleadBrazilAnna Fali UNQUALIFIED
Johnson SergiRussiaOnyama Limba RENEWAL
Smith GlickUnited KingdomStephen Shaw RENEWAL
Deepesh ChuiItalyBernardo Dominic UNQUALIFIED
Costa DilliardCanadaElwin Sharvill NEGOTIATION
Kadeem FlosiCanadaStephen Shaw NEGOTIATION
Emily WhobreyFranceIoni Bowcher NEW
Salvatore StockhamSpainXuxue Feng QUALIFIED
Aika InouyeRussiaAsiya Javayant UNQUALIFIED
Greenwood BologniaGermanyBernardo Dominic UNQUALIFIED
Clifford RimBrazilIoni Bowcher NEW
Misaki RoysterIndiaIoni Bowcher RENEWAL
Silvio SlusarskiUnited KingdomOnyama Limba UNQUALIFIED
Leon OldroydSpainIvan Magalhaes NEGOTIATION
Clifford RimGermanyStephen Shaw NEW
Jeanfrancois VenereRussiaAmy Elsner UNQUALIFIED
Jones VocelkaAustraliaAsiya Javayant QUALIFIED
Leja CaldareraAustraliaAsiya Javayant PROPOSAL
Greenwood BologniaBrazilAnna Fali NEGOTIATION
Greenwood BologniaSpainElwin Sharvill UNQUALIFIED
Faith GillianGermanyIoni Bowcher PROPOSAL
Maisha RulapaughItalyStephen Shaw QUALIFIED
Kaitlin OstroskyFranceXuxue Feng PROPOSAL
Cody SaylorsAustraliaStephen Shaw RENEWAL
Jones VocelkaArgentinaXuxue Feng QUALIFIED
Misaki RoysterAustraliaOnyama Limba QUALIFIED
James ButtBrazilElwin Sharvill UNQUALIFIED
Adams MorascaUnited KingdomElwin Sharvill PROPOSAL
Tony FollerAustraliaAmy Elsner NEW
Darci PoquetteArgentinaAmy Elsner NEGOTIATION
Izzy GarufiAustraliaIvan Magalhaes NEW
Ashley DoeCanadaIoni Bowcher PROPOSAL
Leon OldroydSpainBernardo Dominic PROPOSAL
Jones VocelkaJapanStephen Shaw NEW
Frozen Columns
Name
Mujtaba Nicka
Julie Stenseth
Ivar Paprocki
Julie Stenseth
Kadeem Flosi
Silvio Slusarski
Mujtaba Nicka
David Darakjy
Chavez Briddick
Deepesh Chui
Kadeem Flosi
Julie Stenseth
Aruna Figeroa
Deepesh Chui
Izzy Garufi
Isabel Bowley
Clifford Rim
Johnson Sergi
Aditya Kusko
Stacey Maclead
Chavez Briddick
Costa Dilliard
Izzy Garufi
David Darakjy
Ashley Doe
Aruna Figeroa
Salvatore Stockham
Kaitlin Ostrosky
Smith Glick
Ivar Paprocki
Jeanfrancois Venere
Jennifer Amigon
Izzy Garufi
Aditya Kusko
Kadeem Flosi
Salvatore Stockham
Aika Inouye
Juan Wieser
Francesco Shinko
Juan Wieser
Stacey Maclead
Jefferson Schemmer
Juan Wieser
Emily Whobrey
Wickens Nestle
Stacey Maclead
Tony Foller
Morrow Ruta
Emily Whobrey
Costa Dilliard
IdCountryDate
1000Australia2025-10-31
1001Canada2025-10-23
1002United Kingdom2025-10-06
1003Canada2025-10-08
1004Russia2025-10-06
1005Germany2025-10-28
1006Germany2025-10-26
1007Japan2025-10-16
1008Russia2025-10-23
1009Japan2025-10-24
1010France2025-10-29
1011France2025-10-06
1012Spain2025-10-24
1013Japan2025-10-19
1014Australia2025-10-04
1015United Kingdom2025-10-15
1016Canada2025-10-04
1017Japan2025-10-17
1018Russia2025-10-22
1019France2025-10-30
1020France2025-10-11
1021India2025-10-25
1022United Kingdom2025-10-06
1023Canada2025-10-31
1024Brazil2025-10-11
1025Australia2025-10-06
1026India2025-10-05
1027United Kingdom2025-10-10
1028Spain2025-10-30
1029Brazil2025-10-31
1030France2025-10-08
1031Argentina2025-11-01
1032Australia2025-10-23
1033Brazil2025-10-18
1034Germany2025-10-31
1035Canada2025-10-04
1036Russia2025-10-03
1037Germany2025-10-18
1038India2025-10-27
1039Argentina2025-10-09
1040Germany2025-10-17
1041Argentina2025-10-15
1042Italy2025-10-20
1043India2025-10-09
1044Australia2025-10-11
1045Russia2025-10-14
1046Australia2025-10-16
1047Canada2025-10-17
1048Canada2025-10-08
1049Brazil2025-10-17

On-Demand Data

NameIdCountryDate
Silvio Slusarski1000France2025-10-07
Jeanfrancois Venere1001Argentina2025-10-17
Adams Morasca1002Brazil2025-10-08
Misaki Royster1003Australia2025-10-03
Maria Marrier1004Russia2025-10-24
Kaitlin Ostrosky1005Canada2025-10-03
Chavez Briddick1006Italy2025-10-04
Misaki Royster1007Germany2025-10-20
Kadeem Flosi1008Italy2025-10-13
Claire Tollner1009India2025-10-21
Nicolas Iturbide1010Japan2025-10-04
Izzy Garufi1011Russia2025-10-25
Cody Saylors1012Australia2025-10-20
Wickens Nestle1013Australia2025-10-08
Arvin Albares1014United Kingdom2025-11-01
Wickens Nestle1015Italy2025-10-25
Francesco Shinko1016United Kingdom2025-10-28
Greenwood Bolognia1017Japan2025-10-31
Faith Gillian1018Germany2025-10-07
Claire Tollner1019Australia2025-10-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Leon OldroydGermanyAnna Fali NEGOTIATION
Jeanfrancois VenereJapanIvan Magalhaes QUALIFIED
Nicolas IturbideArgentinaIoni Bowcher UNQUALIFIED
Francesco ShinkoAustraliaAnna Fali QUALIFIED
Jefferson SchemmerIndiaAnna Fali QUALIFIED
Francesco ShinkoArgentinaAnna Fali QUALIFIED
Julie StensethRussiaIvan Magalhaes QUALIFIED
Aruna FigeroaBrazilAnna Fali NEGOTIATION
Julie StensethArgentinaIvan Magalhaes PROPOSAL
Francesco ShinkoRussiaOnyama Limba PROPOSAL
Silvio SlusarskiIndiaAsiya Javayant NEGOTIATION
Johnson SergiGermanyStephen Shaw UNQUALIFIED
Greenwood BologniaItalyAnna Fali RENEWAL
Jeanfrancois VenereJapanIvan Magalhaes UNQUALIFIED
Rodrigues CampainIndiaAsiya Javayant NEGOTIATION
Chavez BriddickGermanyElwin Sharvill NEW
Alejandro PerinCanadaXuxue Feng NEGOTIATION
Izzy GarufiCanadaAnna Fali NEGOTIATION
Jefferson SchemmerRussiaStephen Shaw UNQUALIFIED
Leja CaldareraAustraliaIvan Magalhaes NEW
Munro FerenczGermanyStephen Shaw RENEWAL
Murillo MaletItalyStephen Shaw NEW
Faith GillianSpainAsiya Javayant NEGOTIATION
Mujtaba NickaAustraliaOnyama Limba NEGOTIATION
Chavez BriddickArgentinaOnyama Limba UNQUALIFIED
Mujtaba NickaGermanyAsiya Javayant NEW
David DarakjyArgentinaIvan Magalhaes NEGOTIATION
Arvin AlbaresAustraliaElwin Sharvill UNQUALIFIED
Arvin AlbaresJapanAsiya Javayant QUALIFIED
Antonio CaudyIndiaXuxue Feng NEGOTIATION
Munro FerenczUnited KingdomOnyama Limba UNQUALIFIED
Emily WhobreyJapanAsiya Javayant RENEWAL
Jones VocelkaArgentinaIoni Bowcher PROPOSAL
Adams MorascaCanadaOnyama Limba NEW
Octavia MaletSpainXuxue Feng NEGOTIATION
Sinclair WaycottBrazilOnyama Limba NEW
Clifford RimUnited KingdomAmy Elsner NEW
Maria MarrierRussiaAmy Elsner NEW
James ButtGermanyStephen Shaw UNQUALIFIED
Ricardo GauchoUnited KingdomAmy Elsner 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>