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
Emily WhobreyFranceAnna Fali NEGOTIATION
Costa DilliardAustraliaIvan Magalhaes QUALIFIED
Aditya KuskoRussiaBernardo Dominic NEW
Jennifer AmigonCanadaElwin Sharvill RENEWAL
Stacey MacleadArgentinaOnyama Limba UNQUALIFIED
Ivar PaprockiJapanBernardo Dominic PROPOSAL
Sinclair WaycottArgentinaAnna Fali UNQUALIFIED
Leon OldroydCanadaAnna Fali PROPOSAL
Chavez BriddickGermanyAsiya Javayant PROPOSAL
Munro FerenczRussiaXuxue Feng RENEWAL
Clifford RimUnited KingdomAnna Fali RENEWAL
Wickens NestleAustraliaIoni Bowcher QUALIFIED
Silvio SlusarskiUnited KingdomElwin Sharvill RENEWAL
Ivar PaprockiIndiaXuxue Feng PROPOSAL
Murillo MaletJapanXuxue Feng UNQUALIFIED
David DarakjyArgentinaOnyama Limba RENEWAL
Greenwood BologniaCanadaAnna Fali QUALIFIED
Emily WhobreyGermanyOnyama Limba RENEWAL
Arvin AlbaresGermanyIvan Magalhaes PROPOSAL
Octavia MaletBrazilBernardo Dominic RENEWAL
Smith GlickFranceAnna Fali NEGOTIATION
David DarakjyUnited KingdomStephen Shaw QUALIFIED
Johnson SergiCanadaAsiya Javayant QUALIFIED
Silvio SlusarskiSpainElwin Sharvill NEW
Deepesh ChuiItalyIoni Bowcher RENEWAL
Ivar PaprockiJapanStephen Shaw RENEWAL
Aruna FigeroaAustraliaElwin Sharvill RENEWAL
Wickens NestleAustraliaXuxue Feng RENEWAL
Mujtaba NickaIndiaAmy Elsner RENEWAL
Antonio CaudyArgentinaBernardo Dominic NEW
Aditya KuskoItalyAmy Elsner NEGOTIATION
Clifford RimRussiaXuxue Feng RENEWAL
Stacey MacleadFranceIoni Bowcher NEGOTIATION
Izzy GarufiArgentinaXuxue Feng NEGOTIATION
Costa DilliardGermanyOnyama Limba PROPOSAL
Maisha RulapaughCanadaAmy Elsner NEGOTIATION
Izzy GarufiUnited KingdomXuxue Feng UNQUALIFIED
Jones VocelkaArgentinaOnyama Limba QUALIFIED
Nicolas IturbideRussiaBernardo Dominic PROPOSAL
Chavez BriddickUnited KingdomIoni Bowcher UNQUALIFIED
Leja CaldareraJapanBernardo Dominic NEGOTIATION
Jones VocelkaCanadaAsiya Javayant QUALIFIED
Greenwood BologniaIndiaAnna Fali RENEWAL
Mujtaba NickaFranceBernardo Dominic QUALIFIED
Darci PoquetteCanadaIvan Magalhaes NEW
Tony FollerFranceStephen Shaw RENEWAL
Ivar PaprockiSpainElwin Sharvill RENEWAL
Ivar PaprockiCanadaXuxue Feng RENEWAL
Adams MorascaUnited KingdomIvan Magalhaes RENEWAL
Ricardo GauchoJapanElwin Sharvill QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Salvatore StockhamSpainIvan Magalhaes RENEWAL
Costa DilliardSpainStephen Shaw RENEWAL
Costa DilliardCanadaBernardo Dominic RENEWAL
Munro FerenczBrazilOnyama Limba RENEWAL
Jennifer AmigonCanadaIoni Bowcher NEW
Leja CaldareraIndiaIoni Bowcher UNQUALIFIED
Izzy GarufiSpainAnna Fali UNQUALIFIED
Salvatore StockhamUnited KingdomIoni Bowcher PROPOSAL
Rodrigues CampainArgentinaIvan Magalhaes NEGOTIATION
Francesco ShinkoArgentinaAmy Elsner NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserUnited Kingdom2026-05-16Benton, John B Jr RENEWAL63Xuxue Feng
1001Leon OldroydBrazil2026-05-08Truhlar And Truhlar Attys QUALIFIED93Elwin Sharvill
1002Mayumi KolmetzItaly2026-05-12Chanay, Jeffrey A Esq NEGOTIATION60Xuxue Feng
1003Adams MorascaBrazil2026-04-24Printing Dimensions NEGOTIATION94Ivan Magalhaes
1004Darci PoquetteJapan2026-04-18Feiner Bros NEW96Stephen Shaw
1005Deepesh ChuiBrazil2026-04-30Truhlar And Truhlar Attys PROPOSAL21Onyama Limba
1006Nicolas IturbideGermany2026-05-11King, Christopher A Esq NEGOTIATION94Elwin Sharvill
1007Kaitlin OstroskyAustralia2026-05-09Commercial Press RENEWAL62Onyama Limba
1008Leja CaldareraFrance2026-04-23Truhlar And Truhlar Attys UNQUALIFIED20Elwin Sharvill
1009Francesco ShinkoGermany2026-05-16Chapman, Ross E Esq NEW91Bernardo Dominic
1010Mujtaba NickaBrazil2026-05-06Printing Dimensions QUALIFIED98Amy Elsner
1011Wickens NestleBrazil2026-05-12Chanay, Jeffrey A Esq QUALIFIED25Stephen Shaw
1012Darci PoquetteAustralia2026-05-03King, Christopher A Esq UNQUALIFIED79Asiya Javayant
1013Ivar PaprockiItaly2026-04-24Rousseaux, Michael Esq RENEWAL1Ivan Magalhaes
1014Mujtaba NickaFrance2026-05-09Benton, John B Jr QUALIFIED48Onyama Limba
1015Mayumi KolmetzCanada2026-05-06Rangoni Of Florence NEGOTIATION98Onyama Limba
1016Aika InouyeArgentina2026-05-05Feiner Bros QUALIFIED10Elwin Sharvill
1017Kaitlin OstroskySpain2026-04-25Morlong Associates NEW88Amy Elsner
1018Clifford RimArgentina2026-04-23Feltz Printing Service QUALIFIED68Onyama Limba
1019Costa DilliardJapan2026-05-12Rangoni Of Florence RENEWAL33Amy Elsner
1020Maria MarrierGermany2026-04-21Morlong Associates QUALIFIED49Amy Elsner
1021Ivar PaprockiUnited Kingdom2026-04-18Chemel, James L Cpa NEW56Elwin Sharvill
1022Emily WhobreyCanada2026-04-27Rousseaux, Michael Esq NEGOTIATION62Amy Elsner
1023Izzy GarufiCanada2026-05-01Buckley Miller Wright UNQUALIFIED91Anna Fali
1024Francesco ShinkoBrazil2026-04-27Dorl, James J Esq NEGOTIATION8Asiya Javayant
1025Maria MarrierCanada2026-04-27Benton, John B Jr RENEWAL86Asiya Javayant
1026Silvio SlusarskiCanada2026-04-27Chapman, Ross E Esq PROPOSAL17Xuxue Feng
1027Faith GillianIndia2026-04-27Chapman, Ross E Esq RENEWAL72Ivan Magalhaes
1028Murillo MaletGermany2026-05-12Truhlar And Truhlar Attys UNQUALIFIED71Bernardo Dominic
1029Silvio SlusarskiIndia2026-05-14Chemel, James L Cpa PROPOSAL2Asiya Javayant
1030Clifford RimFrance2026-04-23Rangoni Of Florence NEGOTIATION38Elwin Sharvill
1031Maisha RulapaughAustralia2026-04-26Buckley Miller Wright NEGOTIATION70Onyama Limba
1032Stacey MacleadIndia2026-05-13Chapman, Ross E Esq UNQUALIFIED5Amy Elsner
1033Arvin AlbaresBrazil2026-05-16Feltz Printing Service NEGOTIATION54Anna Fali
1034Jeanfrancois VenereRussia2026-04-26Dorl, James J Esq UNQUALIFIED25Stephen Shaw
1035Murillo MaletFrance2026-05-07Benton, John B Jr NEW48Elwin Sharvill
1036Johnson SergiGermany2026-04-19King, Christopher A Esq QUALIFIED11Anna Fali
1037Chavez BriddickCanada2026-04-26Benton, John B Jr NEGOTIATION25Asiya Javayant
1038Jeanfrancois VenereUnited Kingdom2026-05-16Morlong Associates NEGOTIATION25Xuxue Feng
1039Jones VocelkaRussia2026-05-14Rangoni Of Florence QUALIFIED18Stephen Shaw
1040Jeanfrancois VenereUnited Kingdom2026-04-17Benton, John B Jr UNQUALIFIED25Asiya Javayant
1041Jennifer AmigonGermany2026-04-22Rangoni Of Florence PROPOSAL84Stephen Shaw
1042Munro FerenczItaly2026-04-29Chemel, James L Cpa QUALIFIED27Asiya Javayant
1043Aruna FigeroaBrazil2026-05-11Chemel, James L Cpa NEW73Asiya Javayant
1044Tony FollerGermany2026-05-09Dorl, James J Esq RENEWAL35Amy Elsner
1045Maria MarrierItaly2026-04-17Dorl, James J Esq RENEWAL80Elwin Sharvill
1046Jones VocelkaIndia2026-05-02Rangoni Of Florence NEW37Onyama Limba
1047Aika InouyeAustralia2026-04-19Benton, John B Jr NEW30Anna Fali
1048Ivar PaprockiCanada2026-05-06Chapman, Ross E Esq PROPOSAL73Xuxue Feng
1049Faith GillianSpain2026-04-20Truhlar And Truhlar Attys NEGOTIATION10Anna Fali
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinFranceAnna Fali NEW
Isabel BowleyUnited KingdomAsiya Javayant PROPOSAL
Mayumi KolmetzFranceIvan Magalhaes NEW
Aika InouyeGermanyAsiya Javayant NEGOTIATION
Nicolas IturbideArgentinaAmy Elsner UNQUALIFIED
David DarakjyJapanAmy Elsner UNQUALIFIED
Greenwood BologniaIndiaIvan Magalhaes PROPOSAL
Mujtaba NickaCanadaIoni Bowcher NEGOTIATION
Adams MorascaGermanyAmy Elsner UNQUALIFIED
Julie StensethCanadaXuxue Feng NEW
Misaki RoysterUnited KingdomAnna Fali UNQUALIFIED
Jones VocelkaIndiaAmy Elsner UNQUALIFIED
Ivar PaprockiIndiaStephen Shaw NEGOTIATION
Johnson SergiUnited KingdomStephen Shaw RENEWAL
Kadeem FlosiRussiaIoni Bowcher UNQUALIFIED
Kadeem FlosiIndiaStephen Shaw NEGOTIATION
Aika InouyeSpainStephen Shaw UNQUALIFIED
Morrow RutaBrazilStephen Shaw NEGOTIATION
Jennifer AmigonArgentinaXuxue Feng NEW
Sinclair WaycottCanadaAmy Elsner PROPOSAL
Deepesh ChuiSpainStephen Shaw NEW
Smith GlickIndiaIoni Bowcher RENEWAL
Jennifer AmigonAustraliaXuxue Feng NEW
Silvio SlusarskiIndiaIoni Bowcher PROPOSAL
Salvatore StockhamJapanElwin Sharvill NEW
Kadeem FlosiGermanyIvan Magalhaes PROPOSAL
Clifford RimArgentinaIvan Magalhaes UNQUALIFIED
Salvatore StockhamBrazilXuxue Feng NEW
Antonio CaudyArgentinaAnna Fali NEGOTIATION
David DarakjyBrazilStephen Shaw QUALIFIED
Emily WhobreyJapanAsiya Javayant NEGOTIATION
Antonio CaudyBrazilBernardo Dominic PROPOSAL
Aika InouyeUnited KingdomAsiya Javayant NEGOTIATION
Mujtaba NickaFranceOnyama Limba UNQUALIFIED
Emily WhobreyIndiaElwin Sharvill RENEWAL
Clifford RimCanadaAmy Elsner QUALIFIED
Claire TollnerItalyElwin Sharvill PROPOSAL
James ButtIndiaOnyama Limba QUALIFIED
Kaitlin OstroskyJapanElwin Sharvill QUALIFIED
Greenwood BologniaItalyAnna Fali QUALIFIED
Stacey MacleadSpainAnna Fali RENEWAL
Jefferson SchemmerArgentinaStephen Shaw QUALIFIED
Mayumi KolmetzRussiaStephen Shaw UNQUALIFIED
Antonio CaudySpainAsiya Javayant NEW
Misaki RoysterUnited KingdomAnna Fali QUALIFIED
Alejandro PerinUnited KingdomBernardo Dominic NEW
Misaki RoysterAustraliaIoni Bowcher NEW
Francesco ShinkoJapanBernardo Dominic NEGOTIATION
Kadeem FlosiGermanyAnna Fali NEGOTIATION
Wickens NestleArgentinaXuxue Feng NEW
Frozen Columns
Name
Deepesh Chui
Mayumi Kolmetz
Costa Dilliard
Maria Marrier
Antonio Caudy
Stacey Maclead
Emily Whobrey
Faith Gillian
Darci Poquette
Johnson Sergi
Deepesh Chui
Ricardo Gaucho
Nicolas Iturbide
Jefferson Schemmer
Chavez Briddick
Isabel Bowley
Salvatore Stockham
Murillo Malet
Antonio Caudy
Francesco Shinko
Emily Whobrey
Alejandro Perin
Nicolas Iturbide
Nicolas Iturbide
Tony Foller
Jones Vocelka
Ivar Paprocki
Sinclair Waycott
Arvin Albares
Francesco Shinko
Silvio Slusarski
Mujtaba Nicka
Ashley Doe
Octavia Malet
Tony Foller
Kadeem Flosi
Arvin Albares
Jennifer Amigon
Alejandro Perin
Rodrigues Campain
Greenwood Bolognia
Costa Dilliard
Sinclair Waycott
Sinclair Waycott
Leon Oldroyd
Mujtaba Nicka
Smith Glick
Munro Ferencz
Nicolas Iturbide
Maisha Rulapaugh
IdCountryDate
1000Australia2026-04-17
1001Italy2026-05-06
1002Canada2026-04-24
1003Germany2026-05-11
1004Argentina2026-05-03
1005India2026-04-28
1006United Kingdom2026-04-29
1007Brazil2026-04-27
1008France2026-05-02
1009Spain2026-04-21
1010Australia2026-05-05
1011Spain2026-05-05
1012Brazil2026-05-08
1013Argentina2026-04-23
1014Canada2026-05-05
1015Australia2026-04-22
1016Germany2026-05-01
1017Brazil2026-04-28
1018Italy2026-05-03
1019Brazil2026-05-05
1020Italy2026-05-03
1021Spain2026-04-23
1022Spain2026-04-26
1023India2026-05-10
1024Russia2026-05-10
1025India2026-04-29
1026France2026-04-21
1027France2026-05-05
1028Spain2026-04-30
1029Germany2026-05-05
1030Russia2026-05-14
1031Germany2026-05-16
1032Italy2026-05-13
1033Germany2026-04-19
1034Brazil2026-05-07
1035India2026-04-22
1036Canada2026-04-18
1037Argentina2026-04-22
1038India2026-05-02
1039Australia2026-04-22
1040Argentina2026-04-28
1041Argentina2026-04-25
1042Italy2026-04-28
1043Australia2026-04-17
1044France2026-05-04
1045Italy2026-05-02
1046Brazil2026-05-11
1047India2026-05-03
1048Germany2026-05-15
1049India2026-04-25

