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
David DarakjySpainBernardo Dominic RENEWAL
Izzy GarufiIndiaElwin Sharvill NEGOTIATION
James ButtItalyBernardo Dominic NEGOTIATION
James ButtArgentinaXuxue Feng QUALIFIED
Isabel BowleyGermanyIoni Bowcher NEW
Chavez BriddickFranceAnna Fali NEGOTIATION
Wickens NestleRussiaAmy Elsner PROPOSAL
Nicolas IturbideIndiaStephen Shaw NEW
Misaki RoysterJapanAsiya Javayant PROPOSAL
David DarakjyCanadaAsiya Javayant UNQUALIFIED
Rodrigues CampainCanadaAnna Fali QUALIFIED
Greenwood BologniaArgentinaAmy Elsner NEGOTIATION
Clifford RimGermanyAnna Fali NEW
Aruna FigeroaItalyBernardo Dominic NEW
Maria MarrierBrazilBernardo Dominic UNQUALIFIED
Morrow RutaSpainOnyama Limba NEW
Antonio CaudyUnited KingdomElwin Sharvill RENEWAL
Aditya KuskoFranceAnna Fali NEW
Rodrigues CampainRussiaXuxue Feng UNQUALIFIED
Maisha RulapaughBrazilStephen Shaw QUALIFIED
Wickens NestleRussiaXuxue Feng UNQUALIFIED
Tony FollerUnited KingdomElwin Sharvill PROPOSAL
Ricardo GauchoFranceAnna Fali NEW
Antonio CaudyFranceOnyama Limba RENEWAL
Greenwood BologniaAustraliaIoni Bowcher UNQUALIFIED
Munro FerenczAustraliaIoni Bowcher UNQUALIFIED
Octavia MaletIndiaAnna Fali UNQUALIFIED
Johnson SergiAustraliaBernardo Dominic RENEWAL
Isabel BowleySpainStephen Shaw QUALIFIED
Silvio SlusarskiIndiaIoni Bowcher NEW
Antonio CaudyUnited KingdomAsiya Javayant UNQUALIFIED
Chavez BriddickArgentinaOnyama Limba NEW
Jefferson SchemmerRussiaAnna Fali RENEWAL
Greenwood BologniaItalyIvan Magalhaes QUALIFIED
Stacey MacleadGermanyStephen Shaw RENEWAL
Alejandro PerinBrazilAsiya Javayant QUALIFIED
Isabel BowleyJapanAsiya Javayant NEGOTIATION
Leon OldroydCanadaIvan Magalhaes NEW
Izzy GarufiRussiaAnna Fali PROPOSAL
Aika InouyeBrazilIoni Bowcher RENEWAL
Kaitlin OstroskyBrazilIoni Bowcher NEGOTIATION
Juan WieserRussiaIvan Magalhaes NEGOTIATION
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
Ivar PaprockiFranceAsiya Javayant UNQUALIFIED
Arvin AlbaresCanadaIvan Magalhaes NEGOTIATION
Claire TollnerJapanAsiya Javayant UNQUALIFIED
Ricardo GauchoBrazilAmy Elsner QUALIFIED
Deepesh ChuiCanadaXuxue Feng NEGOTIATION
Johnson SergiArgentinaStephen Shaw NEGOTIATION
Misaki RoysterIndiaElwin Sharvill NEW
Horizontal
NameCountryRepresentativeStatus
Tony FollerAustraliaXuxue Feng NEGOTIATION
Leon OldroydCanadaStephen Shaw RENEWAL
Clifford RimSpainIvan Magalhaes QUALIFIED
Isabel BowleyBrazilAnna Fali PROPOSAL
James ButtArgentinaAmy Elsner NEGOTIATION
Kadeem FlosiIndiaIoni Bowcher RENEWAL
Jones VocelkaRussiaXuxue Feng PROPOSAL
Kadeem FlosiGermanyAnna Fali NEGOTIATION
Rodrigues CampainJapanOnyama Limba NEW
Ashley DoeJapanAmy Elsner QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Deepesh ChuiSpain2026-05-22King, Christopher A Esq PROPOSAL35Amy Elsner
1001Morrow RutaArgentina2026-05-30Printing Dimensions UNQUALIFIED48Asiya Javayant
1002Aditya KuskoFrance2026-05-15Chanay, Jeffrey A Esq RENEWAL85Bernardo Dominic
1003Misaki RoysterItaly2026-05-11King, Christopher A Esq NEGOTIATION68Ivan Magalhaes
1004Maisha RulapaughUnited Kingdom2026-05-28Truhlar And Truhlar Attys QUALIFIED91Onyama Limba
1005Mujtaba NickaArgentina2026-06-02Feiner Bros RENEWAL57Amy Elsner
1006Aditya KuskoGermany2026-05-18Dorl, James J Esq NEGOTIATION91Ivan Magalhaes
1007Wickens NestleIndia2026-05-23Feltz Printing Service QUALIFIED48Bernardo Dominic
1008Jeanfrancois VenereArgentina2026-05-30Chapman, Ross E Esq NEW6Asiya Javayant
1009Deepesh ChuiArgentina2026-05-30King, Christopher A Esq UNQUALIFIED0Ivan Magalhaes
1010Francesco ShinkoRussia2026-05-31Dorl, James J Esq NEGOTIATION45Ivan Magalhaes
1011Kadeem FlosiSpain2026-05-22Morlong Associates NEW23Ioni Bowcher
1012Maisha RulapaughSpain2026-06-03Chanay, Jeffrey A Esq RENEWAL58Elwin Sharvill
1013Darci PoquetteCanada2026-05-18Chanay, Jeffrey A Esq RENEWAL76Asiya Javayant
1014Jeanfrancois VenereSpain2026-05-27Feiner Bros NEW8Stephen Shaw
1015Sinclair WaycottSpain2026-05-05Benton, John B Jr NEGOTIATION99Onyama Limba
1016Johnson SergiJapan2026-05-07King, Christopher A Esq NEGOTIATION89Bernardo Dominic
1017Kaitlin OstroskyItaly2026-05-09Rousseaux, Michael Esq RENEWAL55Asiya Javayant
1018Nicolas IturbideItaly2026-05-21Printing Dimensions NEW10Anna Fali
1019Julie StensethJapan2026-05-17Chapman, Ross E Esq RENEWAL52Ioni Bowcher
1020Nicolas IturbideCanada2026-05-11Buckley Miller Wright NEW96Bernardo Dominic
1021Ashley DoeFrance2026-05-31Dorl, James J Esq PROPOSAL87Stephen Shaw
1022Ivar PaprockiGermany2026-05-25King, Christopher A Esq RENEWAL16Ioni Bowcher
1023Greenwood BologniaSpain2026-05-22Commercial Press QUALIFIED96Stephen Shaw
1024Jefferson SchemmerArgentina2026-05-27Rousseaux, Michael Esq PROPOSAL18Amy Elsner
1025Nicolas IturbideSpain2026-05-18Feltz Printing Service UNQUALIFIED76Onyama Limba
1026Jefferson SchemmerFrance2026-05-24Commercial Press PROPOSAL37Anna Fali
1027Morrow RutaGermany2026-05-11Chapman, Ross E Esq UNQUALIFIED21Ioni Bowcher
1028Tony FollerFrance2026-05-21Rangoni Of Florence NEGOTIATION87Ivan Magalhaes
1029Cody SaylorsUnited Kingdom2026-05-25Dorl, James J Esq NEW35Stephen Shaw
1030Faith GillianArgentina2026-05-30Printing Dimensions QUALIFIED5Amy Elsner
1031Sinclair WaycottJapan2026-05-17Feltz Printing Service UNQUALIFIED13Ivan Magalhaes
1032Jeanfrancois VenereSpain2026-05-20Rousseaux, Michael Esq PROPOSAL71Elwin Sharvill
1033Jeanfrancois VenereAustralia2026-05-07Chemel, James L Cpa NEGOTIATION1Onyama Limba
1034Juan WieserItaly2026-05-28Chemel, James L Cpa RENEWAL9Ioni Bowcher
1035Salvatore StockhamCanada2026-05-22Truhlar And Truhlar Attys RENEWAL0Anna Fali
1036Arvin AlbaresAustralia2026-05-12Feiner Bros NEW43Xuxue Feng
1037Johnson SergiUnited Kingdom2026-05-09Chanay, Jeffrey A Esq UNQUALIFIED98Ivan Magalhaes
1038Sinclair WaycottCanada2026-05-28Chapman, Ross E Esq RENEWAL94Stephen Shaw
1039Octavia MaletJapan2026-05-22Buckley Miller Wright RENEWAL52Amy Elsner
1040Mujtaba NickaAustralia2026-05-09King, Christopher A Esq UNQUALIFIED0Onyama Limba
1041Leja CaldareraJapan2026-05-13Feltz Printing Service RENEWAL61Xuxue Feng
1042Aditya KuskoGermany2026-05-11Chapman, Ross E Esq PROPOSAL55Ivan Magalhaes
1043Chavez BriddickAustralia2026-05-22Printing Dimensions NEW60Bernardo Dominic
1044Murillo MaletRussia2026-05-26Chemel, James L Cpa QUALIFIED64Asiya Javayant
1045Mayumi KolmetzIndia2026-05-18Rangoni Of Florence PROPOSAL63Anna Fali
1046Salvatore StockhamGermany2026-05-06Rousseaux, Michael Esq NEW45Anna Fali
1047Murillo MaletRussia2026-06-03Buckley Miller Wright NEW38Xuxue Feng
1048Aika InouyeArgentina2026-05-18Feiner Bros PROPOSAL77Amy Elsner
1049Alejandro PerinArgentina2026-05-13Morlong Associates PROPOSAL22Onyama Limba
Frozen Rows
NameCountryRepresentativeStatus
Arvin AlbaresAustraliaAsiya Javayant NEGOTIATION
Julie StensethArgentinaOnyama Limba PROPOSAL
Rodrigues CampainSpainAmy Elsner NEW
Sinclair WaycottRussiaXuxue Feng UNQUALIFIED
Morrow RutaSpainStephen Shaw NEGOTIATION
Maisha RulapaughAustraliaIvan Magalhaes NEW
Aruna FigeroaJapanOnyama Limba UNQUALIFIED
Ricardo GauchoSpainIvan Magalhaes NEW
Leon OldroydUnited KingdomAmy Elsner NEGOTIATION
James ButtGermanyAmy Elsner NEW
Leja CaldareraBrazilElwin Sharvill NEGOTIATION
Antonio CaudyIndiaOnyama Limba NEGOTIATION
Nicolas IturbideJapanBernardo Dominic NEW
Alejandro PerinItalyBernardo Dominic PROPOSAL
James ButtGermanyAsiya Javayant RENEWAL
Izzy GarufiRussiaXuxue Feng UNQUALIFIED
Aditya KuskoUnited KingdomStephen Shaw RENEWAL
Murillo MaletArgentinaAsiya Javayant NEW
Costa DilliardUnited KingdomAnna Fali PROPOSAL
Leja CaldareraArgentinaElwin Sharvill RENEWAL
Leja CaldareraArgentinaElwin Sharvill QUALIFIED
David DarakjyFranceAnna Fali NEGOTIATION
James ButtAustraliaIoni Bowcher NEW
David DarakjyItalyBernardo Dominic NEW
Faith GillianJapanElwin Sharvill NEGOTIATION
Emily WhobreyItalyAsiya Javayant RENEWAL
Munro FerenczArgentinaBernardo Dominic UNQUALIFIED
Munro FerenczRussiaAnna Fali NEW
Claire TollnerIndiaBernardo Dominic UNQUALIFIED
Emily WhobreyIndiaElwin Sharvill NEW
Aika InouyeUnited KingdomStephen Shaw RENEWAL
Ivar PaprockiCanadaAmy Elsner NEGOTIATION
Isabel BowleyItalyIvan Magalhaes UNQUALIFIED
Smith GlickIndiaElwin Sharvill NEW
Antonio CaudyFranceAnna Fali NEGOTIATION
Aruna FigeroaJapanBernardo Dominic QUALIFIED
Arvin AlbaresAustraliaOnyama Limba PROPOSAL
Munro FerenczSpainAmy Elsner NEGOTIATION
Aruna FigeroaFranceAsiya Javayant UNQUALIFIED
Aika InouyeUnited KingdomIvan Magalhaes NEGOTIATION
Kadeem FlosiBrazilElwin Sharvill RENEWAL
Morrow RutaBrazilAsiya Javayant RENEWAL
Emily WhobreyItalyAmy Elsner QUALIFIED
Jeanfrancois VenereRussiaAsiya Javayant NEW
Mayumi KolmetzArgentinaElwin Sharvill NEW
Aruna FigeroaFranceStephen Shaw NEW
Alejandro PerinSpainIvan Magalhaes QUALIFIED
Isabel BowleyFranceStephen Shaw UNQUALIFIED
Jones VocelkaAustraliaAnna Fali NEW
Leon OldroydFranceXuxue Feng QUALIFIED
Frozen Columns
Name
Kadeem Flosi
Deepesh Chui
Claire Tollner
Juan Wieser
Jeanfrancois Venere
Munro Ferencz
Juan Wieser
Aditya Kusko
Stacey Maclead
Wickens Nestle
Chavez Briddick
Ashley Doe
Aruna Figeroa
Julie Stenseth
Deepesh Chui
Rodrigues Campain
Ricardo Gaucho
Arvin Albares
Chavez Briddick
Ricardo Gaucho
Julie Stenseth
Julie Stenseth
Aditya Kusko
Maria Marrier
Claire Tollner
Maria Marrier
Johnson Sergi
Greenwood Bolognia
Aruna Figeroa
Leja Caldarera
Jones Vocelka
Deepesh Chui
Mayumi Kolmetz
Clifford Rim
Tony Foller
Costa Dilliard
James Butt
Darci Poquette
Izzy Garufi
Isabel Bowley
Kaitlin Ostrosky
Adams Morasca
Leja Caldarera
Octavia Malet
Aruna Figeroa
Greenwood Bolognia
Leon Oldroyd
Kaitlin Ostrosky
Arvin Albares
Jeanfrancois Venere
IdCountryDate
1000India2026-05-30
1001Italy2026-05-08
1002Argentina2026-05-16
1003Brazil2026-05-13
1004Spain2026-05-29
1005Canada2026-05-07
1006Argentina2026-05-19
1007Japan2026-05-13
1008United Kingdom2026-05-05
1009India2026-05-12
1010Spain2026-05-10
1011Germany2026-05-27
1012Argentina2026-05-30
1013Germany2026-05-19
1014Brazil2026-05-14
1015Australia2026-05-15
1016France2026-05-24
1017India2026-05-15
1018Brazil2026-05-09
1019Argentina2026-05-25
1020United Kingdom2026-05-13
1021United Kingdom2026-05-30
1022Canada2026-06-03
1023Canada2026-05-05
1024Russia2026-05-24
1025Spain2026-05-23
1026Argentina2026-05-16
1027Australia2026-05-06
1028Japan2026-05-06
1029Japan2026-05-26
1030Spain2026-05-14
1031Italy2026-06-01
1032Russia2026-05-11
1033France2026-05-16
1034Australia2026-05-29
1035Argentina2026-05-20
1036Spain2026-05-27
1037Brazil2026-05-14
1038Italy2026-05-15
1039Canada2026-05-15
1040Brazil2026-05-31
1041Germany2026-05-15
1042Russia2026-05-18
1043India2026-05-20
1044Japan2026-05-09
1045Spain2026-05-12
1046Canada2026-05-15
1047United Kingdom2026-05-11
1048Italy2026-05-30
1049France2026-05-05

