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 MarrierRussiaAmy Elsner PROPOSAL
Smith GlickIndiaBernardo Dominic NEW
Mayumi KolmetzFranceIoni Bowcher UNQUALIFIED
Misaki RoysterFranceOnyama Limba NEGOTIATION
Isabel BowleyItalyXuxue Feng NEW
Aruna FigeroaItalyAnna Fali UNQUALIFIED
Alejandro PerinFranceStephen Shaw PROPOSAL
Munro FerenczIndiaOnyama Limba RENEWAL
Ivar PaprockiUnited KingdomOnyama Limba UNQUALIFIED
James ButtIndiaIoni Bowcher QUALIFIED
Julie StensethFranceIoni Bowcher RENEWAL
Isabel BowleyUnited KingdomIvan Magalhaes NEGOTIATION
Jennifer AmigonSpainIvan Magalhaes RENEWAL
Aruna FigeroaAustraliaAsiya Javayant NEW
Morrow RutaUnited KingdomAmy Elsner NEGOTIATION
Cody SaylorsIndiaStephen Shaw PROPOSAL
Adams MorascaFranceAnna Fali QUALIFIED
Costa DilliardGermanyStephen Shaw PROPOSAL
Julie StensethAustraliaStephen Shaw QUALIFIED
Antonio CaudyFranceElwin Sharvill NEGOTIATION
Clifford RimCanadaStephen Shaw NEW
Maisha RulapaughFranceAsiya Javayant PROPOSAL
Julie StensethIndiaXuxue Feng RENEWAL
Leon OldroydUnited KingdomElwin Sharvill PROPOSAL
Jones VocelkaAustraliaIvan Magalhaes PROPOSAL
Smith GlickCanadaXuxue Feng NEW
Kaitlin OstroskyItalyIoni Bowcher UNQUALIFIED
Deepesh ChuiJapanAnna Fali NEGOTIATION
Kadeem FlosiSpainAnna Fali UNQUALIFIED
Aruna FigeroaArgentinaElwin Sharvill UNQUALIFIED
Darci PoquetteRussiaStephen Shaw NEW
Maria MarrierItalyStephen Shaw NEW
Darci PoquetteItalyBernardo Dominic NEGOTIATION
Salvatore StockhamArgentinaBernardo Dominic PROPOSAL
Aditya KuskoBrazilStephen Shaw NEW
Maisha RulapaughSpainAsiya Javayant UNQUALIFIED
Deepesh ChuiJapanAsiya Javayant QUALIFIED
James ButtCanadaXuxue Feng QUALIFIED
Smith GlickJapanBernardo Dominic NEGOTIATION
Jeanfrancois VenereRussiaAnna Fali UNQUALIFIED
Kaitlin OstroskyJapanStephen Shaw QUALIFIED
Chavez BriddickItalyAmy Elsner QUALIFIED
Ivar PaprockiAustraliaIoni Bowcher NEW
Maisha RulapaughRussiaAsiya Javayant QUALIFIED
Julie StensethIndiaXuxue Feng QUALIFIED
David DarakjyRussiaIvan Magalhaes RENEWAL
Ricardo GauchoBrazilElwin Sharvill RENEWAL
Ivar PaprockiSpainAsiya Javayant NEGOTIATION
Sinclair WaycottJapanAsiya Javayant UNQUALIFIED
Maisha RulapaughAustraliaAmy Elsner NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Claire TollnerCanadaAnna Fali PROPOSAL
Silvio SlusarskiCanadaAnna Fali NEW
Sinclair WaycottUnited KingdomAmy Elsner NEW
Arvin AlbaresJapanXuxue Feng UNQUALIFIED
Kadeem FlosiFranceBernardo Dominic NEGOTIATION
Maisha RulapaughBrazilOnyama Limba UNQUALIFIED
Murillo MaletJapanAmy Elsner QUALIFIED
Chavez BriddickRussiaAsiya Javayant PROPOSAL
Darci PoquetteCanadaOnyama Limba PROPOSAL
Murillo MaletItalyAsiya Javayant QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereIndia2025-08-13Morlong Associates RENEWAL41Anna Fali
1001Leon OldroydRussia2025-08-10Chapman, Ross E Esq RENEWAL92Stephen Shaw
1002Cody SaylorsUnited Kingdom2025-08-13Feltz Printing Service RENEWAL60Bernardo Dominic
1003Aruna FigeroaBrazil2025-08-02Rangoni Of Florence QUALIFIED38Amy Elsner
1004Ashley DoeBrazil2025-07-17Buckley Miller Wright PROPOSAL47Stephen Shaw
1005Clifford RimUnited Kingdom2025-08-12Truhlar And Truhlar Attys QUALIFIED24Bernardo Dominic
1006Salvatore StockhamSpain2025-08-06Feiner Bros NEGOTIATION98Onyama Limba
1007Tony FollerFrance2025-07-31Chemel, James L Cpa UNQUALIFIED86Onyama Limba
1008Cody SaylorsCanada2025-07-29Commercial Press RENEWAL39Asiya Javayant
1009Aruna FigeroaSpain2025-07-20Rousseaux, Michael Esq QUALIFIED20Anna Fali
1010Misaki RoysterItaly2025-08-01Buckley Miller Wright NEGOTIATION0Asiya Javayant
1011Morrow RutaJapan2025-08-02Chanay, Jeffrey A Esq UNQUALIFIED66Stephen Shaw
1012Isabel BowleyItaly2025-07-29King, Christopher A Esq UNQUALIFIED63Bernardo Dominic
1013Munro FerenczUnited Kingdom2025-08-06Feiner Bros NEGOTIATION74Onyama Limba
1014Adams MorascaItaly2025-07-21King, Christopher A Esq UNQUALIFIED52Amy Elsner
1015Ricardo GauchoJapan2025-07-27Chanay, Jeffrey A Esq QUALIFIED89Onyama Limba
1016Tony FollerSpain2025-07-29Truhlar And Truhlar Attys UNQUALIFIED35Xuxue Feng
1017Nicolas IturbideItaly2025-08-05Benton, John B Jr QUALIFIED18Anna Fali
1018Munro FerenczAustralia2025-08-07King, Christopher A Esq UNQUALIFIED65Stephen Shaw
1019Stacey MacleadSpain2025-08-03Truhlar And Truhlar Attys RENEWAL44Onyama Limba
1020Julie StensethItaly2025-08-15Chanay, Jeffrey A Esq NEW33Asiya Javayant
1021Salvatore StockhamBrazil2025-08-13Rousseaux, Michael Esq UNQUALIFIED78Ioni Bowcher
1022Maria MarrierBrazil2025-08-07Feltz Printing Service UNQUALIFIED54Stephen Shaw
1023Faith GillianArgentina2025-07-27Truhlar And Truhlar Attys RENEWAL12Bernardo Dominic
1024Cody SaylorsIndia2025-08-03Truhlar And Truhlar Attys QUALIFIED6Ioni Bowcher
1025Jennifer AmigonAustralia2025-07-27Commercial Press QUALIFIED24Bernardo Dominic
1026Antonio CaudyIndia2025-08-06Rousseaux, Michael Esq NEW4Elwin Sharvill
1027Mujtaba NickaBrazil2025-07-17Rousseaux, Michael Esq PROPOSAL90Onyama Limba
1028Silvio SlusarskiFrance2025-08-02Chanay, Jeffrey A Esq NEGOTIATION38Amy Elsner
1029Wickens NestleArgentina2025-08-06Printing Dimensions QUALIFIED45Ivan Magalhaes
1030Deepesh ChuiUnited Kingdom2025-08-01Truhlar And Truhlar Attys RENEWAL71Stephen Shaw
1031Izzy GarufiRussia2025-07-31Rangoni Of Florence NEW50Bernardo Dominic
1032Clifford RimItaly2025-07-28Chanay, Jeffrey A Esq RENEWAL80Elwin Sharvill
1033Aditya KuskoSpain2025-08-01Chapman, Ross E Esq NEGOTIATION48Ivan Magalhaes
1034Francesco ShinkoRussia2025-07-20King, Christopher A Esq UNQUALIFIED69Amy Elsner
1035Chavez BriddickFrance2025-07-21King, Christopher A Esq RENEWAL55Stephen Shaw
1036Greenwood BologniaAustralia2025-08-03Rangoni Of Florence NEGOTIATION75Stephen Shaw
1037Jennifer AmigonAustralia2025-08-01Benton, John B Jr RENEWAL96Elwin Sharvill
1038Maisha RulapaughArgentina2025-08-08Rangoni Of Florence PROPOSAL96Asiya Javayant
1039Rodrigues CampainIndia2025-07-17Morlong Associates PROPOSAL86Xuxue Feng
1040Jennifer AmigonItaly2025-08-06Rousseaux, Michael Esq QUALIFIED77Onyama Limba
1041Claire TollnerUnited Kingdom2025-08-03Rousseaux, Michael Esq UNQUALIFIED24Stephen Shaw
1042Aditya KuskoUnited Kingdom2025-07-23Feiner Bros NEGOTIATION58Ioni Bowcher
1043Salvatore StockhamJapan2025-07-26King, Christopher A Esq RENEWAL84Onyama Limba
1044Chavez BriddickCanada2025-08-11Chemel, James L Cpa UNQUALIFIED57Onyama Limba
1045Cody SaylorsJapan2025-07-24Commercial Press NEW12Amy Elsner
1046Leon OldroydBrazil2025-07-28Benton, John B Jr QUALIFIED14Elwin Sharvill
1047Faith GillianArgentina2025-08-08Commercial Press PROPOSAL59Onyama Limba
1048Tony FollerUnited Kingdom2025-08-09Chapman, Ross E Esq NEW14Onyama Limba
1049Kaitlin OstroskyCanada2025-08-05Printing Dimensions UNQUALIFIED27Stephen Shaw
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaItalyBernardo Dominic NEW
Juan WieserUnited KingdomStephen Shaw RENEWAL
Francesco ShinkoJapanAnna Fali QUALIFIED
Aruna FigeroaFranceAmy Elsner QUALIFIED
Mayumi KolmetzFranceStephen Shaw NEGOTIATION
Maisha RulapaughFranceIoni Bowcher NEGOTIATION
Julie StensethArgentinaElwin Sharvill NEGOTIATION
Silvio SlusarskiJapanIvan Magalhaes PROPOSAL
Maria MarrierCanadaAsiya Javayant NEW
Misaki RoysterCanadaStephen Shaw RENEWAL
Salvatore StockhamArgentinaStephen Shaw RENEWAL
Morrow RutaUnited KingdomElwin Sharvill UNQUALIFIED
Antonio CaudyIndiaXuxue Feng PROPOSAL
Salvatore StockhamGermanyStephen Shaw NEGOTIATION
Kadeem FlosiGermanyIvan Magalhaes NEGOTIATION
James ButtJapanXuxue Feng PROPOSAL
Claire TollnerSpainAsiya Javayant NEGOTIATION
Ivar PaprockiUnited KingdomIoni Bowcher NEW
Ricardo GauchoArgentinaXuxue Feng NEGOTIATION
Ricardo GauchoBrazilIvan Magalhaes NEW
Greenwood BologniaArgentinaXuxue Feng RENEWAL
Nicolas IturbideFranceIvan Magalhaes UNQUALIFIED
Misaki RoysterJapanAnna Fali NEW
Julie StensethFranceXuxue Feng UNQUALIFIED
Octavia MaletItalyIvan Magalhaes NEW
Aditya KuskoSpainAnna Fali RENEWAL
Aruna FigeroaUnited KingdomAnna Fali UNQUALIFIED
Morrow RutaRussiaIoni Bowcher RENEWAL
Darci PoquetteUnited KingdomAnna Fali NEW
Ricardo GauchoJapanAsiya Javayant RENEWAL
Aika InouyeCanadaAmy Elsner NEW
Faith GillianJapanXuxue Feng RENEWAL
Stacey MacleadRussiaXuxue Feng UNQUALIFIED
James ButtIndiaAnna Fali NEW
Tony FollerGermanyAnna Fali QUALIFIED
Munro FerenczAustraliaIvan Magalhaes RENEWAL
Costa DilliardBrazilElwin Sharvill NEW
Maria MarrierAustraliaXuxue Feng NEW
Murillo MaletUnited KingdomIoni Bowcher NEW
Claire TollnerCanadaIoni Bowcher QUALIFIED
Francesco ShinkoJapanBernardo Dominic UNQUALIFIED
Aditya KuskoFranceAsiya Javayant NEW
Maria MarrierCanadaAsiya Javayant NEGOTIATION
Isabel BowleyUnited KingdomIoni Bowcher QUALIFIED
Leja CaldareraGermanyAnna Fali RENEWAL
Jeanfrancois VenereIndiaAsiya Javayant NEW
Kaitlin OstroskyItalyAsiya Javayant QUALIFIED
Claire TollnerSpainIvan Magalhaes QUALIFIED
Ricardo GauchoIndiaStephen Shaw NEW
Costa DilliardAustraliaIoni Bowcher NEGOTIATION
Frozen Columns
Name
Darci Poquette
Aika Inouye
Aditya Kusko
Nicolas Iturbide
Chavez Briddick
Aditya Kusko
Tony Foller
Aditya Kusko
Silvio Slusarski
Jennifer Amigon
Kaitlin Ostrosky
Maisha Rulapaugh
Mujtaba Nicka
Mayumi Kolmetz
Jeanfrancois Venere
Juan Wieser
Clifford Rim
Salvatore Stockham
Wickens Nestle
Izzy Garufi
Jennifer Amigon
Ashley Doe
Jennifer Amigon
Alejandro Perin
Mayumi Kolmetz
Deepesh Chui
Misaki Royster
Ricardo Gaucho
Aditya Kusko
Wickens Nestle
Murillo Malet
Morrow Ruta
Leon Oldroyd
Chavez Briddick
Kaitlin Ostrosky
Tony Foller
Nicolas Iturbide
Leja Caldarera
Ashley Doe
Aditya Kusko
Morrow Ruta
Nicolas Iturbide
Rodrigues Campain
Francesco Shinko
Izzy Garufi
Murillo Malet
Sinclair Waycott
Smith Glick
Juan Wieser
Deepesh Chui
IdCountryDate
1000Spain2025-07-22
1001Italy2025-07-19
1002France2025-08-05
1003Italy2025-08-11
1004Canada2025-07-22
1005Germany2025-08-09
1006United Kingdom2025-07-23
1007Germany2025-08-08
1008Argentina2025-08-14
1009Spain2025-08-08
1010Russia2025-07-18
1011Spain2025-07-22
1012Italy2025-07-20
1013United Kingdom2025-08-07
1014France2025-08-15
1015United Kingdom2025-08-03
1016France2025-07-20
1017Spain2025-08-05
1018Canada2025-07-19
1019Italy2025-07-28
1020Spain2025-07-28
1021United Kingdom2025-08-08
1022Italy2025-07-28
1023Japan2025-08-07
1024Spain2025-07-27
1025Italy2025-07-19
1026Italy2025-07-29
1027Italy2025-08-06
1028Italy2025-08-15
1029Japan2025-07-22
1030Canada2025-07-20
1031India2025-07-22
1032Italy2025-07-29
1033Germany2025-07-25
1034Italy2025-08-11
1035Canada2025-08-03
1036Argentina2025-08-03
1037India2025-07-21
1038Brazil2025-08-06
1039United Kingdom2025-07-18
1040United Kingdom2025-08-12
1041Australia2025-07-25
1042Germany2025-07-19
1043France2025-08-06
1044India2025-07-23
1045Argentina2025-08-04
1046India2025-07-21
1047United Kingdom2025-07-30
1048Spain2025-07-28
1049Australia2025-08-13

