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
Kadeem FlosiBrazilAnna Fali NEGOTIATION
Johnson SergiFranceIvan Magalhaes NEGOTIATION
Deepesh ChuiSpainStephen Shaw PROPOSAL
Jones VocelkaJapanIvan Magalhaes RENEWAL
Mujtaba NickaSpainAnna Fali RENEWAL
Emily WhobreyArgentinaElwin Sharvill NEGOTIATION
James ButtIndiaXuxue Feng NEW
Stacey MacleadIndiaOnyama Limba UNQUALIFIED
Tony FollerAustraliaOnyama Limba UNQUALIFIED
Sinclair WaycottFranceXuxue Feng UNQUALIFIED
Maisha RulapaughJapanAsiya Javayant NEW
Francesco ShinkoRussiaXuxue Feng PROPOSAL
Tony FollerFranceBernardo Dominic NEGOTIATION
Deepesh ChuiUnited KingdomIvan Magalhaes QUALIFIED
Munro FerenczBrazilAnna Fali RENEWAL
Aika InouyeArgentinaBernardo Dominic QUALIFIED
Rodrigues CampainJapanAmy Elsner QUALIFIED
Izzy GarufiBrazilIoni Bowcher NEW
Izzy GarufiIndiaAmy Elsner UNQUALIFIED
Francesco ShinkoAustraliaAnna Fali RENEWAL
Murillo MaletIndiaOnyama Limba QUALIFIED
Francesco ShinkoAustraliaAsiya Javayant NEGOTIATION
Aruna FigeroaIndiaOnyama Limba PROPOSAL
Jennifer AmigonBrazilOnyama Limba QUALIFIED
Smith GlickCanadaOnyama Limba RENEWAL
Alejandro PerinItalyStephen Shaw RENEWAL
Leja CaldareraIndiaOnyama Limba UNQUALIFIED
Smith GlickItalyBernardo Dominic RENEWAL
Cody SaylorsAustraliaBernardo Dominic PROPOSAL
Sinclair WaycottSpainXuxue Feng NEGOTIATION
Tony FollerGermanyAsiya Javayant PROPOSAL
Maria MarrierBrazilOnyama Limba QUALIFIED
Mujtaba NickaFranceBernardo Dominic QUALIFIED
Leon OldroydBrazilAnna Fali PROPOSAL
Smith GlickIndiaElwin Sharvill NEGOTIATION
Murillo MaletFranceIoni Bowcher UNQUALIFIED
Morrow RutaAustraliaElwin Sharvill RENEWAL
James ButtItalyBernardo Dominic UNQUALIFIED
Faith GillianBrazilBernardo Dominic NEW
Maisha RulapaughSpainElwin Sharvill RENEWAL
Aditya KuskoFranceIoni Bowcher RENEWAL
Juan WieserCanadaElwin Sharvill PROPOSAL
Alejandro PerinGermanyElwin Sharvill NEW
Claire TollnerJapanAnna Fali NEW
Misaki RoysterIndiaAmy Elsner NEGOTIATION
Jefferson SchemmerSpainAsiya Javayant RENEWAL
Leon OldroydCanadaXuxue Feng QUALIFIED
Rodrigues CampainBrazilAnna Fali UNQUALIFIED
Silvio SlusarskiSpainAsiya Javayant UNQUALIFIED
Aika InouyeJapanBernardo Dominic RENEWAL
Horizontal
NameCountryRepresentativeStatus
Ivar PaprockiBrazilXuxue Feng NEW
Jones VocelkaAustraliaIvan Magalhaes NEGOTIATION
Greenwood BologniaIndiaAmy Elsner QUALIFIED
Jeanfrancois VenereRussiaAsiya Javayant QUALIFIED
Izzy GarufiFranceIvan Magalhaes PROPOSAL
Francesco ShinkoCanadaElwin Sharvill NEW
Mujtaba NickaRussiaIvan Magalhaes NEGOTIATION
Maisha RulapaughArgentinaElwin Sharvill UNQUALIFIED
Aika InouyeAustraliaAsiya Javayant PROPOSAL
Maisha RulapaughUnited KingdomStephen Shaw UNQUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Arvin AlbaresBrazil2025-08-09Feiner Bros PROPOSAL21Ivan Magalhaes
1001Stacey MacleadUnited Kingdom2025-08-04Commercial Press QUALIFIED94Anna Fali
1002Aditya KuskoUnited Kingdom2025-08-15Buckley Miller Wright QUALIFIED90Onyama Limba
1003Arvin AlbaresFrance2025-08-13Chapman, Ross E Esq RENEWAL92Onyama Limba
1004Izzy GarufiFrance2025-08-18Feiner Bros NEW43Onyama Limba
1005Juan WieserAustralia2025-08-07Chemel, James L Cpa PROPOSAL13Ivan Magalhaes
1006Emily WhobreyGermany2025-08-06Dorl, James J Esq NEGOTIATION34Amy Elsner
1007Rodrigues CampainIndia2025-08-11Dorl, James J Esq NEW52Elwin Sharvill
1008Francesco ShinkoItaly2025-08-28Printing Dimensions NEGOTIATION96Ivan Magalhaes
1009Francesco ShinkoGermany2025-08-23Rangoni Of Florence PROPOSAL97Stephen Shaw
1010Tony FollerAustralia2025-08-13Morlong Associates QUALIFIED67Onyama Limba
1011Emily WhobreyRussia2025-08-07Feltz Printing Service UNQUALIFIED8Ivan Magalhaes
1012Antonio CaudyRussia2025-08-24Chemel, James L Cpa UNQUALIFIED22Asiya Javayant
1013Ashley DoeSpain2025-08-05Rangoni Of Florence NEGOTIATION83Bernardo Dominic
1014Jeanfrancois VenereUnited Kingdom2025-08-16Commercial Press QUALIFIED35Ioni Bowcher
1015Clifford RimBrazil2025-08-24Morlong Associates NEGOTIATION89Elwin Sharvill
1016Silvio SlusarskiAustralia2025-08-10Printing Dimensions NEW26Elwin Sharvill
1017Maria MarrierCanada2025-08-01Morlong Associates NEW13Bernardo Dominic
1018Francesco ShinkoAustralia2025-08-27Buckley Miller Wright NEW2Amy Elsner
1019Francesco ShinkoArgentina2025-08-18Feltz Printing Service RENEWAL69Bernardo Dominic
1020Sinclair WaycottAustralia2025-08-15Rangoni Of Florence QUALIFIED93Xuxue Feng
1021Sinclair WaycottItaly2025-08-21Feltz Printing Service QUALIFIED91Ivan Magalhaes
1022Wickens NestleIndia2025-08-18Chapman, Ross E Esq RENEWAL87Asiya Javayant
1023Arvin AlbaresAustralia2025-08-22Benton, John B Jr NEGOTIATION90Xuxue Feng
1024Silvio SlusarskiUnited Kingdom2025-08-13Chanay, Jeffrey A Esq PROPOSAL68Stephen Shaw
1025Izzy GarufiIndia2025-08-08Benton, John B Jr UNQUALIFIED67Anna Fali
1026Claire TollnerBrazil2025-08-10Rangoni Of Florence QUALIFIED32Ivan Magalhaes
1027Claire TollnerSpain2025-07-31Benton, John B Jr UNQUALIFIED59Anna Fali
1028Smith GlickAustralia2025-07-31Buckley Miller Wright NEW89Anna Fali
1029Chavez BriddickIndia2025-08-07King, Christopher A Esq NEGOTIATION71Stephen Shaw
1030Jones VocelkaFrance2025-07-31Chanay, Jeffrey A Esq RENEWAL78Ivan Magalhaes
1031Johnson SergiRussia2025-08-01Morlong Associates RENEWAL91Asiya Javayant
1032Greenwood BologniaIndia2025-08-19Chapman, Ross E Esq UNQUALIFIED22Ioni Bowcher
1033Ivar PaprockiItaly2025-08-24Chanay, Jeffrey A Esq QUALIFIED10Anna Fali
1034Ivar PaprockiAustralia2025-08-23Commercial Press NEW6Onyama Limba
1035Antonio CaudyRussia2025-08-13Dorl, James J Esq NEGOTIATION38Amy Elsner
1036Misaki RoysterCanada2025-08-09King, Christopher A Esq RENEWAL40Onyama Limba
1037Nicolas IturbideGermany2025-07-31Dorl, James J Esq NEW23Onyama Limba
1038Antonio CaudyFrance2025-07-31Rangoni Of Florence QUALIFIED85Ioni Bowcher
1039Chavez BriddickSpain2025-08-28Printing Dimensions NEGOTIATION59Ivan Magalhaes
1040Aditya KuskoArgentina2025-08-04Chapman, Ross E Esq UNQUALIFIED99Ivan Magalhaes
1041Tony FollerArgentina2025-08-28Buckley Miller Wright RENEWAL94Xuxue Feng
1042Wickens NestleJapan2025-07-31Commercial Press NEGOTIATION88Stephen Shaw
1043Ivar PaprockiArgentina2025-08-10Rangoni Of Florence RENEWAL70Elwin Sharvill
1044Kadeem FlosiCanada2025-08-07King, Christopher A Esq UNQUALIFIED2Ivan Magalhaes
1045Jennifer AmigonSpain2025-07-30Rangoni Of Florence UNQUALIFIED84Bernardo Dominic
1046Maisha RulapaughFrance2025-08-08Morlong Associates NEGOTIATION91Stephen Shaw
1047Greenwood BologniaSpain2025-08-20Rangoni Of Florence NEGOTIATION54Elwin Sharvill
1048Emily WhobreyRussia2025-08-10King, Christopher A Esq UNQUALIFIED43Ivan Magalhaes
1049Arvin AlbaresAustralia2025-08-25Commercial Press NEW80Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Isabel BowleyCanadaElwin Sharvill NEW
Jeanfrancois VenereSpainAnna Fali RENEWAL
Darci PoquetteAustraliaStephen Shaw UNQUALIFIED
Tony FollerAustraliaAsiya Javayant PROPOSAL
Morrow RutaArgentinaAsiya Javayant NEW
Sinclair WaycottFranceElwin Sharvill PROPOSAL
Aruna FigeroaFranceXuxue Feng UNQUALIFIED
Isabel BowleySpainAmy Elsner QUALIFIED
Ricardo GauchoGermanyAnna Fali NEW
Antonio CaudySpainStephen Shaw NEGOTIATION
Emily WhobreyCanadaBernardo Dominic QUALIFIED
Smith GlickRussiaIvan Magalhaes UNQUALIFIED
Silvio SlusarskiItalyStephen Shaw RENEWAL
Maria MarrierBrazilAnna Fali PROPOSAL
Deepesh ChuiBrazilIoni Bowcher RENEWAL
Izzy GarufiUnited KingdomElwin Sharvill NEGOTIATION
Clifford RimRussiaOnyama Limba NEGOTIATION
Leja CaldareraBrazilAnna Fali RENEWAL
Sinclair WaycottBrazilIvan Magalhaes RENEWAL
Francesco ShinkoSpainIvan Magalhaes UNQUALIFIED
Misaki RoysterItalyStephen Shaw UNQUALIFIED
Aditya KuskoRussiaOnyama Limba NEW
Ricardo GauchoArgentinaStephen Shaw NEW
Mayumi KolmetzJapanAnna Fali NEGOTIATION
Mayumi KolmetzAustraliaAsiya Javayant NEW
Wickens NestleRussiaStephen Shaw QUALIFIED
Sinclair WaycottArgentinaIvan Magalhaes NEW
Morrow RutaJapanBernardo Dominic PROPOSAL
Clifford RimIndiaBernardo Dominic UNQUALIFIED
Isabel BowleyItalyElwin Sharvill PROPOSAL
Tony FollerSpainBernardo Dominic UNQUALIFIED
Kaitlin OstroskyUnited KingdomStephen Shaw NEGOTIATION
Faith GillianBrazilOnyama Limba QUALIFIED
Mayumi KolmetzGermanyAsiya Javayant PROPOSAL
Johnson SergiItalyXuxue Feng NEW
Munro FerenczSpainIvan Magalhaes UNQUALIFIED
Wickens NestleFranceStephen Shaw NEW
Adams MorascaArgentinaAmy Elsner UNQUALIFIED
Deepesh ChuiIndiaBernardo Dominic NEGOTIATION
Darci PoquetteGermanyOnyama Limba RENEWAL
Wickens NestleIndiaBernardo Dominic NEGOTIATION
Jones VocelkaArgentinaOnyama Limba RENEWAL
Emily WhobreyGermanyBernardo Dominic NEGOTIATION
Maisha RulapaughBrazilAsiya Javayant NEW
Kadeem FlosiRussiaElwin Sharvill UNQUALIFIED
Aditya KuskoArgentinaAnna Fali UNQUALIFIED
Julie StensethCanadaStephen Shaw UNQUALIFIED
Misaki RoysterIndiaOnyama Limba NEGOTIATION
Leja CaldareraBrazilElwin Sharvill NEGOTIATION
Jeanfrancois VenereJapanStephen Shaw PROPOSAL
Frozen Columns
Name
James Butt
Ricardo Gaucho
Aditya Kusko
David Darakjy
Darci Poquette
Alejandro Perin
Francesco Shinko
David Darakjy
Aditya Kusko
Tony Foller
Octavia Malet
Munro Ferencz
Kaitlin Ostrosky
Aika Inouye
Maisha Rulapaugh
Faith Gillian
Chavez Briddick
Emily Whobrey
Morrow Ruta
Chavez Briddick
Adams Morasca
Leja Caldarera
Emily Whobrey
Maria Marrier
Costa Dilliard
Chavez Briddick
Wickens Nestle
Jennifer Amigon
Rodrigues Campain
Stacey Maclead
Juan Wieser
Mayumi Kolmetz
Aruna Figeroa
Maisha Rulapaugh
Murillo Malet
Kadeem Flosi
Silvio Slusarski
Izzy Garufi
David Darakjy
Sinclair Waycott
Aika Inouye
Stacey Maclead
Aruna Figeroa
Aruna Figeroa
Octavia Malet
Octavia Malet
David Darakjy
Kadeem Flosi
Morrow Ruta
Isabel Bowley
IdCountryDate
1000Japan2025-08-14
1001Brazil2025-08-16
1002France2025-08-20
1003Italy2025-08-24
1004France2025-08-17
1005Italy2025-08-25
1006Germany2025-08-15
1007France2025-08-18
1008Canada2025-08-23
1009Australia2025-08-14
1010United Kingdom2025-08-08
1011Argentina2025-08-05
1012Argentina2025-08-17
1013Brazil2025-08-05
1014France2025-08-22
1015Russia2025-08-28
1016Germany2025-08-18
1017France2025-08-06
1018France2025-08-13
1019Canada2025-08-22
1020United Kingdom2025-08-13
1021Brazil2025-08-18
1022Russia2025-08-11
1023Canada2025-08-04
1024Russia2025-08-22
1025Argentina2025-08-19
1026Canada2025-08-21
1027India2025-08-27
1028Russia2025-08-01
1029Canada2025-08-21
1030Japan2025-07-31
1031United Kingdom2025-08-15
1032India2025-08-07
1033India2025-08-17
1034France2025-08-05
1035Russia2025-08-19
1036Russia2025-08-12
1037Argentina2025-08-22
1038Japan2025-08-21
1039Italy2025-08-01
1040France2025-08-24
1041Brazil2025-08-08
1042Italy2025-08-16
1043Germany2025-08-07
1044Brazil2025-08-26
1045United Kingdom2025-08-14
1046Australia2025-08-23
1047Argentina2025-08-03
1048Italy2025-08-24
1049India2025-08-11

