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
Arvin AlbaresJapanBernardo Dominic RENEWAL
Rodrigues CampainArgentinaOnyama Limba NEGOTIATION
Mayumi KolmetzIndiaIoni Bowcher NEGOTIATION
Aruna FigeroaItalyOnyama Limba RENEWAL
Ricardo GauchoAustraliaXuxue Feng PROPOSAL
Morrow RutaCanadaStephen Shaw QUALIFIED
Antonio CaudyRussiaOnyama Limba UNQUALIFIED
Ashley DoeGermanyAnna Fali UNQUALIFIED
Chavez BriddickGermanyIvan Magalhaes UNQUALIFIED
Jefferson SchemmerJapanOnyama Limba QUALIFIED
Leja CaldareraIndiaOnyama Limba UNQUALIFIED
Ashley DoeSpainBernardo Dominic RENEWAL
Aika InouyeJapanIoni Bowcher QUALIFIED
Kaitlin OstroskyCanadaAsiya Javayant QUALIFIED
Leja CaldareraItalyBernardo Dominic RENEWAL
Sinclair WaycottUnited KingdomStephen Shaw QUALIFIED
Aruna FigeroaJapanAsiya Javayant NEW
Ricardo GauchoSpainAsiya Javayant RENEWAL
James ButtUnited KingdomBernardo Dominic RENEWAL
Ashley DoeGermanyAnna Fali UNQUALIFIED
Antonio CaudyIndiaAsiya Javayant QUALIFIED
Kaitlin OstroskyAustraliaAsiya Javayant UNQUALIFIED
Johnson SergiIndiaBernardo Dominic NEW
Rodrigues CampainAustraliaIoni Bowcher QUALIFIED
Mujtaba NickaArgentinaIvan Magalhaes RENEWAL
Aika InouyeJapanAnna Fali UNQUALIFIED
Julie StensethCanadaStephen Shaw QUALIFIED
James ButtCanadaAmy Elsner UNQUALIFIED
Jefferson SchemmerItalyElwin Sharvill UNQUALIFIED
Deepesh ChuiCanadaElwin Sharvill NEGOTIATION
Aditya KuskoItalyElwin Sharvill QUALIFIED
Leon OldroydAustraliaBernardo Dominic UNQUALIFIED
Leon OldroydArgentinaXuxue Feng UNQUALIFIED
Mujtaba NickaFranceBernardo Dominic RENEWAL
Ashley DoeGermanyBernardo Dominic QUALIFIED
Adams MorascaSpainBernardo Dominic NEGOTIATION
Claire TollnerCanadaOnyama Limba UNQUALIFIED
Kadeem FlosiArgentinaIoni Bowcher UNQUALIFIED
Ashley DoeFranceStephen Shaw RENEWAL
Chavez BriddickBrazilOnyama Limba UNQUALIFIED
Mujtaba NickaFranceIoni Bowcher RENEWAL
Octavia MaletFranceIvan Magalhaes QUALIFIED
Darci PoquetteAustraliaAnna Fali RENEWAL
Mayumi KolmetzBrazilAmy Elsner NEGOTIATION
Johnson SergiSpainStephen Shaw PROPOSAL
Mayumi KolmetzArgentinaAnna Fali PROPOSAL
Claire TollnerSpainIoni Bowcher QUALIFIED
Adams MorascaBrazilIvan Magalhaes PROPOSAL
Faith GillianRussiaAmy Elsner NEGOTIATION
Jeanfrancois VenereJapanIoni Bowcher RENEWAL
Horizontal
NameCountryRepresentativeStatus
Johnson SergiBrazilAmy Elsner QUALIFIED
Rodrigues CampainBrazilAnna Fali RENEWAL
Alejandro PerinGermanyIvan Magalhaes QUALIFIED
Aditya KuskoJapanIvan Magalhaes QUALIFIED
Misaki RoysterGermanyOnyama Limba PROPOSAL
Alejandro PerinBrazilStephen Shaw NEW
Ivar PaprockiSpainElwin Sharvill UNQUALIFIED
Aruna FigeroaUnited KingdomIvan Magalhaes UNQUALIFIED
Deepesh ChuiFranceIoni Bowcher RENEWAL
Ivar PaprockiCanadaAnna Fali NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Mujtaba NickaArgentina2025-07-25King, Christopher A Esq NEGOTIATION39Xuxue Feng
1001Aika InouyeBrazil2025-07-29Buckley Miller Wright PROPOSAL64Ivan Magalhaes
1002Alejandro PerinGermany2025-07-12Buckley Miller Wright QUALIFIED57Stephen Shaw
1003James ButtCanada2025-07-15Chapman, Ross E Esq PROPOSAL63Onyama Limba
1004Arvin AlbaresSpain2025-07-10Buckley Miller Wright NEW43Anna Fali
1005Chavez BriddickRussia2025-07-26Morlong Associates QUALIFIED63Bernardo Dominic
1006Alejandro PerinItaly2025-07-27Dorl, James J Esq NEW91Anna Fali
1007Chavez BriddickJapan2025-07-18Morlong Associates UNQUALIFIED14Asiya Javayant
1008Alejandro PerinItaly2025-07-26Rangoni Of Florence UNQUALIFIED31Xuxue Feng
1009Aruna FigeroaAustralia2025-07-31Chanay, Jeffrey A Esq QUALIFIED32Anna Fali
1010Wickens NestleSpain2025-07-22Commercial Press NEGOTIATION69Amy Elsner
1011Faith GillianIndia2025-07-24Feltz Printing Service QUALIFIED18Xuxue Feng
1012Clifford RimRussia2025-07-28Benton, John B Jr QUALIFIED94Elwin Sharvill
1013Nicolas IturbideUnited Kingdom2025-07-08Commercial Press QUALIFIED88Onyama Limba
1014Smith GlickJapan2025-07-09Rangoni Of Florence QUALIFIED75Elwin Sharvill
1015Murillo MaletItaly2025-07-04Buckley Miller Wright UNQUALIFIED69Onyama Limba
1016James ButtIndia2025-07-21Benton, John B Jr QUALIFIED95Elwin Sharvill
1017Chavez BriddickRussia2025-07-12King, Christopher A Esq RENEWAL65Elwin Sharvill
1018Aruna FigeroaRussia2025-07-31King, Christopher A Esq RENEWAL31Bernardo Dominic
1019Ricardo GauchoFrance2025-07-18Chanay, Jeffrey A Esq NEGOTIATION63Elwin Sharvill
1020Maria MarrierIndia2025-07-24Dorl, James J Esq RENEWAL77Stephen Shaw
1021Deepesh ChuiSpain2025-07-19Buckley Miller Wright NEW81Asiya Javayant
1022Wickens NestleFrance2025-07-10Benton, John B Jr NEW35Ioni Bowcher
1023Murillo MaletGermany2025-07-22Commercial Press UNQUALIFIED56Xuxue Feng
1024Stacey MacleadBrazil2025-07-12Feiner Bros UNQUALIFIED78Asiya Javayant
1025Maria MarrierGermany2025-07-23Rangoni Of Florence NEW93Ivan Magalhaes
1026Isabel BowleyGermany2025-07-12Commercial Press NEW45Ivan Magalhaes
1027Izzy GarufiBrazil2025-07-15Rangoni Of Florence RENEWAL47Amy Elsner
1028Munro FerenczJapan2025-08-01Feiner Bros QUALIFIED69Xuxue Feng
1029Tony FollerAustralia2025-08-01Chapman, Ross E Esq PROPOSAL88Ioni Bowcher
1030Nicolas IturbideJapan2025-07-20Buckley Miller Wright UNQUALIFIED78Onyama Limba
1031Smith GlickFrance2025-07-18Morlong Associates NEGOTIATION22Xuxue Feng
1032Jefferson SchemmerJapan2025-07-15Truhlar And Truhlar Attys PROPOSAL26Ioni Bowcher
1033Ricardo GauchoArgentina2025-07-18Dorl, James J Esq PROPOSAL56Onyama Limba
1034Francesco ShinkoUnited Kingdom2025-07-08Commercial Press NEGOTIATION7Asiya Javayant
1035Wickens NestleRussia2025-07-23Chanay, Jeffrey A Esq PROPOSAL18Anna Fali
1036Antonio CaudyJapan2025-07-22Chapman, Ross E Esq PROPOSAL67Ioni Bowcher
1037Faith GillianBrazil2025-07-25Printing Dimensions PROPOSAL30Ivan Magalhaes
1038Chavez BriddickBrazil2025-07-20Commercial Press PROPOSAL86Amy Elsner
1039Faith GillianUnited Kingdom2025-07-18Chapman, Ross E Esq PROPOSAL92Asiya Javayant
1040Deepesh ChuiUnited Kingdom2025-07-03Commercial Press RENEWAL63Bernardo Dominic
1041Aruna FigeroaItaly2025-07-15Morlong Associates PROPOSAL59Xuxue Feng
1042Salvatore StockhamJapan2025-07-17Printing Dimensions UNQUALIFIED6Ioni Bowcher
1043Ivar PaprockiGermany2025-07-19Truhlar And Truhlar Attys NEGOTIATION76Ivan Magalhaes
1044Misaki RoysterArgentina2025-07-28Commercial Press NEW13Amy Elsner
1045Kaitlin OstroskyGermany2025-07-16Chanay, Jeffrey A Esq QUALIFIED81Anna Fali
1046Sinclair WaycottBrazil2025-07-29Truhlar And Truhlar Attys PROPOSAL64Amy Elsner
1047Wickens NestleFrance2025-07-09Chemel, James L Cpa PROPOSAL96Elwin Sharvill
1048Kadeem FlosiJapan2025-07-20Dorl, James J Esq PROPOSAL80Onyama Limba
1049Darci PoquetteSpain2025-07-19Printing Dimensions RENEWAL12Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Ricardo GauchoRussiaIvan Magalhaes NEW
Kadeem FlosiIndiaAmy Elsner NEW
Emily WhobreyCanadaBernardo Dominic RENEWAL
Stacey MacleadJapanAmy Elsner NEGOTIATION
James ButtSpainElwin Sharvill PROPOSAL
David DarakjyAustraliaIoni Bowcher UNQUALIFIED
Jeanfrancois VenereBrazilAnna Fali NEW
Silvio SlusarskiItalyAnna Fali UNQUALIFIED
Jeanfrancois VenereItalyIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyRussiaAmy Elsner QUALIFIED
Munro FerenczArgentinaAmy Elsner NEW
James ButtFranceElwin Sharvill RENEWAL
Ashley DoeJapanBernardo Dominic RENEWAL
Juan WieserIndiaBernardo Dominic QUALIFIED
Mujtaba NickaArgentinaElwin Sharvill NEW
Darci PoquetteArgentinaIoni Bowcher PROPOSAL
Morrow RutaArgentinaXuxue Feng NEGOTIATION
Faith GillianGermanyAsiya Javayant NEGOTIATION
Clifford RimBrazilAsiya Javayant QUALIFIED
Juan WieserFranceAmy Elsner NEGOTIATION
Octavia MaletItalyAmy Elsner QUALIFIED
Stacey MacleadIndiaIoni Bowcher QUALIFIED
Julie StensethCanadaBernardo Dominic RENEWAL
Sinclair WaycottArgentinaAsiya Javayant PROPOSAL
Silvio SlusarskiRussiaElwin Sharvill QUALIFIED
Francesco ShinkoFranceStephen Shaw QUALIFIED
Mayumi KolmetzFranceAmy Elsner PROPOSAL
Maisha RulapaughGermanyXuxue Feng UNQUALIFIED
Leon OldroydIndiaOnyama Limba QUALIFIED
Jeanfrancois VenereGermanyOnyama Limba QUALIFIED
Chavez BriddickUnited KingdomAnna Fali RENEWAL
Murillo MaletUnited KingdomStephen Shaw NEW
Antonio CaudyFranceIvan Magalhaes UNQUALIFIED
Maria MarrierFranceXuxue Feng QUALIFIED
Stacey MacleadGermanyIoni Bowcher RENEWAL
Alejandro PerinAustraliaOnyama Limba UNQUALIFIED
Morrow RutaIndiaElwin Sharvill NEGOTIATION
Ricardo GauchoRussiaElwin Sharvill PROPOSAL
Leja CaldareraUnited KingdomAsiya Javayant NEW
Greenwood BologniaRussiaXuxue Feng NEGOTIATION
Maria MarrierFranceAsiya Javayant QUALIFIED
Jeanfrancois VenereUnited KingdomIvan Magalhaes PROPOSAL
Clifford RimAustraliaXuxue Feng NEW
James ButtRussiaOnyama Limba NEW
Jones VocelkaCanadaXuxue Feng NEW
Jefferson SchemmerAustraliaOnyama Limba RENEWAL
Silvio SlusarskiArgentinaOnyama Limba QUALIFIED
Stacey MacleadCanadaIvan Magalhaes UNQUALIFIED
Mayumi KolmetzCanadaIvan Magalhaes UNQUALIFIED
Leja CaldareraItalyOnyama Limba QUALIFIED
Frozen Columns
Name
Leja Caldarera
Darci Poquette
Antonio Caudy
Smith Glick
Adams Morasca
Aditya Kusko
Silvio Slusarski
Aika Inouye
Octavia Malet
Adams Morasca
Julie Stenseth
Leon Oldroyd
David Darakjy
Cody Saylors
Cody Saylors
Kaitlin Ostrosky
Chavez Briddick
Rodrigues Campain
Rodrigues Campain
Isabel Bowley
Izzy Garufi
Leon Oldroyd
Julie Stenseth
Maria Marrier
Murillo Malet
Chavez Briddick
Deepesh Chui
Claire Tollner
Juan Wieser
Chavez Briddick
Stacey Maclead
Alejandro Perin
Wickens Nestle
Alejandro Perin
Tony Foller
Claire Tollner
David Darakjy
Ricardo Gaucho
Maisha Rulapaugh
Salvatore Stockham
Jefferson Schemmer
Izzy Garufi
Jeanfrancois Venere
Claire Tollner
Deepesh Chui
Tony Foller
Arvin Albares
Ricardo Gaucho
Silvio Slusarski
Greenwood Bolognia
IdCountryDate
1000France2025-07-08
1001Argentina2025-07-03
1002Japan2025-07-14
1003Russia2025-07-03
1004United Kingdom2025-07-06
1005Russia2025-07-31
1006Japan2025-07-03
1007Italy2025-07-23
1008United Kingdom2025-07-04
1009Italy2025-07-31
1010Brazil2025-07-13
1011Brazil2025-07-31
1012Argentina2025-07-03
1013Spain2025-07-12
1014Russia2025-07-28
1015Germany2025-07-22
1016Argentina2025-07-16
1017Canada2025-07-06
1018France2025-07-05
1019Germany2025-07-03
1020United Kingdom2025-07-23
1021Russia2025-07-18
1022Germany2025-07-03
1023Russia2025-07-22
1024France2025-07-09
1025Australia2025-07-26
1026Germany2025-07-17
1027Spain2025-07-18
1028Italy2025-07-19
1029Spain2025-07-06
1030Argentina2025-07-15
1031Canada2025-07-27
1032France2025-07-15
1033Australia2025-07-10
1034Spain2025-07-20
1035Canada2025-07-12
1036France2025-07-12
1037India2025-07-19
1038Spain2025-07-24
1039Australia2025-07-20
1040Japan2025-07-06
1041United Kingdom2025-07-31
1042Japan2025-07-10
1043France2025-07-17
1044Spain2025-07-23
1045Brazil2025-07-21
1046Spain2025-07-16
1047Australia2025-07-03
1048Italy2025-07-18
1049Spain2025-07-06

