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
Aditya KuskoGermanyOnyama Limba PROPOSAL
Arvin AlbaresJapanXuxue Feng RENEWAL
Aika InouyeRussiaBernardo Dominic PROPOSAL
Wickens NestleAustraliaAmy Elsner QUALIFIED
Misaki RoysterIndiaOnyama Limba UNQUALIFIED
Misaki RoysterAustraliaIvan Magalhaes PROPOSAL
Antonio CaudyItalyIoni Bowcher NEW
Jennifer AmigonUnited KingdomAnna Fali QUALIFIED
Mayumi KolmetzArgentinaAmy Elsner UNQUALIFIED
Jennifer AmigonAustraliaOnyama Limba NEGOTIATION
Ricardo GauchoAustraliaStephen Shaw NEW
Juan WieserAustraliaAsiya Javayant UNQUALIFIED
Rodrigues CampainBrazilIvan Magalhaes RENEWAL
Darci PoquetteAustraliaStephen Shaw NEGOTIATION
Mujtaba NickaAustraliaIoni Bowcher NEGOTIATION
Jennifer AmigonArgentinaAsiya Javayant PROPOSAL
Jeanfrancois VenereFranceAsiya Javayant QUALIFIED
Morrow RutaCanadaAmy Elsner NEW
Mayumi KolmetzItalyBernardo Dominic RENEWAL
David DarakjyJapanAsiya Javayant PROPOSAL
Juan WieserIndiaXuxue Feng RENEWAL
Adams MorascaCanadaIoni Bowcher PROPOSAL
Rodrigues CampainBrazilOnyama Limba RENEWAL
David DarakjyGermanyIvan Magalhaes QUALIFIED
Deepesh ChuiBrazilIoni Bowcher RENEWAL
Clifford RimAustraliaAnna Fali RENEWAL
Morrow RutaIndiaXuxue Feng NEGOTIATION
Darci PoquetteItalyIvan Magalhaes RENEWAL
Ricardo GauchoBrazilOnyama Limba QUALIFIED
Sinclair WaycottSpainAsiya Javayant UNQUALIFIED
Leja CaldareraAustraliaXuxue Feng RENEWAL
Emily WhobreyRussiaBernardo Dominic NEGOTIATION
Aruna FigeroaJapanAnna Fali PROPOSAL
Clifford RimFranceStephen Shaw NEGOTIATION
Nicolas IturbideBrazilAmy Elsner NEW
Jefferson SchemmerUnited KingdomIvan Magalhaes PROPOSAL
Jennifer AmigonArgentinaOnyama Limba UNQUALIFIED
Juan WieserUnited KingdomStephen Shaw NEW
James ButtRussiaStephen Shaw RENEWAL
Wickens NestleJapanOnyama Limba NEGOTIATION
Deepesh ChuiSpainOnyama Limba UNQUALIFIED
Misaki RoysterBrazilIvan Magalhaes PROPOSAL
Francesco ShinkoUnited KingdomAnna Fali RENEWAL
Francesco ShinkoIndiaXuxue Feng PROPOSAL
James ButtCanadaStephen Shaw UNQUALIFIED
Wickens NestleIndiaOnyama Limba PROPOSAL
Arvin AlbaresAustraliaStephen Shaw NEW
Murillo MaletItalyXuxue Feng NEW
Isabel BowleyGermanyAnna Fali PROPOSAL
Octavia MaletCanadaAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Maria MarrierGermanyIvan Magalhaes NEW
Salvatore StockhamSpainElwin Sharvill NEGOTIATION
Munro FerenczJapanElwin Sharvill NEW
Nicolas IturbideItalyAmy Elsner QUALIFIED
Sinclair WaycottRussiaIoni Bowcher NEGOTIATION
Jennifer AmigonUnited KingdomIvan Magalhaes UNQUALIFIED
Jones VocelkaBrazilAsiya Javayant NEGOTIATION
Aika InouyeArgentinaIoni Bowcher UNQUALIFIED
Kaitlin OstroskyJapanIvan Magalhaes NEGOTIATION
Johnson SergiItalyBernardo Dominic PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Cody SaylorsUnited Kingdom2025-10-13Commercial Press UNQUALIFIED95Stephen Shaw
1001Leon OldroydSpain2025-10-12Truhlar And Truhlar Attys PROPOSAL92Stephen Shaw
1002Tony FollerCanada2025-09-22Truhlar And Truhlar Attys UNQUALIFIED84Bernardo Dominic
1003Morrow RutaItaly2025-10-18Printing Dimensions NEGOTIATION38Elwin Sharvill
1004Ashley DoeAustralia2025-10-06Chapman, Ross E Esq NEW90Anna Fali
1005Isabel BowleyItaly2025-10-15Buckley Miller Wright QUALIFIED70Anna Fali
1006Clifford RimJapan2025-09-29Feltz Printing Service QUALIFIED27Asiya Javayant
1007Greenwood BologniaArgentina2025-10-10Dorl, James J Esq NEW78Amy Elsner
1008David DarakjyItaly2025-09-27Truhlar And Truhlar Attys RENEWAL0Ioni Bowcher
1009Antonio CaudyFrance2025-10-02Buckley Miller Wright NEGOTIATION51Stephen Shaw
1010Jones VocelkaRussia2025-09-23Dorl, James J Esq NEGOTIATION50Anna Fali
1011Mayumi KolmetzFrance2025-10-18Rangoni Of Florence QUALIFIED0Bernardo Dominic
1012Aika InouyeSpain2025-10-13Chemel, James L Cpa QUALIFIED17Bernardo Dominic
1013Greenwood BologniaGermany2025-09-25Chapman, Ross E Esq PROPOSAL74Stephen Shaw
1014Isabel BowleyGermany2025-09-26King, Christopher A Esq NEGOTIATION96Xuxue Feng
1015Cody SaylorsSpain2025-10-03Dorl, James J Esq QUALIFIED22Ioni Bowcher
1016Isabel BowleyUnited Kingdom2025-10-14Benton, John B Jr QUALIFIED83Stephen Shaw
1017Leja CaldareraAustralia2025-10-01Rousseaux, Michael Esq UNQUALIFIED82Elwin Sharvill
1018Antonio CaudySpain2025-10-12Printing Dimensions RENEWAL39Asiya Javayant
1019Isabel BowleyIndia2025-09-29Commercial Press NEW81Asiya Javayant
1020Cody SaylorsFrance2025-09-22Chanay, Jeffrey A Esq NEW0Stephen Shaw
1021Greenwood BologniaItaly2025-09-27Printing Dimensions NEW98Stephen Shaw
1022Emily WhobreyAustralia2025-09-30Feiner Bros UNQUALIFIED75Bernardo Dominic
1023Aika InouyeFrance2025-10-19Commercial Press RENEWAL69Asiya Javayant
1024Julie StensethUnited Kingdom2025-09-24Feiner Bros UNQUALIFIED20Ivan Magalhaes
1025Chavez BriddickRussia2025-10-09Chanay, Jeffrey A Esq RENEWAL85Onyama Limba
1026Arvin AlbaresBrazil2025-09-30Commercial Press RENEWAL23Ivan Magalhaes
1027Stacey MacleadItaly2025-10-11King, Christopher A Esq RENEWAL91Anna Fali
1028Ivar PaprockiBrazil2025-10-07Feltz Printing Service RENEWAL52Stephen Shaw
1029Stacey MacleadSpain2025-10-21Chemel, James L Cpa UNQUALIFIED67Stephen Shaw
1030Stacey MacleadCanada2025-09-29Commercial Press RENEWAL55Asiya Javayant
1031Munro FerenczAustralia2025-10-11Chemel, James L Cpa RENEWAL25Amy Elsner
1032Julie StensethArgentina2025-10-04Commercial Press NEGOTIATION75Ivan Magalhaes
1033Nicolas IturbideJapan2025-09-29Rangoni Of Florence NEGOTIATION61Ivan Magalhaes
1034Antonio CaudyRussia2025-10-02Chapman, Ross E Esq QUALIFIED65Stephen Shaw
1035Jones VocelkaCanada2025-10-12Dorl, James J Esq QUALIFIED70Bernardo Dominic
1036Costa DilliardItaly2025-10-14Chapman, Ross E Esq NEW98Ivan Magalhaes
1037Aditya KuskoCanada2025-10-04Chapman, Ross E Esq NEW52Ioni Bowcher
1038Jennifer AmigonCanada2025-10-04Commercial Press UNQUALIFIED70Onyama Limba
1039Costa DilliardUnited Kingdom2025-10-11Buckley Miller Wright UNQUALIFIED83Ivan Magalhaes
1040Johnson SergiSpain2025-10-07King, Christopher A Esq NEGOTIATION81Stephen Shaw
1041Aika InouyeSpain2025-10-12Morlong Associates NEW74Xuxue Feng
1042Kadeem FlosiRussia2025-10-08Dorl, James J Esq UNQUALIFIED31Ioni Bowcher
1043Aditya KuskoRussia2025-10-10Morlong Associates NEW86Xuxue Feng
1044Izzy GarufiRussia2025-10-12Feltz Printing Service PROPOSAL80Ivan Magalhaes
1045Mujtaba NickaItaly2025-10-13Chemel, James L Cpa UNQUALIFIED4Amy Elsner
1046Murillo MaletItaly2025-10-16Commercial Press RENEWAL32Amy Elsner
1047Salvatore StockhamCanada2025-10-11Truhlar And Truhlar Attys RENEWAL91Bernardo Dominic
1048Jefferson SchemmerBrazil2025-10-13Chanay, Jeffrey A Esq PROPOSAL82Xuxue Feng
1049Arvin AlbaresRussia2025-10-01Rangoni Of Florence QUALIFIED72Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
James ButtCanadaIvan Magalhaes QUALIFIED
Murillo MaletUnited KingdomAmy Elsner RENEWAL
Leon OldroydItalyAsiya Javayant QUALIFIED
Nicolas IturbideRussiaAsiya Javayant UNQUALIFIED
Leja CaldareraItalyOnyama Limba PROPOSAL
Murillo MaletGermanyIoni Bowcher RENEWAL
Kadeem FlosiCanadaBernardo Dominic RENEWAL
Salvatore StockhamArgentinaStephen Shaw NEGOTIATION
James ButtCanadaAnna Fali NEW
Faith GillianGermanyBernardo Dominic PROPOSAL
Kadeem FlosiJapanOnyama Limba NEW
Maria MarrierItalyAmy Elsner PROPOSAL
Sinclair WaycottCanadaOnyama Limba PROPOSAL
Antonio CaudyIndiaAmy Elsner RENEWAL
Adams MorascaAustraliaIvan Magalhaes RENEWAL
Ricardo GauchoRussiaBernardo Dominic UNQUALIFIED
James ButtAustraliaIvan Magalhaes RENEWAL
Aika InouyeIndiaIoni Bowcher QUALIFIED
Leon OldroydItalyBernardo Dominic QUALIFIED
Stacey MacleadArgentinaXuxue Feng NEGOTIATION
Alejandro PerinGermanyXuxue Feng UNQUALIFIED
Arvin AlbaresGermanyBernardo Dominic NEGOTIATION
Misaki RoysterCanadaStephen Shaw QUALIFIED
Ivar PaprockiUnited KingdomElwin Sharvill QUALIFIED
James ButtJapanStephen Shaw PROPOSAL
Maisha RulapaughBrazilOnyama Limba QUALIFIED
Misaki RoysterAustraliaBernardo Dominic NEGOTIATION
Maria MarrierBrazilAnna Fali UNQUALIFIED
Arvin AlbaresBrazilIoni Bowcher UNQUALIFIED
Wickens NestleSpainAsiya Javayant QUALIFIED
Julie StensethFranceStephen Shaw NEGOTIATION
Adams MorascaAustraliaElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomXuxue Feng QUALIFIED
Izzy GarufiJapanIoni Bowcher RENEWAL
Emily WhobreyCanadaBernardo Dominic NEGOTIATION
Aruna FigeroaUnited KingdomOnyama Limba NEW
Munro FerenczCanadaAnna Fali QUALIFIED
Juan WieserRussiaXuxue Feng RENEWAL
Izzy GarufiCanadaOnyama Limba PROPOSAL
Jeanfrancois VenereArgentinaAnna Fali QUALIFIED
Ricardo GauchoIndiaAsiya Javayant NEGOTIATION
Alejandro PerinRussiaIoni Bowcher QUALIFIED
Arvin AlbaresFranceElwin Sharvill NEW
Juan WieserIndiaAsiya Javayant UNQUALIFIED
Costa DilliardItalyOnyama Limba PROPOSAL
Maisha RulapaughItalyElwin Sharvill QUALIFIED
Tony FollerUnited KingdomOnyama Limba NEGOTIATION
James ButtFranceOnyama Limba UNQUALIFIED
Leja CaldareraBrazilIoni Bowcher QUALIFIED
Cody SaylorsRussiaAmy Elsner RENEWAL
Frozen Columns
Name
Misaki Royster
Nicolas Iturbide
Cody Saylors
Johnson Sergi
Mujtaba Nicka
Greenwood Bolognia
Isabel Bowley
Izzy Garufi
Deepesh Chui
Morrow Ruta
Arvin Albares
Alejandro Perin
Chavez Briddick
Juan Wieser
Rodrigues Campain
Morrow Ruta
Tony Foller
Jeanfrancois Venere
Stacey Maclead
Greenwood Bolognia
Stacey Maclead
Silvio Slusarski
Leon Oldroyd
Ivar Paprocki
Francesco Shinko
Isabel Bowley
Francesco Shinko
David Darakjy
Johnson Sergi
Maisha Rulapaugh
Sinclair Waycott
Costa Dilliard
Emily Whobrey
Emily Whobrey
Rodrigues Campain
Mayumi Kolmetz
Claire Tollner
Morrow Ruta
Wickens Nestle
Octavia Malet
David Darakjy
James Butt
Salvatore Stockham
Morrow Ruta
Arvin Albares
Maisha Rulapaugh
Greenwood Bolognia
Jefferson Schemmer
Nicolas Iturbide
Ashley Doe
IdCountryDate
1000Italy2025-10-21
1001Argentina2025-10-11
1002Germany2025-09-26
1003Argentina2025-09-29
1004Canada2025-10-19
1005Russia2025-10-02
1006India2025-10-06
1007Argentina2025-10-15
1008Italy2025-09-23
1009Argentina2025-10-14
1010Argentina2025-10-08
1011Canada2025-09-23
1012United Kingdom2025-10-08
1013France2025-10-18
1014Spain2025-10-17
1015Australia2025-10-11
1016Russia2025-09-28
1017Argentina2025-10-21
1018India2025-09-24
1019Spain2025-09-22
1020Germany2025-10-18
1021Japan2025-10-10
1022Australia2025-10-02
1023India2025-10-12
1024Japan2025-10-01
1025Brazil2025-10-07
1026India2025-10-19
1027Argentina2025-10-13
1028Argentina2025-09-30
1029India2025-10-16
1030Brazil2025-10-14
1031Canada2025-10-09
1032France2025-10-14
1033Australia2025-10-07
1034India2025-09-26
1035Japan2025-10-12
1036Germany2025-09-28
1037Argentina2025-10-06
1038Russia2025-10-17
1039Argentina2025-10-05
1040Russia2025-10-15
1041Argentina2025-09-28
1042France2025-10-14
1043United Kingdom2025-10-20
1044Germany2025-09-26
1045Australia2025-10-09
1046Brazil2025-09-25
1047Germany2025-10-07
1048Spain2025-10-17
1049Brazil2025-09-25