On-Demand Data

NameIdCountryDate
Tony Foller1000Canada2025-07-23
Silvio Slusarski1001Spain2025-08-15
Alejandro Perin1002Brazil2025-08-14
Ashley Doe1003Spain2025-07-23
Jeanfrancois Venere1004Japan2025-08-11
Munro Ferencz1005Italy2025-08-09
Salvatore Stockham1006Australia2025-08-04
Costa Dilliard1007Italy2025-07-20
Isabel Bowley1008Japan2025-07-30
Mujtaba Nicka1009France2025-08-05
Ricardo Gaucho1010Canada2025-08-02
Julie Stenseth1011India2025-07-18
Emily Whobrey1012India2025-08-09
Juan Wieser1013Russia2025-08-02
Aruna Figeroa1014United Kingdom2025-08-01
Leja Caldarera1015Russia2025-07-17
Francesco Shinko1016Canada2025-07-22
Misaki Royster1017Germany2025-08-02
Jefferson Schemmer1018United Kingdom2025-08-11
Maisha Rulapaugh1019Canada2025-08-12
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteSpainElwin Sharvill UNQUALIFIED
Kadeem FlosiRussiaOnyama Limba NEW
Tony FollerJapanBernardo Dominic NEGOTIATION
Darci PoquetteSpainAmy Elsner PROPOSAL
Octavia MaletBrazilElwin Sharvill UNQUALIFIED
Juan WieserArgentinaOnyama Limba NEGOTIATION
Francesco ShinkoArgentinaBernardo Dominic NEGOTIATION
Aika InouyeItalyAsiya Javayant UNQUALIFIED
Clifford RimSpainOnyama Limba PROPOSAL
Aruna FigeroaUnited KingdomElwin Sharvill PROPOSAL
Smith GlickFranceAnna Fali UNQUALIFIED
Ashley DoeFranceBernardo Dominic PROPOSAL
Nicolas IturbideFranceAsiya Javayant RENEWAL
Cody SaylorsAustraliaBernardo Dominic NEGOTIATION
Isabel BowleyItalyAmy Elsner RENEWAL
Jeanfrancois VenereItalyAnna Fali PROPOSAL
Ivar PaprockiUnited KingdomBernardo Dominic PROPOSAL
Mujtaba NickaGermanyOnyama Limba NEGOTIATION
Maisha RulapaughRussiaIoni Bowcher NEGOTIATION
Octavia MaletFranceStephen Shaw PROPOSAL
Murillo MaletBrazilIoni Bowcher NEGOTIATION
Aruna FigeroaIndiaStephen Shaw NEW
Faith GillianFranceAnna Fali NEW
Silvio SlusarskiAustraliaOnyama Limba PROPOSAL
Juan WieserCanadaAmy Elsner UNQUALIFIED
Adams MorascaIndiaBernardo Dominic NEW
Emily WhobreyJapanAmy Elsner RENEWAL
Mujtaba NickaIndiaAnna Fali RENEWAL
Nicolas IturbideIndiaIvan Magalhaes NEGOTIATION
Mujtaba NickaUnited KingdomElwin Sharvill NEGOTIATION
Adams MorascaSpainIvan Magalhaes PROPOSAL
Morrow RutaCanadaOnyama Limba RENEWAL
Stacey MacleadCanadaAnna Fali QUALIFIED
Claire TollnerFranceStephen Shaw NEW
Stacey MacleadFranceStephen Shaw PROPOSAL
James ButtSpainStephen Shaw PROPOSAL
Claire TollnerRussiaIvan Magalhaes UNQUALIFIED
Jeanfrancois VenereCanadaIvan Magalhaes PROPOSAL
Arvin AlbaresFranceIoni Bowcher NEW
Emily WhobreyCanadaOnyama Limba 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>