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
Stacey MacleadArgentinaOnyama Limba QUALIFIED
Jefferson SchemmerJapanBernardo Dominic NEW
Emily WhobreySpainStephen Shaw NEW
Leja CaldareraArgentinaXuxue Feng QUALIFIED
Aruna FigeroaArgentinaStephen Shaw NEW
Aika InouyeAustraliaStephen Shaw NEGOTIATION
Aruna FigeroaRussiaAsiya Javayant NEW
David DarakjySpainBernardo Dominic PROPOSAL
Juan WieserCanadaAsiya Javayant PROPOSAL
Ricardo GauchoUnited KingdomOnyama Limba UNQUALIFIED
Munro FerenczGermanyIvan Magalhaes RENEWAL
Sinclair WaycottBrazilIvan Magalhaes QUALIFIED
James ButtIndiaAsiya Javayant RENEWAL
Aditya KuskoCanadaAsiya Javayant NEW
Wickens NestleItalyBernardo Dominic PROPOSAL
Costa DilliardFranceAmy Elsner PROPOSAL
Ricardo GauchoRussiaAsiya Javayant RENEWAL
Silvio SlusarskiSpainAmy Elsner NEGOTIATION
Kadeem FlosiFranceStephen Shaw NEGOTIATION
Greenwood BologniaSpainOnyama Limba PROPOSAL
Leon OldroydIndiaXuxue Feng NEW
Jefferson SchemmerArgentinaStephen Shaw UNQUALIFIED
Juan WieserGermanyAnna Fali NEGOTIATION
Julie StensethArgentinaAnna Fali NEGOTIATION
Aika InouyeUnited KingdomBernardo Dominic QUALIFIED
Maisha RulapaughBrazilIoni Bowcher NEGOTIATION
Izzy GarufiItalyElwin Sharvill UNQUALIFIED
James ButtBrazilElwin Sharvill RENEWAL
Francesco ShinkoArgentinaIvan Magalhaes PROPOSAL
Stacey MacleadBrazilAmy Elsner NEGOTIATION
Maria MarrierArgentinaStephen Shaw UNQUALIFIED
Johnson SergiFranceAmy Elsner RENEWAL
Rodrigues CampainJapanAnna Fali NEGOTIATION
Costa DilliardIndiaStephen Shaw RENEWAL
Ricardo GauchoSpainAmy Elsner PROPOSAL
Octavia MaletJapanBernardo Dominic RENEWAL
Munro FerenczAustraliaElwin Sharvill NEGOTIATION
Rodrigues CampainCanadaBernardo Dominic NEGOTIATION
Juan WieserGermanyIvan Magalhaes PROPOSAL
Ivar PaprockiItalyOnyama Limba PROPOSAL
Leja CaldareraGermanyAnna Fali NEGOTIATION
Darci PoquetteItalyOnyama Limba NEGOTIATION
Jefferson SchemmerAustraliaIvan Magalhaes QUALIFIED
Misaki RoysterFranceIvan Magalhaes NEGOTIATION
Jeanfrancois VenereRussiaIvan Magalhaes RENEWAL
Jones VocelkaRussiaBernardo Dominic RENEWAL
Morrow RutaJapanAsiya Javayant PROPOSAL
Kaitlin OstroskyBrazilAmy Elsner UNQUALIFIED
Izzy GarufiBrazilXuxue Feng NEGOTIATION
Izzy GarufiRussiaStephen Shaw NEW
Horizontal
NameCountryRepresentativeStatus
Maria MarrierArgentinaBernardo Dominic RENEWAL
Munro FerenczUnited KingdomAsiya Javayant QUALIFIED
Francesco ShinkoCanadaIoni Bowcher QUALIFIED
Aika InouyeBrazilAnna Fali UNQUALIFIED
Kaitlin OstroskyIndiaIoni Bowcher NEW
Octavia MaletJapanOnyama Limba RENEWAL
Francesco ShinkoFranceElwin Sharvill RENEWAL
Deepesh ChuiGermanyOnyama Limba RENEWAL
Costa DilliardArgentinaIoni Bowcher UNQUALIFIED
Francesco ShinkoCanadaBernardo Dominic NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Jeanfrancois VenereAustralia2025-09-28Chanay, Jeffrey A Esq UNQUALIFIED82Ioni Bowcher
1001Cody SaylorsJapan2025-10-16Commercial Press NEW60Amy Elsner
1002Morrow RutaItaly2025-10-13Dorl, James J Esq UNQUALIFIED95Amy Elsner
1003Morrow RutaUnited Kingdom2025-09-26Truhlar And Truhlar Attys NEGOTIATION0Onyama Limba
1004David DarakjyRussia2025-09-23Morlong Associates NEW37Stephen Shaw
1005Misaki RoysterArgentina2025-09-21Feiner Bros QUALIFIED14Onyama Limba
1006David DarakjyItaly2025-10-15Commercial Press NEGOTIATION95Bernardo Dominic
1007Murillo MaletFrance2025-09-29Chemel, James L Cpa NEW75Asiya Javayant
1008Ricardo GauchoIndia2025-09-27Feiner Bros NEGOTIATION84Xuxue Feng
1009Mayumi KolmetzBrazil2025-10-17Feiner Bros UNQUALIFIED17Elwin Sharvill
1010Tony FollerSpain2025-10-08Chanay, Jeffrey A Esq RENEWAL51Stephen Shaw
1011Costa DilliardIndia2025-09-25Chapman, Ross E Esq QUALIFIED7Asiya Javayant
1012Tony FollerArgentina2025-09-23Dorl, James J Esq NEW44Elwin Sharvill
1013Ashley DoeFrance2025-09-30Chanay, Jeffrey A Esq PROPOSAL89Onyama Limba
1014Nicolas IturbideItaly2025-10-01Feltz Printing Service NEGOTIATION74Asiya Javayant
1015Leon OldroydJapan2025-10-07Truhlar And Truhlar Attys NEW1Bernardo Dominic
1016Rodrigues CampainArgentina2025-10-16Printing Dimensions PROPOSAL40Asiya Javayant
1017Murillo MaletJapan2025-10-04Rangoni Of Florence PROPOSAL64Asiya Javayant
1018Misaki RoysterAustralia2025-09-30Commercial Press NEGOTIATION90Stephen Shaw
1019Aika InouyeSpain2025-10-05Chanay, Jeffrey A Esq NEGOTIATION97Stephen Shaw
1020Arvin AlbaresArgentina2025-10-05Chanay, Jeffrey A Esq RENEWAL22Onyama Limba
1021Mayumi KolmetzFrance2025-10-07Rousseaux, Michael Esq UNQUALIFIED84Amy Elsner
1022Octavia MaletRussia2025-10-05Morlong Associates PROPOSAL24Stephen Shaw
1023Tony FollerUnited Kingdom2025-10-14Benton, John B Jr NEW95Ioni Bowcher
1024Jefferson SchemmerIndia2025-10-05Dorl, James J Esq NEGOTIATION35Stephen Shaw
1025Jennifer AmigonBrazil2025-10-16Rangoni Of Florence NEGOTIATION55Onyama Limba
1026Jeanfrancois VenereAustralia2025-10-17Commercial Press NEGOTIATION49Stephen Shaw
1027Ricardo GauchoItaly2025-10-06Feltz Printing Service RENEWAL6Amy Elsner
1028James ButtRussia2025-10-13Chanay, Jeffrey A Esq PROPOSAL63Bernardo Dominic
1029Faith GillianSpain2025-09-23Truhlar And Truhlar Attys PROPOSAL92Elwin Sharvill
1030Munro FerenczArgentina2025-10-09Morlong Associates PROPOSAL39Onyama Limba
1031Jones VocelkaAustralia2025-10-02Commercial Press QUALIFIED66Elwin Sharvill
1032Aika InouyeRussia2025-10-06Chapman, Ross E Esq QUALIFIED80Asiya Javayant
1033James ButtItaly2025-10-02Truhlar And Truhlar Attys QUALIFIED71Onyama Limba
1034Alejandro PerinIndia2025-10-04Feiner Bros UNQUALIFIED97Ioni Bowcher
1035Alejandro PerinGermany2025-10-15Feiner Bros RENEWAL14Amy Elsner
1036Kadeem FlosiCanada2025-10-05Rousseaux, Michael Esq UNQUALIFIED39Amy Elsner
1037Clifford RimUnited Kingdom2025-10-09Chemel, James L Cpa NEGOTIATION87Stephen Shaw
1038Jennifer AmigonCanada2025-10-18King, Christopher A Esq UNQUALIFIED87Stephen Shaw
1039Antonio CaudyJapan2025-09-21Feltz Printing Service RENEWAL67Bernardo Dominic
1040Deepesh ChuiItaly2025-09-26Benton, John B Jr RENEWAL97Onyama Limba
1041Leja CaldareraJapan2025-10-10Commercial Press NEW13Ivan Magalhaes
1042Misaki RoysterJapan2025-10-13Buckley Miller Wright QUALIFIED81Xuxue Feng
1043Deepesh ChuiItaly2025-10-18Buckley Miller Wright NEGOTIATION49Stephen Shaw
1044Chavez BriddickGermany2025-10-14Truhlar And Truhlar Attys PROPOSAL31Elwin Sharvill
1045Kaitlin OstroskyCanada2025-10-03Commercial Press RENEWAL47Elwin Sharvill
1046James ButtArgentina2025-10-19Feiner Bros UNQUALIFIED49Ivan Magalhaes
1047Leja CaldareraSpain2025-10-17Rangoni Of Florence RENEWAL19Bernardo Dominic
1048Ivar PaprockiSpain2025-10-20Rangoni Of Florence RENEWAL28Stephen Shaw
1049David DarakjyJapan2025-10-04Morlong Associates PROPOSAL8Bernardo Dominic
Frozen Rows
NameCountryRepresentativeStatus
Maria MarrierRussiaStephen Shaw NEW
Octavia MaletFranceElwin Sharvill UNQUALIFIED
Alejandro PerinRussiaBernardo Dominic NEGOTIATION
Kadeem FlosiGermanyIoni Bowcher QUALIFIED
Rodrigues CampainRussiaXuxue Feng QUALIFIED
Aditya KuskoAustraliaOnyama Limba NEW
Arvin AlbaresArgentinaAnna Fali RENEWAL
Cody SaylorsRussiaBernardo Dominic NEGOTIATION
Jennifer AmigonSpainIvan Magalhaes UNQUALIFIED
Stacey MacleadSpainAnna Fali RENEWAL
Smith GlickJapanOnyama Limba RENEWAL
Silvio SlusarskiRussiaAnna Fali NEW
Aruna FigeroaGermanyOnyama Limba NEW
Leja CaldareraBrazilStephen Shaw PROPOSAL
Johnson SergiRussiaXuxue Feng NEGOTIATION
Smith GlickIndiaStephen Shaw NEGOTIATION
Greenwood BologniaJapanXuxue Feng QUALIFIED
James ButtRussiaBernardo Dominic PROPOSAL
Claire TollnerItalyAnna Fali NEGOTIATION
Mayumi KolmetzAustraliaElwin Sharvill QUALIFIED
Sinclair WaycottFranceIoni Bowcher NEGOTIATION
Maria MarrierItalyOnyama Limba RENEWAL
Chavez BriddickArgentinaOnyama Limba NEW
Mujtaba NickaUnited KingdomIoni Bowcher QUALIFIED
Jones VocelkaBrazilOnyama Limba QUALIFIED
Costa DilliardJapanXuxue Feng NEGOTIATION
Clifford RimBrazilXuxue Feng RENEWAL
Jones VocelkaBrazilIvan Magalhaes QUALIFIED
Mayumi KolmetzUnited KingdomStephen Shaw PROPOSAL
Aika InouyeFranceAnna Fali RENEWAL
Jefferson SchemmerItalyStephen Shaw PROPOSAL
Ashley DoeBrazilBernardo Dominic RENEWAL
Mujtaba NickaCanadaElwin Sharvill RENEWAL
Sinclair WaycottJapanIvan Magalhaes RENEWAL
Antonio CaudyFranceIvan Magalhaes RENEWAL
Aruna FigeroaGermanyBernardo Dominic NEGOTIATION
Jefferson SchemmerGermanyAnna Fali UNQUALIFIED
Nicolas IturbideFranceOnyama Limba NEW
Mujtaba NickaArgentinaAnna Fali PROPOSAL
Isabel BowleyCanadaOnyama Limba QUALIFIED
Isabel BowleyGermanyStephen Shaw RENEWAL
Kadeem FlosiSpainXuxue Feng UNQUALIFIED
Jones VocelkaArgentinaIoni Bowcher UNQUALIFIED
Izzy GarufiIndiaStephen Shaw NEGOTIATION
Cody SaylorsAustraliaBernardo Dominic NEGOTIATION
Leja CaldareraIndiaXuxue Feng PROPOSAL
Smith GlickSpainElwin Sharvill NEGOTIATION
Juan WieserIndiaIoni Bowcher NEGOTIATION
Misaki RoysterBrazilElwin Sharvill NEW
Izzy GarufiRussiaAnna Fali UNQUALIFIED
Frozen Columns
Name
David Darakjy
Adams Morasca
Rodrigues Campain
Sinclair Waycott
James Butt
Adams Morasca
Nicolas Iturbide
Ashley Doe
Munro Ferencz
Stacey Maclead
Leon Oldroyd
Isabel Bowley
Juan Wieser
Costa Dilliard
Leja Caldarera
Darci Poquette
Izzy Garufi
Leon Oldroyd
Salvatore Stockham
Izzy Garufi
Morrow Ruta
Octavia Malet
Isabel Bowley
Juan Wieser
Aruna Figeroa
Jeanfrancois Venere
Munro Ferencz
Octavia Malet
Salvatore Stockham
Salvatore Stockham
Ivar Paprocki
Sinclair Waycott
Morrow Ruta
Aika Inouye
Murillo Malet
Jennifer Amigon
Deepesh Chui
Aika Inouye
Kaitlin Ostrosky
Chavez Briddick
Aruna Figeroa
Kadeem Flosi
Faith Gillian
Mayumi Kolmetz
Costa Dilliard
Johnson Sergi
Tony Foller
Ashley Doe
Octavia Malet
Faith Gillian
IdCountryDate
1000Spain2025-10-06
1001United Kingdom2025-10-08
1002Japan2025-09-29
1003France2025-10-18
1004Japan2025-10-15
1005Russia2025-10-05
1006India2025-10-14
1007Italy2025-10-20
1008Germany2025-10-19
1009Germany2025-10-19
1010Australia2025-10-05
1011France2025-10-03
1012India2025-09-30
1013Spain2025-10-03
1014Germany2025-09-29
1015Australia2025-09-22
1016Germany2025-10-07
1017Spain2025-10-11
1018India2025-10-07
1019United Kingdom2025-09-21
1020France2025-10-20
1021Australia2025-10-02
1022Germany2025-10-06
1023Canada2025-09-28
1024United Kingdom2025-10-11
1025Italy2025-10-11
1026Italy2025-09-26
1027Germany2025-10-16
1028Germany2025-10-19
1029India2025-09-24
1030Canada2025-10-11
1031India2025-09-26
1032France2025-10-10
1033Canada2025-10-12
1034Spain2025-10-15
1035France2025-10-16
1036Argentina2025-10-04
1037France2025-09-23
1038Spain2025-09-30
1039Australia2025-10-10
1040India2025-10-10
1041United Kingdom2025-09-23
1042Brazil2025-09-23
1043Germany2025-10-02
1044Australia2025-09-24
1045Italy2025-09-30
1046Spain2025-09-27
1047Argentina2025-09-27
1048Germany2025-09-25
1049Brazil2025-10-06