On-Demand Data

NameIdCountryDate
Ivar Paprocki1000Australia2026-05-23
Alejandro Perin1001Spain2026-05-10
Mayumi Kolmetz1002Italy2026-05-17
Costa Dilliard1003Japan2026-05-23
Leon Oldroyd1004Italy2026-05-12
Faith Gillian1005Australia2026-05-12
Salvatore Stockham1006Argentina2026-05-09
Maisha Rulapaugh1007Germany2026-05-22
Silvio Slusarski1008France2026-05-09
Octavia Malet1009Japan2026-05-10
Mayumi Kolmetz1010Spain2026-05-28
Salvatore Stockham1011Argentina2026-05-25
Julie Stenseth1012Argentina2026-05-27
Kadeem Flosi1013Italy2026-05-18
Misaki Royster1014France2026-05-11
Francesco Shinko1015Canada2026-05-21
Misaki Royster1016Australia2026-05-23
Maisha Rulapaugh1017Japan2026-05-09
Stacey Maclead1018India2026-05-13
Wickens Nestle1019Germany2026-05-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Greenwood BologniaJapanIoni Bowcher NEGOTIATION
Greenwood BologniaBrazilAmy Elsner UNQUALIFIED
Alejandro PerinIndiaAmy Elsner UNQUALIFIED
Deepesh ChuiAustraliaIvan Magalhaes RENEWAL
Octavia MaletArgentinaIoni Bowcher QUALIFIED
Julie StensethUnited KingdomXuxue Feng UNQUALIFIED
Johnson SergiBrazilAnna Fali RENEWAL
Aruna FigeroaCanadaXuxue Feng UNQUALIFIED
Morrow RutaItalyAnna Fali PROPOSAL
Alejandro PerinItalyIoni Bowcher RENEWAL
Maria MarrierJapanAmy Elsner RENEWAL
Claire TollnerCanadaAsiya Javayant RENEWAL
Aditya KuskoUnited KingdomIoni Bowcher UNQUALIFIED
David DarakjyArgentinaElwin Sharvill RENEWAL
Murillo MaletGermanyOnyama Limba NEW
Salvatore StockhamSpainStephen Shaw PROPOSAL
Julie StensethJapanStephen Shaw RENEWAL
Sinclair WaycottCanadaAsiya Javayant NEW
Nicolas IturbideBrazilIvan Magalhaes RENEWAL
Morrow RutaBrazilStephen Shaw QUALIFIED
Antonio CaudyRussiaXuxue Feng UNQUALIFIED
Juan WieserJapanIoni Bowcher RENEWAL
Izzy GarufiGermanyOnyama Limba PROPOSAL
Ivar PaprockiAustraliaOnyama Limba NEGOTIATION
Chavez BriddickRussiaAsiya Javayant PROPOSAL
Aditya KuskoGermanyAsiya Javayant PROPOSAL
Mayumi KolmetzJapanIoni Bowcher UNQUALIFIED
Claire TollnerArgentinaAnna Fali UNQUALIFIED
Ashley DoeUnited KingdomOnyama Limba UNQUALIFIED
Clifford RimArgentinaIoni Bowcher NEGOTIATION
Smith GlickGermanyAmy Elsner QUALIFIED
Antonio CaudyRussiaAnna Fali RENEWAL
Salvatore StockhamIndiaIvan Magalhaes RENEWAL
Morrow RutaUnited KingdomAsiya Javayant UNQUALIFIED
Deepesh ChuiAustraliaElwin Sharvill NEGOTIATION
Jefferson SchemmerArgentinaAnna Fali QUALIFIED
Emily WhobreyFranceBernardo Dominic NEW
Jennifer AmigonUnited KingdomStephen Shaw QUALIFIED
Maria MarrierUnited KingdomAmy Elsner NEGOTIATION
Aditya KuskoAustraliaAsiya Javayant 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>