On-Demand Data

NameIdCountryDate
Aditya Kusko1000Germany2025-08-25
Adams Morasca1001Germany2025-07-31
Murillo Malet1002Germany2025-07-30
Mayumi Kolmetz1003Australia2025-08-13
Sinclair Waycott1004Japan2025-08-19
Jefferson Schemmer1005Brazil2025-08-02
Arvin Albares1006Spain2025-08-25
Stacey Maclead1007United Kingdom2025-08-14
Antonio Caudy1008Japan2025-08-15
Jeanfrancois Venere1009Australia2025-08-27
Greenwood Bolognia1010Spain2025-08-21
Mayumi Kolmetz1011Russia2025-08-17
Johnson Sergi1012United Kingdom2025-08-09
Aditya Kusko1013Japan2025-08-27
Salvatore Stockham1014Germany2025-08-05
Faith Gillian1015Japan2025-08-08
Deepesh Chui1016France2025-08-21
Jennifer Amigon1017France2025-08-18
Rodrigues Campain1018Canada2025-08-16
Jennifer Amigon1019Australia2025-08-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Costa DilliardRussiaBernardo Dominic RENEWAL
Jennifer AmigonFranceAmy Elsner PROPOSAL
Stacey MacleadRussiaAsiya Javayant PROPOSAL
Cody SaylorsAustraliaXuxue Feng NEGOTIATION
Cody SaylorsUnited KingdomAnna Fali PROPOSAL
Deepesh ChuiJapanStephen Shaw PROPOSAL
Jefferson SchemmerAustraliaXuxue Feng RENEWAL
Greenwood BologniaArgentinaIvan Magalhaes QUALIFIED
Adams MorascaIndiaIvan Magalhaes QUALIFIED
Adams MorascaGermanyIvan Magalhaes PROPOSAL
Octavia MaletGermanyAnna Fali UNQUALIFIED
Aditya KuskoUnited KingdomAnna Fali RENEWAL
Costa DilliardJapanElwin Sharvill NEW
Kadeem FlosiSpainOnyama Limba UNQUALIFIED
Ivar PaprockiJapanBernardo Dominic NEW
Ivar PaprockiIndiaAmy Elsner RENEWAL
Silvio SlusarskiGermanyIoni Bowcher QUALIFIED
Adams MorascaBrazilIvan Magalhaes QUALIFIED
Claire TollnerAustraliaXuxue Feng RENEWAL
Costa DilliardArgentinaXuxue Feng QUALIFIED
Arvin AlbaresIndiaOnyama Limba NEGOTIATION
Juan WieserFranceIoni Bowcher QUALIFIED
Chavez BriddickRussiaElwin Sharvill UNQUALIFIED
Silvio SlusarskiAustraliaIvan Magalhaes UNQUALIFIED
Alejandro PerinItalyStephen Shaw UNQUALIFIED
Darci PoquetteIndiaBernardo Dominic NEGOTIATION
Mujtaba NickaIndiaIoni Bowcher UNQUALIFIED
Smith GlickJapanBernardo Dominic QUALIFIED
Morrow RutaIndiaBernardo Dominic PROPOSAL
Smith GlickFranceBernardo Dominic RENEWAL
Greenwood BologniaItalyXuxue Feng RENEWAL
Morrow RutaAustraliaElwin Sharvill NEW
Wickens NestleFranceAsiya Javayant PROPOSAL
Wickens NestleIndiaXuxue Feng RENEWAL
Jeanfrancois VenereGermanyAmy Elsner RENEWAL
Ashley DoeUnited KingdomIoni Bowcher NEW
Morrow RutaBrazilStephen Shaw RENEWAL
Nicolas IturbideItalyIvan Magalhaes UNQUALIFIED
Alejandro PerinItalyStephen Shaw RENEWAL
Darci PoquetteJapanBernardo Dominic PROPOSAL

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