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
Costa DilliardSpainIoni Bowcher NEGOTIATION
Faith GillianCanadaXuxue Feng QUALIFIED
Jefferson SchemmerIndiaIvan Magalhaes PROPOSAL
Jefferson SchemmerCanadaIvan Magalhaes NEGOTIATION
Chavez BriddickJapanAnna Fali QUALIFIED
Silvio SlusarskiGermanyIoni Bowcher NEGOTIATION
Stacey MacleadCanadaStephen Shaw UNQUALIFIED
Smith GlickRussiaAsiya Javayant QUALIFIED
Izzy GarufiItalyBernardo Dominic NEW
Jeanfrancois VenereGermanyAmy Elsner RENEWAL
Morrow RutaAustraliaBernardo Dominic NEGOTIATION
Munro FerenczCanadaAnna Fali NEGOTIATION
Aika InouyeFranceAsiya Javayant NEW
Kaitlin OstroskyBrazilOnyama Limba PROPOSAL
Claire TollnerSpainBernardo Dominic NEW
Sinclair WaycottIndiaIoni Bowcher UNQUALIFIED
Kadeem FlosiBrazilXuxue Feng PROPOSAL
Aika InouyeFranceElwin Sharvill UNQUALIFIED
Clifford RimCanadaStephen Shaw PROPOSAL
Adams MorascaRussiaBernardo Dominic PROPOSAL
Wickens NestleUnited KingdomElwin Sharvill NEW
Stacey MacleadFranceAmy Elsner NEW
Sinclair WaycottFranceAsiya Javayant RENEWAL
Tony FollerFranceAnna Fali QUALIFIED
Costa DilliardUnited KingdomAnna Fali NEW
Rodrigues CampainItalyBernardo Dominic UNQUALIFIED
Izzy GarufiArgentinaAmy Elsner NEW
Alejandro PerinCanadaIoni Bowcher RENEWAL
Aika InouyeSpainStephen Shaw NEW
Claire TollnerCanadaIvan Magalhaes UNQUALIFIED
Isabel BowleyGermanyXuxue Feng UNQUALIFIED
Rodrigues CampainRussiaElwin Sharvill RENEWAL
Jefferson SchemmerSpainStephen Shaw PROPOSAL
Ricardo GauchoSpainStephen Shaw PROPOSAL
Murillo MaletAustraliaStephen Shaw RENEWAL
Emily WhobreyIndiaStephen Shaw NEGOTIATION
Salvatore StockhamJapanStephen Shaw UNQUALIFIED
Greenwood BologniaFranceIoni Bowcher RENEWAL
Izzy GarufiRussiaBernardo Dominic QUALIFIED
Arvin AlbaresIndiaBernardo Dominic PROPOSAL
Jefferson SchemmerRussiaAnna Fali NEW
Claire TollnerGermanyAmy Elsner NEGOTIATION
Deepesh ChuiUnited KingdomElwin Sharvill UNQUALIFIED
Sinclair WaycottJapanAmy Elsner PROPOSAL
David DarakjyItalyIoni Bowcher NEW
Octavia MaletUnited KingdomStephen Shaw NEGOTIATION
Cody SaylorsGermanyIvan Magalhaes QUALIFIED
Chavez BriddickRussiaElwin Sharvill NEGOTIATION
Wickens NestleUnited KingdomElwin Sharvill PROPOSAL
Munro FerenczBrazilOnyama Limba RENEWAL
Horizontal
NameCountryRepresentativeStatus
Claire TollnerFranceElwin Sharvill RENEWAL
Emily WhobreyBrazilIvan Magalhaes UNQUALIFIED
Julie StensethCanadaStephen Shaw NEGOTIATION
Mujtaba NickaItalyAmy Elsner PROPOSAL
Chavez BriddickArgentinaAmy Elsner NEW
Maria MarrierSpainStephen Shaw NEGOTIATION
Aditya KuskoSpainIvan Magalhaes NEGOTIATION
Jones VocelkaSpainAnna Fali PROPOSAL
Claire TollnerRussiaOnyama Limba NEW
Julie StensethBrazilAmy Elsner PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereSpain2026-04-14Chanay, Jeffrey A Esq PROPOSAL32Ivan Magalhaes
1001Kadeem FlosiCanada2026-04-26Truhlar And Truhlar Attys NEGOTIATION67Elwin Sharvill
1002Clifford RimSpain2026-04-28Feltz Printing Service NEW0Ivan Magalhaes
1003Clifford RimCanada2026-05-08Commercial Press QUALIFIED52Xuxue Feng
1004Jennifer AmigonItaly2026-04-21Buckley Miller Wright PROPOSAL34Ivan Magalhaes
1005Costa DilliardGermany2026-04-10Chemel, James L Cpa NEGOTIATION37Elwin Sharvill
1006Sinclair WaycottAustralia2026-04-13Dorl, James J Esq NEW21Bernardo Dominic
1007Clifford RimIndia2026-04-26Dorl, James J Esq PROPOSAL52Bernardo Dominic
1008Isabel BowleyUnited Kingdom2026-05-07Truhlar And Truhlar Attys RENEWAL9Amy Elsner
1009Mayumi KolmetzUnited Kingdom2026-05-03Chanay, Jeffrey A Esq QUALIFIED67Ivan Magalhaes
1010James ButtFrance2026-05-08King, Christopher A Esq NEW78Elwin Sharvill
1011Stacey MacleadBrazil2026-04-10Chapman, Ross E Esq RENEWAL82Bernardo Dominic
1012Juan WieserArgentina2026-04-13Chemel, James L Cpa NEGOTIATION89Onyama Limba
1013Greenwood BologniaItaly2026-05-06Morlong Associates RENEWAL30Elwin Sharvill
1014Leon OldroydArgentina2026-04-25Dorl, James J Esq UNQUALIFIED74Stephen Shaw
1015Rodrigues CampainCanada2026-04-10Morlong Associates QUALIFIED93Asiya Javayant
1016Alejandro PerinCanada2026-05-09Truhlar And Truhlar Attys NEW70Bernardo Dominic
1017Aditya KuskoArgentina2026-04-24Chapman, Ross E Esq PROPOSAL26Xuxue Feng
1018Wickens NestleUnited Kingdom2026-04-18Printing Dimensions NEW6Ivan Magalhaes
1019Maria MarrierArgentina2026-04-27King, Christopher A Esq PROPOSAL99Onyama Limba
1020Clifford RimBrazil2026-04-29Commercial Press NEGOTIATION8Ivan Magalhaes
1021Francesco ShinkoArgentina2026-04-26Morlong Associates NEGOTIATION39Amy Elsner
1022Leja CaldareraGermany2026-04-12Printing Dimensions RENEWAL88Stephen Shaw
1023Tony FollerArgentina2026-04-13Commercial Press NEGOTIATION32Anna Fali
1024James ButtAustralia2026-05-08King, Christopher A Esq QUALIFIED43Xuxue Feng
1025Tony FollerGermany2026-05-09Rousseaux, Michael Esq QUALIFIED46Ioni Bowcher
1026Antonio CaudyIndia2026-04-15Dorl, James J Esq NEGOTIATION95Stephen Shaw
1027David DarakjyAustralia2026-05-03Truhlar And Truhlar Attys PROPOSAL73Asiya Javayant
1028Costa DilliardRussia2026-05-09Chapman, Ross E Esq NEGOTIATION77Asiya Javayant
1029Stacey MacleadFrance2026-04-26Truhlar And Truhlar Attys UNQUALIFIED32Onyama Limba
1030Aika InouyeUnited Kingdom2026-05-02Benton, John B Jr UNQUALIFIED11Anna Fali
1031Ricardo GauchoAustralia2026-04-12Chanay, Jeffrey A Esq RENEWAL59Anna Fali
1032Misaki RoysterUnited Kingdom2026-04-29King, Christopher A Esq PROPOSAL84Onyama Limba
1033Arvin AlbaresRussia2026-05-05Truhlar And Truhlar Attys NEW68Stephen Shaw
1034Murillo MaletItaly2026-04-13Printing Dimensions QUALIFIED26Bernardo Dominic
1035Wickens NestleItaly2026-04-24Commercial Press NEW88Amy Elsner
1036Ricardo GauchoRussia2026-04-13Chanay, Jeffrey A Esq UNQUALIFIED72Amy Elsner
1037Salvatore StockhamArgentina2026-04-25Rangoni Of Florence UNQUALIFIED90Elwin Sharvill
1038Aditya KuskoItaly2026-04-10Rousseaux, Michael Esq NEGOTIATION85Bernardo Dominic
1039Aditya KuskoItaly2026-05-02Benton, John B Jr QUALIFIED45Ioni Bowcher
1040Julie StensethItaly2026-04-30Chemel, James L Cpa RENEWAL76Stephen Shaw
1041Smith GlickCanada2026-04-27Chemel, James L Cpa UNQUALIFIED60Xuxue Feng
1042Silvio SlusarskiGermany2026-04-29Feiner Bros NEGOTIATION65Anna Fali
1043Munro FerenczJapan2026-05-02Truhlar And Truhlar Attys PROPOSAL60Elwin Sharvill
1044Jennifer AmigonBrazil2026-05-07Truhlar And Truhlar Attys PROPOSAL9Ivan Magalhaes
1045Maria MarrierSpain2026-05-02Chanay, Jeffrey A Esq QUALIFIED43Amy Elsner
1046Juan WieserSpain2026-04-24Dorl, James J Esq RENEWAL11Asiya Javayant
1047Antonio CaudyJapan2026-04-18Feltz Printing Service RENEWAL74Onyama Limba
1048Jefferson SchemmerIndia2026-04-26Buckley Miller Wright NEGOTIATION69Onyama Limba
1049Johnson SergiBrazil2026-04-11Printing Dimensions QUALIFIED30Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinBrazilAmy Elsner NEW
Rodrigues CampainGermanyIoni Bowcher NEGOTIATION
Juan WieserUnited KingdomAnna Fali UNQUALIFIED
Chavez BriddickJapanElwin Sharvill RENEWAL
Octavia MaletFranceBernardo Dominic QUALIFIED
Stacey MacleadJapanBernardo Dominic NEW
Ricardo GauchoIndiaStephen Shaw UNQUALIFIED
Leon OldroydArgentinaAsiya Javayant PROPOSAL
Johnson SergiGermanyAnna Fali PROPOSAL
Johnson SergiAustraliaAsiya Javayant RENEWAL
James ButtBrazilOnyama Limba UNQUALIFIED
Alejandro PerinGermanyAmy Elsner RENEWAL
Aika InouyeBrazilIoni Bowcher QUALIFIED
Aditya KuskoJapanAnna Fali NEGOTIATION
Faith GillianJapanStephen Shaw NEGOTIATION
Alejandro PerinCanadaAnna Fali QUALIFIED
Antonio CaudyCanadaElwin Sharvill PROPOSAL
James ButtJapanIoni Bowcher QUALIFIED
Isabel BowleyItalyElwin Sharvill NEW
Chavez BriddickCanadaStephen Shaw UNQUALIFIED
Ricardo GauchoRussiaIvan Magalhaes PROPOSAL
Johnson SergiCanadaBernardo Dominic PROPOSAL
Deepesh ChuiGermanyAsiya Javayant NEW
Wickens NestleBrazilXuxue Feng RENEWAL
Silvio SlusarskiAustraliaAsiya Javayant RENEWAL
David DarakjyRussiaBernardo Dominic PROPOSAL
Deepesh ChuiGermanyXuxue Feng NEW
Clifford RimFranceElwin Sharvill NEGOTIATION
Wickens NestleJapanElwin Sharvill PROPOSAL
Misaki RoysterAustraliaElwin Sharvill QUALIFIED
Isabel BowleyUnited KingdomBernardo Dominic PROPOSAL
Morrow RutaCanadaStephen Shaw RENEWAL
Jones VocelkaCanadaElwin Sharvill NEGOTIATION
Chavez BriddickSpainAsiya Javayant PROPOSAL
Morrow RutaArgentinaAsiya Javayant NEGOTIATION
Rodrigues CampainFranceAmy Elsner UNQUALIFIED
Rodrigues CampainGermanyIvan Magalhaes NEGOTIATION
Ashley DoeGermanyOnyama Limba NEW
David DarakjyUnited KingdomStephen Shaw QUALIFIED
Chavez BriddickAustraliaIvan Magalhaes NEW
Mayumi KolmetzJapanAsiya Javayant UNQUALIFIED
Aruna FigeroaRussiaOnyama Limba RENEWAL
Jeanfrancois VenereSpainIvan Magalhaes NEW
Stacey MacleadItalyElwin Sharvill NEW
Deepesh ChuiGermanyBernardo Dominic NEGOTIATION
Claire TollnerGermanyStephen Shaw NEW
Aika InouyeGermanyOnyama Limba UNQUALIFIED
Costa DilliardBrazilOnyama Limba NEW
Jefferson SchemmerFranceAnna Fali RENEWAL
Darci PoquetteFranceIoni Bowcher NEW
Frozen Columns
Name
Clifford Rim
Jefferson Schemmer
Stacey Maclead
Maisha Rulapaugh
Leon Oldroyd
Leon Oldroyd
Maria Marrier
James Butt
Johnson Sergi
Mujtaba Nicka
Ashley Doe
Isabel Bowley
Aditya Kusko
Aika Inouye
Smith Glick
Stacey Maclead
Octavia Malet
Clifford Rim
Nicolas Iturbide
Maria Marrier
Mujtaba Nicka
Darci Poquette
Alejandro Perin
Adams Morasca
Mayumi Kolmetz
Jeanfrancois Venere
Clifford Rim
Leja Caldarera
Ricardo Gaucho
Octavia Malet
Isabel Bowley
Arvin Albares
Kaitlin Ostrosky
Leja Caldarera
Ivar Paprocki
Emily Whobrey
Greenwood Bolognia
Morrow Ruta
Maria Marrier
Jeanfrancois Venere
Maria Marrier
Arvin Albares
Stacey Maclead
Alejandro Perin
Antonio Caudy
Claire Tollner
Jones Vocelka
Greenwood Bolognia
Mujtaba Nicka
Deepesh Chui
IdCountryDate
1000Japan2026-04-13
1001Germany2026-04-17
1002Brazil2026-05-02
1003Italy2026-05-09
1004Canada2026-05-01
1005France2026-04-17
1006France2026-05-05
1007India2026-05-03
1008Argentina2026-04-13
1009Argentina2026-05-06
1010Spain2026-04-10
1011Spain2026-04-22
1012Canada2026-04-10
1013United Kingdom2026-04-11
1014France2026-05-07
1015Italy2026-04-29
1016Russia2026-04-17
1017Spain2026-04-19
1018Spain2026-05-05
1019Russia2026-04-29
1020Australia2026-04-10
1021United Kingdom2026-04-11
1022Italy2026-04-13
1023Italy2026-04-18
1024France2026-04-24
1025Russia2026-05-01
1026Canada2026-04-16
1027France2026-04-24
1028Spain2026-04-11
1029India2026-05-09
1030Australia2026-04-20
1031Australia2026-04-10
1032Russia2026-05-02
1033Germany2026-04-25
1034Argentina2026-04-12
1035Canada2026-04-10
1036India2026-04-14
1037Canada2026-04-25
1038Japan2026-04-12
1039Japan2026-04-10
1040United Kingdom2026-04-28
1041Spain2026-04-26
1042United Kingdom2026-05-06
1043France2026-04-21
1044Canada2026-04-25
1045Australia2026-05-06
1046Italy2026-04-20
1047Australia2026-05-03
1048Canada2026-05-09
1049Australia2026-05-01

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Argentina2026-04-21
Johnson Sergi1001Italy2026-04-11
Morrow Ruta1002Germany2026-04-22
Clifford Rim1003Russia2026-04-16
Claire Tollner1004India2026-04-28
Maisha Rulapaugh1005India2026-04-29
Smith Glick1006Germany2026-04-30
Ivar Paprocki1007Spain2026-05-02
Ashley Doe1008Russia2026-04-18
Alejandro Perin1009Australia2026-04-28
Nicolas Iturbide1010Brazil2026-05-02
Jeanfrancois Venere1011Italy2026-04-17
Kaitlin Ostrosky1012Germany2026-05-03
Maria Marrier1013Japan2026-05-04
Kaitlin Ostrosky1014Japan2026-04-30
Ricardo Gaucho1015Argentina2026-04-11
Arvin Albares1016Australia2026-05-07
Francesco Shinko1017Brazil2026-05-01
Antonio Caudy1018United Kingdom2026-04-24
Izzy Garufi1019Japan2026-05-02
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Ricardo GauchoRussiaAnna Fali NEW
Mayumi KolmetzArgentinaIoni Bowcher PROPOSAL
Adams MorascaBrazilElwin Sharvill PROPOSAL
Silvio SlusarskiRussiaStephen Shaw RENEWAL
Isabel BowleyRussiaXuxue Feng NEGOTIATION
Mujtaba NickaSpainBernardo Dominic NEW
Ivar PaprockiBrazilIoni Bowcher QUALIFIED
Faith GillianArgentinaElwin Sharvill PROPOSAL
Jennifer AmigonFranceElwin Sharvill NEW
Ricardo GauchoJapanIvan Magalhaes QUALIFIED
Ashley DoeBrazilAsiya Javayant NEGOTIATION
Rodrigues CampainIndiaAnna Fali RENEWAL
Chavez BriddickGermanyAnna Fali QUALIFIED
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Wickens NestleJapanAsiya Javayant PROPOSAL
Darci PoquetteCanadaIvan Magalhaes NEGOTIATION
Aruna FigeroaUnited KingdomOnyama Limba NEW
Maria MarrierSpainIvan Magalhaes QUALIFIED
Clifford RimRussiaBernardo Dominic PROPOSAL
Misaki RoysterGermanyIvan Magalhaes NEGOTIATION
James ButtRussiaStephen Shaw PROPOSAL
Tony FollerUnited KingdomXuxue Feng RENEWAL
Alejandro PerinJapanIvan Magalhaes QUALIFIED
Arvin AlbaresJapanIoni Bowcher RENEWAL
Mujtaba NickaAustraliaOnyama Limba PROPOSAL
Ricardo GauchoSpainIoni Bowcher PROPOSAL
Aika InouyeJapanIoni Bowcher NEGOTIATION
David DarakjyFranceXuxue Feng UNQUALIFIED
Jeanfrancois VenereJapanIvan Magalhaes QUALIFIED
Stacey MacleadBrazilAmy Elsner QUALIFIED
Costa DilliardItalyXuxue Feng NEW
Greenwood BologniaCanadaAnna Fali RENEWAL
Wickens NestleSpainOnyama Limba UNQUALIFIED
Nicolas IturbideArgentinaAnna Fali PROPOSAL
Jennifer AmigonArgentinaIoni Bowcher UNQUALIFIED
Leja CaldareraRussiaStephen Shaw QUALIFIED
Wickens NestleUnited KingdomOnyama Limba PROPOSAL
Silvio SlusarskiRussiaElwin Sharvill QUALIFIED
Jeanfrancois VenereBrazilStephen Shaw NEGOTIATION
Isabel BowleySpainIoni Bowcher 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>