On-Demand Data

NameIdCountryDate
Nicolas Iturbide1000Japan2025-10-17
Misaki Royster1001Japan2025-10-17
Jeanfrancois Venere1002France2025-10-17
Jeanfrancois Venere1003Japan2025-10-15
Darci Poquette1004Russia2025-10-02
Munro Ferencz1005Japan2025-10-12
Kaitlin Ostrosky1006Russia2025-10-16
Silvio Slusarski1007Argentina2025-10-19
Isabel Bowley1008Canada2025-09-30
Jeanfrancois Venere1009Japan2025-10-20
Greenwood Bolognia1010Argentina2025-09-24
Juan Wieser1011Australia2025-09-27
Mujtaba Nicka1012Brazil2025-09-29
Maisha Rulapaugh1013Spain2025-10-02
Aruna Figeroa1014Japan2025-10-16
Misaki Royster1015Argentina2025-10-01
Aruna Figeroa1016United Kingdom2025-10-17
David Darakjy1017Brazil2025-10-20
Faith Gillian1018Brazil2025-10-14
Nicolas Iturbide1019India2025-10-18
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Chavez BriddickCanadaStephen Shaw PROPOSAL
Faith GillianArgentinaAmy Elsner QUALIFIED
Misaki RoysterFranceBernardo Dominic RENEWAL
Ivar PaprockiJapanElwin Sharvill RENEWAL
Clifford RimGermanyAsiya Javayant PROPOSAL
David DarakjyArgentinaElwin Sharvill NEW
Maria MarrierJapanOnyama Limba UNQUALIFIED
Mujtaba NickaRussiaAnna Fali PROPOSAL
Munro FerenczBrazilAnna Fali NEGOTIATION
Maria MarrierAustraliaStephen Shaw UNQUALIFIED
Izzy GarufiSpainXuxue Feng RENEWAL
Nicolas IturbideBrazilXuxue Feng RENEWAL
Juan WieserArgentinaAsiya Javayant NEGOTIATION
Tony FollerUnited KingdomIoni Bowcher NEW
Silvio SlusarskiCanadaAnna Fali NEGOTIATION
Jones VocelkaArgentinaStephen Shaw NEGOTIATION
Ashley DoeUnited KingdomIoni Bowcher NEW
Johnson SergiArgentinaXuxue Feng NEW
Costa DilliardUnited KingdomBernardo Dominic NEW
Aruna FigeroaAustraliaAnna Fali PROPOSAL
Francesco ShinkoArgentinaAnna Fali QUALIFIED
James ButtItalyBernardo Dominic PROPOSAL
Ashley DoeUnited KingdomXuxue Feng RENEWAL
Faith GillianBrazilXuxue Feng PROPOSAL
Rodrigues CampainIndiaXuxue Feng NEW
Ivar PaprockiUnited KingdomIvan Magalhaes UNQUALIFIED
Maria MarrierIndiaBernardo Dominic NEGOTIATION
Misaki RoysterFranceElwin Sharvill UNQUALIFIED
Kaitlin OstroskyUnited KingdomAsiya Javayant QUALIFIED
Tony FollerArgentinaAsiya Javayant PROPOSAL
Clifford RimItalyAnna Fali QUALIFIED
Greenwood BologniaItalyAnna Fali UNQUALIFIED
Mujtaba NickaSpainAmy Elsner QUALIFIED
Kadeem FlosiCanadaStephen Shaw NEW
Jennifer AmigonJapanOnyama Limba NEGOTIATION
Alejandro PerinFranceStephen Shaw NEW
Leja CaldareraIndiaAmy Elsner NEW
James ButtFranceElwin Sharvill RENEWAL
James ButtRussiaOnyama Limba NEGOTIATION
Costa DilliardGermanyBernardo Dominic UNQUALIFIED

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