On-Demand Data

NameIdCountryDate
Leon Oldroyd1000Argentina2026-04-23
Cody Saylors1001Spain2026-04-21
Johnson Sergi1002Australia2026-05-15
Isabel Bowley1003Brazil2026-05-10
Stacey Maclead1004Spain2026-05-09
Maria Marrier1005Japan2026-04-22
Aruna Figeroa1006Russia2026-05-06
Chavez Briddick1007India2026-04-18
Clifford Rim1008Japan2026-05-11
Jeanfrancois Venere1009Australia2026-05-01
Ashley Doe1010Russia2026-04-22
Jeanfrancois Venere1011Russia2026-04-22
Arvin Albares1012United Kingdom2026-05-10
Mujtaba Nicka1013Canada2026-04-23
Costa Dilliard1014United Kingdom2026-04-19
Johnson Sergi1015United Kingdom2026-05-10
Kadeem Flosi1016Argentina2026-04-28
Tony Foller1017Germany2026-04-20
Smith Glick1018Spain2026-05-03
Rodrigues Campain1019Germany2026-05-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James ButtItalyStephen Shaw NEW
Jennifer AmigonSpainXuxue Feng UNQUALIFIED
Johnson SergiJapanStephen Shaw RENEWAL
Sinclair WaycottBrazilIoni Bowcher NEW
Kadeem FlosiIndiaAmy Elsner NEW
Antonio CaudyCanadaAmy Elsner RENEWAL
Mujtaba NickaSpainElwin Sharvill NEGOTIATION
Isabel BowleyUnited KingdomIoni Bowcher NEGOTIATION
Aruna FigeroaUnited KingdomAnna Fali QUALIFIED
Leon OldroydItalyOnyama Limba QUALIFIED
Claire TollnerAustraliaAmy Elsner UNQUALIFIED
Jefferson SchemmerArgentinaIoni Bowcher UNQUALIFIED
Leja CaldareraCanadaXuxue Feng NEGOTIATION
Tony FollerAustraliaAnna Fali QUALIFIED
Ashley DoeFranceOnyama Limba UNQUALIFIED
Aditya KuskoItalyAsiya Javayant PROPOSAL
Smith GlickGermanyAsiya Javayant QUALIFIED
Isabel BowleyFranceElwin Sharvill NEW
Clifford RimBrazilAmy Elsner UNQUALIFIED
Ricardo GauchoCanadaXuxue Feng UNQUALIFIED
Claire TollnerBrazilIoni Bowcher NEGOTIATION
Arvin AlbaresRussiaAsiya Javayant NEW
Misaki RoysterArgentinaAmy Elsner NEGOTIATION
Wickens NestleSpainAnna Fali PROPOSAL
Tony FollerArgentinaIvan Magalhaes RENEWAL
Octavia MaletIndiaAmy Elsner RENEWAL
Antonio CaudyJapanAsiya Javayant UNQUALIFIED
Sinclair WaycottIndiaIoni Bowcher RENEWAL
Munro FerenczIndiaStephen Shaw UNQUALIFIED
Adams MorascaIndiaAmy Elsner QUALIFIED
Murillo MaletIndiaStephen Shaw QUALIFIED
Ashley DoeRussiaXuxue Feng RENEWAL
Clifford RimRussiaXuxue Feng RENEWAL
Emily WhobreyFranceAsiya Javayant NEGOTIATION
Sinclair WaycottCanadaOnyama Limba UNQUALIFIED
Jones VocelkaFranceElwin Sharvill PROPOSAL
Chavez BriddickIndiaXuxue Feng UNQUALIFIED
Kaitlin OstroskyRussiaElwin Sharvill UNQUALIFIED
Jeanfrancois VenereCanadaAnna Fali PROPOSAL
Jeanfrancois VenereArgentinaXuxue Feng 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>