On-Demand Data

NameIdCountryDate
Jefferson Schemmer1000Australia2025-10-12
Maria Marrier1001France2025-09-23
Darci Poquette1002Spain2025-09-22
Jefferson Schemmer1003Brazil2025-10-05
Mujtaba Nicka1004Argentina2025-10-06
Francesco Shinko1005Russia2025-10-01
Rodrigues Campain1006Argentina2025-10-03
Jones Vocelka1007Japan2025-10-10
Aditya Kusko1008Argentina2025-09-24
Jefferson Schemmer1009Italy2025-10-16
Sinclair Waycott1010Australia2025-10-21
Aika Inouye1011Canada2025-10-17
Leon Oldroyd1012Spain2025-10-01
Emily Whobrey1013Canada2025-10-08
Claire Tollner1014Spain2025-10-16
Adams Morasca1015Russia2025-09-23
Munro Ferencz1016Argentina2025-09-24
Arvin Albares1017United Kingdom2025-09-22
Juan Wieser1018United Kingdom2025-10-11
Aika Inouye1019Spain2025-09-24
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aika InouyeArgentinaBernardo Dominic NEGOTIATION
David DarakjyAustraliaOnyama Limba NEGOTIATION
Izzy GarufiJapanAsiya Javayant NEW
Francesco ShinkoGermanyIvan Magalhaes UNQUALIFIED
Ashley DoeAustraliaBernardo Dominic RENEWAL
Jefferson SchemmerItalyElwin Sharvill NEGOTIATION
Francesco ShinkoIndiaIoni Bowcher QUALIFIED
Isabel BowleyRussiaAnna Fali NEW
Darci PoquetteItalyIvan Magalhaes UNQUALIFIED
Murillo MaletBrazilIvan Magalhaes PROPOSAL
Jennifer AmigonJapanAsiya Javayant QUALIFIED
Leon OldroydIndiaElwin Sharvill RENEWAL
Smith GlickBrazilStephen Shaw UNQUALIFIED
Emily WhobreySpainStephen Shaw RENEWAL
James ButtArgentinaStephen Shaw NEGOTIATION
Smith GlickItalyAsiya Javayant PROPOSAL
Aditya KuskoFranceXuxue Feng NEGOTIATION
Silvio SlusarskiJapanStephen Shaw NEW
Cody SaylorsJapanElwin Sharvill NEW
Juan WieserCanadaAmy Elsner QUALIFIED
Sinclair WaycottJapanElwin Sharvill UNQUALIFIED
Maria MarrierAustraliaOnyama Limba NEW
Francesco ShinkoSpainBernardo Dominic NEW
Misaki RoysterItalyIoni Bowcher NEW
Sinclair WaycottGermanyAmy Elsner QUALIFIED
Mujtaba NickaItalyElwin Sharvill PROPOSAL
Leja CaldareraJapanIvan Magalhaes NEW
Arvin AlbaresItalyAsiya Javayant PROPOSAL
Ivar PaprockiItalyBernardo Dominic RENEWAL
Misaki RoysterGermanyOnyama Limba NEGOTIATION
Ricardo GauchoIndiaAmy Elsner QUALIFIED
Francesco ShinkoFranceElwin Sharvill NEW
Antonio CaudyFranceAmy Elsner QUALIFIED
Morrow RutaIndiaIoni Bowcher QUALIFIED
Munro FerenczGermanyIoni Bowcher QUALIFIED
David DarakjySpainAmy Elsner NEW
Ricardo GauchoJapanAnna Fali PROPOSAL
Tony FollerRussiaAmy Elsner RENEWAL
Ashley DoeBrazilOnyama Limba NEW
Costa DilliardIndiaElwin Sharvill NEGOTIATION

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