On-Demand Data

NameIdCountryDate
Smith Glick1000Australia2025-07-19
Octavia Malet1001Germany2025-07-13
Nicolas Iturbide1002Japan2025-07-05
Cody Saylors1003Italy2025-07-12
Munro Ferencz1004Spain2025-07-09
Jeanfrancois Venere1005India2025-08-01
Chavez Briddick1006Australia2025-07-08
Jennifer Amigon1007Russia2025-07-11
Salvatore Stockham1008Brazil2025-07-06
Juan Wieser1009Japan2025-07-17
Arvin Albares1010Spain2025-07-17
Costa Dilliard1011Brazil2025-07-10
Aika Inouye1012India2025-08-01
Ricardo Gaucho1013Japan2025-07-30
Aruna Figeroa1014Italy2025-07-18
Salvatore Stockham1015France2025-07-08
Smith Glick1016India2025-07-12
Arvin Albares1017Brazil2025-07-25
Kadeem Flosi1018France2025-07-29
Greenwood Bolognia1019Japan2025-07-29
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Tony FollerGermanyAsiya Javayant QUALIFIED
Silvio SlusarskiRussiaAmy Elsner QUALIFIED
Adams MorascaUnited KingdomAmy Elsner NEGOTIATION
Clifford RimJapanStephen Shaw NEW
Francesco ShinkoGermanyIvan Magalhaes QUALIFIED
Kaitlin OstroskyArgentinaIvan Magalhaes QUALIFIED
Kaitlin OstroskyUnited KingdomXuxue Feng NEW
Morrow RutaUnited KingdomStephen Shaw NEGOTIATION
Aditya KuskoSpainAsiya Javayant QUALIFIED
Mayumi KolmetzUnited KingdomIoni Bowcher RENEWAL
Sinclair WaycottGermanyAsiya Javayant PROPOSAL
Leon OldroydCanadaBernardo Dominic NEGOTIATION
Rodrigues CampainGermanyAnna Fali QUALIFIED
Alejandro PerinItalyAnna Fali QUALIFIED
Arvin AlbaresIndiaIvan Magalhaes UNQUALIFIED
Francesco ShinkoUnited KingdomAsiya Javayant UNQUALIFIED
Mayumi KolmetzCanadaIvan Magalhaes NEW
Alejandro PerinArgentinaAmy Elsner QUALIFIED
Rodrigues CampainCanadaIoni Bowcher UNQUALIFIED
Johnson SergiJapanAsiya Javayant RENEWAL
Ashley DoeSpainAnna Fali UNQUALIFIED
Clifford RimItalyElwin Sharvill UNQUALIFIED
Misaki RoysterUnited KingdomXuxue Feng NEW
Julie StensethSpainOnyama Limba NEGOTIATION
Julie StensethAustraliaElwin Sharvill PROPOSAL
Ricardo GauchoRussiaOnyama Limba QUALIFIED
Leon OldroydUnited KingdomXuxue Feng UNQUALIFIED
Chavez BriddickCanadaStephen Shaw RENEWAL
Jones VocelkaArgentinaXuxue Feng PROPOSAL
Kaitlin OstroskyAustraliaXuxue Feng NEGOTIATION
Maisha RulapaughGermanyStephen Shaw NEGOTIATION
Maria MarrierRussiaAmy Elsner NEW
Ricardo GauchoSpainBernardo Dominic UNQUALIFIED
Emily WhobreyAustraliaIvan Magalhaes PROPOSAL
Greenwood BologniaSpainStephen Shaw PROPOSAL
Chavez BriddickArgentinaIoni Bowcher QUALIFIED
Smith GlickBrazilBernardo Dominic PROPOSAL
Deepesh ChuiSpainElwin Sharvill QUALIFIED
Juan WieserRussiaIoni Bowcher QUALIFIED
Tony FollerAustraliaBernardo Dominic 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>