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
Misaki RoysterItalyIvan Magalhaes RENEWAL
Maisha RulapaughAustraliaBernardo Dominic QUALIFIED
Arvin AlbaresItalyXuxue Feng PROPOSAL
Darci PoquetteItalyIvan Magalhaes RENEWAL
Jennifer AmigonJapanBernardo Dominic QUALIFIED
Antonio CaudyUnited KingdomIvan Magalhaes RENEWAL
Isabel BowleyFranceElwin Sharvill PROPOSAL
Ashley DoeArgentinaAmy Elsner NEW
Claire TollnerRussiaIoni Bowcher QUALIFIED
Murillo MaletSpainOnyama Limba UNQUALIFIED
Francesco ShinkoBrazilStephen Shaw RENEWAL
Salvatore StockhamArgentinaAnna Fali QUALIFIED
Adams MorascaJapanOnyama Limba PROPOSAL
Costa DilliardJapanAmy Elsner NEGOTIATION
Cody SaylorsAustraliaAmy Elsner NEGOTIATION
Munro FerenczSpainIoni Bowcher UNQUALIFIED
Ricardo GauchoBrazilStephen Shaw QUALIFIED
Misaki RoysterRussiaAmy Elsner NEGOTIATION
Stacey MacleadJapanAmy Elsner QUALIFIED
Chavez BriddickFranceAnna Fali PROPOSAL
Emily WhobreyGermanyElwin Sharvill PROPOSAL
Stacey MacleadIndiaIvan Magalhaes RENEWAL
Rodrigues CampainAustraliaIvan Magalhaes PROPOSAL
Emily WhobreyArgentinaIvan Magalhaes NEGOTIATION
Kaitlin OstroskyGermanyAmy Elsner PROPOSAL
Tony FollerRussiaIvan Magalhaes QUALIFIED
Jeanfrancois VenereUnited KingdomAmy Elsner QUALIFIED
Faith GillianJapanXuxue Feng PROPOSAL
Leja CaldareraIndiaOnyama Limba NEW
Jefferson SchemmerGermanyElwin Sharvill QUALIFIED
Leja CaldareraGermanyStephen Shaw UNQUALIFIED
Leja CaldareraAustraliaBernardo Dominic NEGOTIATION
Leon OldroydIndiaOnyama Limba PROPOSAL
Misaki RoysterArgentinaXuxue Feng PROPOSAL
Maisha RulapaughAustraliaXuxue Feng NEW
Izzy GarufiGermanyAnna Fali PROPOSAL
Costa DilliardFranceOnyama Limba QUALIFIED
Jones VocelkaCanadaAnna Fali UNQUALIFIED
Munro FerenczArgentinaElwin Sharvill RENEWAL
Kadeem FlosiGermanyIoni Bowcher NEGOTIATION
Kaitlin OstroskyItalyXuxue Feng PROPOSAL
Kadeem FlosiBrazilOnyama Limba UNQUALIFIED
Kaitlin OstroskyJapanAnna Fali NEW
Maisha RulapaughSpainAnna Fali NEW
Rodrigues CampainUnited KingdomXuxue Feng NEGOTIATION
Sinclair WaycottIndiaIvan Magalhaes UNQUALIFIED
Emily WhobreyArgentinaBernardo Dominic RENEWAL
Kadeem FlosiIndiaAsiya Javayant RENEWAL
Deepesh ChuiRussiaIvan Magalhaes PROPOSAL
Leon OldroydUnited KingdomAnna Fali UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamFranceIvan Magalhaes QUALIFIED
Maria MarrierSpainBernardo Dominic UNQUALIFIED
Aditya KuskoRussiaElwin Sharvill PROPOSAL
Costa DilliardBrazilAnna Fali QUALIFIED
Alejandro PerinFranceAsiya Javayant NEGOTIATION
Alejandro PerinGermanyOnyama Limba NEW
Alejandro PerinFranceBernardo Dominic NEGOTIATION
Kaitlin OstroskyUnited KingdomOnyama Limba PROPOSAL
Darci PoquetteArgentinaStephen Shaw PROPOSAL
Salvatore StockhamAustraliaBernardo Dominic NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Maria MarrierRussia2026-06-05Benton, John B Jr PROPOSAL52Anna Fali
1001Izzy GarufiGermany2026-05-25Commercial Press NEGOTIATION48Ivan Magalhaes
1002Sinclair WaycottFrance2026-06-17King, Christopher A Esq QUALIFIED29Onyama Limba
1003Deepesh ChuiItaly2026-05-28Dorl, James J Esq UNQUALIFIED78Anna Fali
1004Ivar PaprockiIndia2026-05-26Chemel, James L Cpa NEGOTIATION28Amy Elsner
1005Deepesh ChuiAustralia2026-06-16Feltz Printing Service NEGOTIATION95Asiya Javayant
1006Isabel BowleyRussia2026-06-08Feiner Bros UNQUALIFIED61Asiya Javayant
1007Mujtaba NickaUnited Kingdom2026-06-06Printing Dimensions UNQUALIFIED23Ioni Bowcher
1008Smith GlickAustralia2026-05-29Chanay, Jeffrey A Esq RENEWAL72Ivan Magalhaes
1009Ivar PaprockiFrance2026-06-08Buckley Miller Wright RENEWAL85Onyama Limba
1010Cody SaylorsCanada2026-06-09Rangoni Of Florence NEW19Asiya Javayant
1011Octavia MaletIndia2026-06-13Chapman, Ross E Esq NEW94Bernardo Dominic
1012Aika InouyeBrazil2026-05-24Feiner Bros PROPOSAL24Amy Elsner
1013Chavez BriddickFrance2026-06-16Chemel, James L Cpa NEGOTIATION8Asiya Javayant
1014Munro FerenczGermany2026-06-09Morlong Associates NEW88Bernardo Dominic
1015Sinclair WaycottRussia2026-06-17Chapman, Ross E Esq PROPOSAL91Ivan Magalhaes
1016Octavia MaletBrazil2026-06-12Rangoni Of Florence NEW35Ivan Magalhaes
1017Adams MorascaRussia2026-06-17Morlong Associates PROPOSAL73Onyama Limba
1018Stacey MacleadItaly2026-05-30Buckley Miller Wright NEW37Amy Elsner
1019Alejandro PerinGermany2026-06-08Benton, John B Jr NEGOTIATION77Xuxue Feng
1020Leja CaldareraItaly2026-06-06Chapman, Ross E Esq QUALIFIED12Elwin Sharvill
1021Chavez BriddickItaly2026-05-31Rangoni Of Florence NEGOTIATION3Ivan Magalhaes
1022Jefferson SchemmerSpain2026-05-22Chanay, Jeffrey A Esq UNQUALIFIED51Anna Fali
1023Faith GillianArgentina2026-06-07Commercial Press PROPOSAL92Ioni Bowcher
1024Jefferson SchemmerGermany2026-05-26Chemel, James L Cpa UNQUALIFIED43Ioni Bowcher
1025Darci PoquetteUnited Kingdom2026-05-22Benton, John B Jr NEW32Ioni Bowcher
1026Ivar PaprockiArgentina2026-06-05Commercial Press RENEWAL70Ivan Magalhaes
1027Francesco ShinkoJapan2026-05-31Rangoni Of Florence NEW73Ioni Bowcher
1028Faith GillianJapan2026-05-29Chapman, Ross E Esq QUALIFIED58Amy Elsner
1029Darci PoquetteBrazil2026-05-29Chapman, Ross E Esq NEW83Asiya Javayant
1030Octavia MaletSpain2026-06-01Rousseaux, Michael Esq RENEWAL74Amy Elsner
1031Rodrigues CampainItaly2026-06-18Buckley Miller Wright NEGOTIATION86Ioni Bowcher
1032Ricardo GauchoUnited Kingdom2026-05-25Chapman, Ross E Esq QUALIFIED3Ivan Magalhaes
1033Octavia MaletUnited Kingdom2026-06-01Truhlar And Truhlar Attys NEGOTIATION89Asiya Javayant
1034Munro FerenczRussia2026-05-26Buckley Miller Wright NEGOTIATION37Asiya Javayant
1035Adams MorascaJapan2026-06-18Morlong Associates PROPOSAL93Amy Elsner
1036Munro FerenczGermany2026-06-15Chapman, Ross E Esq PROPOSAL18Amy Elsner
1037Leja CaldareraCanada2026-05-29Buckley Miller Wright NEGOTIATION76Onyama Limba
1038Jennifer AmigonSpain2026-05-26Commercial Press UNQUALIFIED1Ivan Magalhaes
1039Leon OldroydItaly2026-06-14Buckley Miller Wright NEGOTIATION97Stephen Shaw
1040Jeanfrancois VenereSpain2026-05-21Printing Dimensions PROPOSAL44Asiya Javayant
1041Arvin AlbaresItaly2026-06-12Buckley Miller Wright RENEWAL87Onyama Limba
1042Jefferson SchemmerCanada2026-06-02Buckley Miller Wright QUALIFIED19Amy Elsner
1043Leon OldroydItaly2026-06-07Rousseaux, Michael Esq QUALIFIED84Asiya Javayant
1044Sinclair WaycottUnited Kingdom2026-06-08Rousseaux, Michael Esq PROPOSAL83Onyama Limba
1045Clifford RimJapan2026-06-18Rousseaux, Michael Esq QUALIFIED0Xuxue Feng
1046Salvatore StockhamItaly2026-06-07King, Christopher A Esq RENEWAL40Ioni Bowcher
1047Smith GlickAustralia2026-05-31Feltz Printing Service NEGOTIATION78Bernardo Dominic
1048Jefferson SchemmerArgentina2026-05-28Commercial Press RENEWAL2Amy Elsner
1049Emily WhobreyFrance2026-06-04Chapman, Ross E Esq UNQUALIFIED42Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoJapanAsiya Javayant NEGOTIATION
Morrow RutaJapanIvan Magalhaes QUALIFIED
Smith GlickFranceIoni Bowcher PROPOSAL
Ashley DoeRussiaIoni Bowcher RENEWAL
Kaitlin OstroskyItalyIvan Magalhaes RENEWAL
Emily WhobreyItalyAnna Fali QUALIFIED
Leja CaldareraCanadaAnna Fali UNQUALIFIED
Munro FerenczRussiaAmy Elsner NEGOTIATION
Jefferson SchemmerGermanyXuxue Feng QUALIFIED
Leon OldroydSpainAmy Elsner NEW
Greenwood BologniaBrazilIvan Magalhaes QUALIFIED
Wickens NestleRussiaAnna Fali QUALIFIED
Murillo MaletIndiaIvan Magalhaes NEW
Arvin AlbaresArgentinaElwin Sharvill PROPOSAL
Morrow RutaUnited KingdomElwin Sharvill RENEWAL
Francesco ShinkoIndiaOnyama Limba UNQUALIFIED
Jeanfrancois VenereArgentinaIvan Magalhaes QUALIFIED
Mujtaba NickaUnited KingdomXuxue Feng NEW
Jennifer AmigonRussiaIvan Magalhaes RENEWAL
Arvin AlbaresRussiaAsiya Javayant RENEWAL
Rodrigues CampainAustraliaAsiya Javayant PROPOSAL
Arvin AlbaresSpainStephen Shaw NEGOTIATION
Deepesh ChuiFranceElwin Sharvill NEGOTIATION
Chavez BriddickIndiaBernardo Dominic RENEWAL
Izzy GarufiGermanyAmy Elsner NEGOTIATION
Costa DilliardAustraliaAnna Fali PROPOSAL
Cody SaylorsArgentinaOnyama Limba UNQUALIFIED
Leja CaldareraArgentinaAmy Elsner NEW
Claire TollnerAustraliaXuxue Feng RENEWAL
Maria MarrierIndiaOnyama Limba NEGOTIATION
Isabel BowleySpainStephen Shaw RENEWAL
Jennifer AmigonFranceAsiya Javayant UNQUALIFIED
Morrow RutaAustraliaStephen Shaw RENEWAL
Aruna FigeroaUnited KingdomXuxue Feng NEGOTIATION
Maria MarrierCanadaIvan Magalhaes NEGOTIATION
Maria MarrierGermanyElwin Sharvill UNQUALIFIED
Kadeem FlosiArgentinaIoni Bowcher UNQUALIFIED
Juan WieserArgentinaElwin Sharvill NEGOTIATION
Stacey MacleadIndiaStephen Shaw UNQUALIFIED
Ivar PaprockiSpainElwin Sharvill NEW
Jeanfrancois VenereGermanyAnna Fali PROPOSAL
Darci PoquetteJapanAsiya Javayant RENEWAL
Wickens NestleArgentinaAmy Elsner NEW
Tony FollerFranceXuxue Feng NEW
Arvin AlbaresGermanyIvan Magalhaes QUALIFIED
Silvio SlusarskiFranceIvan Magalhaes RENEWAL
Misaki RoysterJapanAnna Fali NEW
Maisha RulapaughIndiaBernardo Dominic UNQUALIFIED
James ButtItalyBernardo Dominic NEW
Johnson SergiRussiaOnyama Limba QUALIFIED
Frozen Columns
Name
Misaki Royster
Arvin Albares
Kaitlin Ostrosky
Leja Caldarera
Octavia Malet
Clifford Rim
Deepesh Chui
Jones Vocelka
Jeanfrancois Venere
Munro Ferencz
Munro Ferencz
Tony Foller
Faith Gillian
Stacey Maclead
Johnson Sergi
Ricardo Gaucho
Salvatore Stockham
Ricardo Gaucho
Tony Foller
Rodrigues Campain
Leon Oldroyd
Antonio Caudy
Greenwood Bolognia
Silvio Slusarski
Deepesh Chui
Juan Wieser
Kaitlin Ostrosky
Adams Morasca
Izzy Garufi
Izzy Garufi
Cody Saylors
Jones Vocelka
Faith Gillian
Nicolas Iturbide
Leja Caldarera
Jones Vocelka
Leja Caldarera
Jones Vocelka
Morrow Ruta
Kadeem Flosi
Juan Wieser
Faith Gillian
Cody Saylors
Adams Morasca
Murillo Malet
Francesco Shinko
Izzy Garufi
Claire Tollner
Deepesh Chui
Smith Glick
IdCountryDate
1000Canada2026-05-21
1001Spain2026-06-07
1002France2026-05-22
1003Japan2026-06-12
1004Russia2026-06-06
1005Canada2026-05-22
1006Brazil2026-06-12
1007Australia2026-06-13
1008Russia2026-05-28
1009Spain2026-05-31
1010Japan2026-06-13
1011Italy2026-05-25
1012Japan2026-06-19
1013Italy2026-05-24
1014Russia2026-06-11
1015France2026-06-14
1016Canada2026-06-15
1017Spain2026-06-15
1018United Kingdom2026-06-04
1019France2026-05-30
1020Spain2026-06-10
1021India2026-05-24
1022Brazil2026-06-11
1023India2026-06-15
1024Italy2026-06-08
1025Japan2026-06-05
1026Germany2026-05-27
1027Italy2026-05-27
1028Canada2026-05-30
1029France2026-06-08
1030Japan2026-05-22
1031Germany2026-06-08
1032Russia2026-06-17
1033Japan2026-06-15
1034Japan2026-05-22
1035Brazil2026-06-08
1036Australia2026-06-16
1037Russia2026-06-13
1038Italy2026-06-10
1039United Kingdom2026-06-02
1040United Kingdom2026-05-22
1041Australia2026-06-11
1042Australia2026-06-08
1043United Kingdom2026-06-13
1044India2026-06-04
1045Canada2026-06-17
1046Russia2026-06-04
1047Brazil2026-05-29
1048Canada2026-06-19
1049India2026-05-27

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000France2026-06-01
Stacey Maclead1001Russia2026-06-08
Faith Gillian1002India2026-06-06
Jennifer Amigon1003Spain2026-06-14
Deepesh Chui1004Australia2026-05-29
Munro Ferencz1005Spain2026-06-06
Morrow Ruta1006Russia2026-06-15
Claire Tollner1007France2026-05-28
Morrow Ruta1008Australia2026-06-06
Leon Oldroyd1009Brazil2026-06-16
Kadeem Flosi1010Germany2026-06-02
Francesco Shinko1011Japan2026-05-29
Alejandro Perin1012Italy2026-06-03
Ricardo Gaucho1013Canada2026-06-08
Cody Saylors1014Australia2026-05-22
Greenwood Bolognia1015United Kingdom2026-06-18
Deepesh Chui1016Russia2026-05-27
Costa Dilliard1017Italy2026-06-02
Costa Dilliard1018France2026-06-12
Cody Saylors1019Japan2026-06-07
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Murillo MaletRussiaAmy Elsner NEW
Ricardo GauchoGermanyOnyama Limba QUALIFIED
Octavia MaletGermanyIvan Magalhaes NEGOTIATION
Costa DilliardFranceAmy Elsner RENEWAL
David DarakjyIndiaAmy Elsner PROPOSAL
Isabel BowleyAustraliaXuxue Feng UNQUALIFIED
Wickens NestleJapanIvan Magalhaes PROPOSAL
Leja CaldareraCanadaElwin Sharvill NEGOTIATION
Greenwood BologniaRussiaBernardo Dominic NEGOTIATION
Tony FollerArgentinaBernardo Dominic RENEWAL
Ashley DoeItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinJapanAmy Elsner QUALIFIED
Mujtaba NickaAustraliaIvan Magalhaes RENEWAL
Clifford RimFranceStephen Shaw UNQUALIFIED
Clifford RimIndiaElwin Sharvill RENEWAL
Juan WieserJapanXuxue Feng NEGOTIATION
Silvio SlusarskiBrazilAsiya Javayant NEGOTIATION
Silvio SlusarskiSpainIoni Bowcher NEW
Mujtaba NickaBrazilIoni Bowcher RENEWAL
Adams MorascaItalyAnna Fali NEGOTIATION
Aruna FigeroaRussiaElwin Sharvill UNQUALIFIED
Adams MorascaItalyAnna Fali NEGOTIATION
Jeanfrancois VenereGermanyXuxue Feng NEW
Murillo MaletGermanyElwin Sharvill NEGOTIATION
Ricardo GauchoIndiaIvan Magalhaes NEW
Izzy GarufiIndiaIvan Magalhaes RENEWAL
Antonio CaudyJapanIvan Magalhaes NEGOTIATION
Sinclair WaycottBrazilElwin Sharvill NEGOTIATION
Adams MorascaSpainXuxue Feng NEW
Silvio SlusarskiFranceAnna Fali NEGOTIATION
Jeanfrancois VenereRussiaXuxue Feng NEGOTIATION
Darci PoquetteGermanyElwin Sharvill PROPOSAL
Emily WhobreyArgentinaXuxue Feng QUALIFIED
James ButtIndiaBernardo Dominic PROPOSAL
Murillo MaletRussiaAsiya Javayant QUALIFIED
Ivar PaprockiItalyAmy Elsner QUALIFIED
Smith GlickJapanAsiya Javayant QUALIFIED
Ivar PaprockiGermanyAsiya Javayant UNQUALIFIED
Octavia MaletJapanIvan Magalhaes PROPOSAL
Stacey MacleadItalyAnna Fali QUALIFIED

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