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
Ivar PaprockiItalyOnyama Limba NEW
Johnson SergiGermanyOnyama Limba NEGOTIATION
Claire TollnerAustraliaElwin Sharvill RENEWAL
Leja CaldareraGermanyIoni Bowcher UNQUALIFIED
Ashley DoeGermanyIvan Magalhaes NEW
Kaitlin OstroskyFranceBernardo Dominic RENEWAL
Clifford RimItalyAnna Fali PROPOSAL
Misaki RoysterIndiaBernardo Dominic PROPOSAL
Chavez BriddickArgentinaIoni Bowcher QUALIFIED
Darci PoquetteRussiaAnna Fali RENEWAL
Leon OldroydIndiaStephen Shaw NEGOTIATION
Arvin AlbaresSpainBernardo Dominic NEGOTIATION
Sinclair WaycottJapanAsiya Javayant RENEWAL
Claire TollnerJapanXuxue Feng NEW
Octavia MaletFranceXuxue Feng NEW
Silvio SlusarskiBrazilAnna Fali PROPOSAL
Rodrigues CampainItalyBernardo Dominic PROPOSAL
Silvio SlusarskiSpainAmy Elsner NEW
James ButtJapanBernardo Dominic NEW
Sinclair WaycottArgentinaOnyama Limba NEW
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
Francesco ShinkoArgentinaIvan Magalhaes NEW
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Maria MarrierGermanyAmy Elsner RENEWAL
Munro FerenczJapanXuxue Feng PROPOSAL
Adams MorascaFranceAnna Fali UNQUALIFIED
Murillo MaletCanadaOnyama Limba RENEWAL
David DarakjyGermanyAmy Elsner NEW
Kadeem FlosiGermanyIoni Bowcher NEGOTIATION
Maisha RulapaughGermanyXuxue Feng UNQUALIFIED
Ricardo GauchoSpainStephen Shaw NEW
Jeanfrancois VenereIndiaXuxue Feng QUALIFIED
Cody SaylorsCanadaStephen Shaw RENEWAL
Smith GlickGermanyXuxue Feng NEGOTIATION
Kadeem FlosiItalyElwin Sharvill NEGOTIATION
Aditya KuskoItalyIvan Magalhaes QUALIFIED
Misaki RoysterItalyIvan Magalhaes UNQUALIFIED
Deepesh ChuiCanadaAnna Fali UNQUALIFIED
Jones VocelkaFranceAsiya Javayant NEW
Faith GillianFranceIvan Magalhaes NEGOTIATION
Cody SaylorsUnited KingdomBernardo Dominic PROPOSAL
Murillo MaletRussiaBernardo Dominic PROPOSAL
Morrow RutaUnited KingdomXuxue Feng QUALIFIED
Cody SaylorsUnited KingdomIvan Magalhaes RENEWAL
Chavez BriddickGermanyAmy Elsner UNQUALIFIED
Greenwood BologniaArgentinaIoni Bowcher QUALIFIED
Johnson SergiJapanIoni Bowcher UNQUALIFIED
Nicolas IturbideCanadaAmy Elsner NEGOTIATION
Aditya KuskoIndiaAnna Fali PROPOSAL
Kadeem FlosiAustraliaOnyama Limba NEW
Horizontal
NameCountryRepresentativeStatus
Mujtaba NickaItalyAsiya Javayant PROPOSAL
Aditya KuskoJapanIvan Magalhaes QUALIFIED
Aruna FigeroaGermanyXuxue Feng NEW
Jefferson SchemmerSpainStephen Shaw UNQUALIFIED
Aditya KuskoIndiaAsiya Javayant NEW
Munro FerenczItalyXuxue Feng NEGOTIATION
Johnson SergiCanadaBernardo Dominic NEGOTIATION
Morrow RutaItalyAnna Fali NEW
Mayumi KolmetzGermanyAmy Elsner NEGOTIATION
Rodrigues CampainRussiaElwin Sharvill NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aditya KuskoFrance2026-05-14Morlong Associates UNQUALIFIED33Ivan Magalhaes
1001Adams MorascaUnited Kingdom2026-04-28Rangoni Of Florence PROPOSAL31Asiya Javayant
1002Kadeem FlosiGermany2026-05-01Dorl, James J Esq RENEWAL49Ioni Bowcher
1003Misaki RoysterBrazil2026-05-15Feiner Bros UNQUALIFIED51Bernardo Dominic
1004Arvin AlbaresIndia2026-05-18Printing Dimensions NEW61Amy Elsner
1005Emily WhobreyBrazil2026-04-30Rangoni Of Florence PROPOSAL43Amy Elsner
1006Isabel BowleyArgentina2026-05-11Dorl, James J Esq PROPOSAL9Bernardo Dominic
1007Tony FollerAustralia2026-04-30Feltz Printing Service QUALIFIED81Onyama Limba
1008Ricardo GauchoIndia2026-04-27Dorl, James J Esq NEGOTIATION93Onyama Limba
1009Cody SaylorsRussia2026-05-11Feltz Printing Service NEW12Onyama Limba
1010Adams MorascaIndia2026-05-04Chapman, Ross E Esq PROPOSAL22Asiya Javayant
1011Darci PoquetteIndia2026-05-11King, Christopher A Esq NEGOTIATION38Amy Elsner
1012Chavez BriddickRussia2026-05-08Chapman, Ross E Esq RENEWAL13Amy Elsner
1013Alejandro PerinBrazil2026-04-29Feltz Printing Service UNQUALIFIED53Elwin Sharvill
1014Silvio SlusarskiFrance2026-05-04Rangoni Of Florence PROPOSAL22Ivan Magalhaes
1015Adams MorascaIndia2026-05-06Buckley Miller Wright NEW62Ioni Bowcher
1016Claire TollnerAustralia2026-05-19Feiner Bros RENEWAL89Onyama Limba
1017Murillo MaletArgentina2026-05-05Feiner Bros NEGOTIATION96Asiya Javayant
1018Nicolas IturbideBrazil2026-05-16Printing Dimensions NEW78Stephen Shaw
1019Smith GlickJapan2026-04-25Rousseaux, Michael Esq PROPOSAL68Asiya Javayant
1020Juan WieserBrazil2026-04-22Chanay, Jeffrey A Esq RENEWAL96Anna Fali
1021Julie StensethSpain2026-04-24Feltz Printing Service PROPOSAL33Xuxue Feng
1022Tony FollerUnited Kingdom2026-05-15Rangoni Of Florence UNQUALIFIED0Onyama Limba
1023Johnson SergiArgentina2026-05-13Dorl, James J Esq RENEWAL0Onyama Limba
1024Sinclair WaycottItaly2026-04-22Rousseaux, Michael Esq UNQUALIFIED78Ivan Magalhaes
1025Isabel BowleyFrance2026-05-20Feiner Bros NEGOTIATION69Anna Fali
1026Stacey MacleadUnited Kingdom2026-04-23Truhlar And Truhlar Attys NEGOTIATION32Ivan Magalhaes
1027Octavia MaletAustralia2026-04-28Feltz Printing Service PROPOSAL45Asiya Javayant
1028Cody SaylorsIndia2026-04-27Buckley Miller Wright PROPOSAL96Stephen Shaw
1029Ricardo GauchoJapan2026-04-30Printing Dimensions PROPOSAL28Amy Elsner
1030Clifford RimCanada2026-05-19Chanay, Jeffrey A Esq UNQUALIFIED98Onyama Limba
1031Jefferson SchemmerCanada2026-04-25Dorl, James J Esq NEW13Ioni Bowcher
1032Kaitlin OstroskyUnited Kingdom2026-05-09Rangoni Of Florence RENEWAL69Anna Fali
1033Clifford RimGermany2026-05-10Dorl, James J Esq NEGOTIATION96Bernardo Dominic
1034Aika InouyeRussia2026-05-10Printing Dimensions NEW24Elwin Sharvill
1035Misaki RoysterIndia2026-05-05Commercial Press QUALIFIED72Elwin Sharvill
1036Rodrigues CampainUnited Kingdom2026-05-15Chapman, Ross E Esq RENEWAL45Anna Fali
1037Salvatore StockhamBrazil2026-04-23Rangoni Of Florence PROPOSAL26Onyama Limba
1038Misaki RoysterCanada2026-04-26Chapman, Ross E Esq NEW53Amy Elsner
1039Alejandro PerinItaly2026-05-07King, Christopher A Esq NEW94Onyama Limba
1040Maria MarrierBrazil2026-05-05Chemel, James L Cpa RENEWAL88Asiya Javayant
1041Kaitlin OstroskySpain2026-05-05Chapman, Ross E Esq PROPOSAL46Elwin Sharvill
1042Emily WhobreyGermany2026-05-05Morlong Associates NEW44Onyama Limba
1043Ricardo GauchoGermany2026-05-20Chanay, Jeffrey A Esq QUALIFIED79Bernardo Dominic
1044Costa DilliardJapan2026-04-23Buckley Miller Wright UNQUALIFIED5Xuxue Feng
1045Aditya KuskoGermany2026-05-06Printing Dimensions NEGOTIATION54Ioni Bowcher
1046Silvio SlusarskiUnited Kingdom2026-05-05Benton, John B Jr NEGOTIATION37Stephen Shaw
1047Jefferson SchemmerRussia2026-05-21Chemel, James L Cpa QUALIFIED88Ivan Magalhaes
1048Claire TollnerGermany2026-05-02Buckley Miller Wright NEW8Ioni Bowcher
1049Greenwood BologniaJapan2026-05-09Printing Dimensions NEGOTIATION65Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Greenwood BologniaUnited KingdomAnna Fali RENEWAL
Octavia MaletSpainBernardo Dominic RENEWAL
James ButtItalyAnna Fali PROPOSAL
Tony FollerSpainAnna Fali UNQUALIFIED
Alejandro PerinJapanBernardo Dominic NEW
Juan WieserFranceAmy Elsner RENEWAL
Mujtaba NickaAustraliaOnyama Limba NEW
Sinclair WaycottJapanElwin Sharvill NEGOTIATION
Ivar PaprockiFranceAnna Fali PROPOSAL
Salvatore StockhamItalyXuxue Feng NEGOTIATION
Jefferson SchemmerSpainElwin Sharvill NEW
Leon OldroydItalyAsiya Javayant RENEWAL
Costa DilliardArgentinaElwin Sharvill RENEWAL
Francesco ShinkoCanadaXuxue Feng PROPOSAL
Munro FerenczGermanyIvan Magalhaes QUALIFIED
Jeanfrancois VenereBrazilXuxue Feng UNQUALIFIED
Clifford RimJapanAmy Elsner UNQUALIFIED
Aruna FigeroaCanadaXuxue Feng NEGOTIATION
Aruna FigeroaItalyIvan Magalhaes PROPOSAL
Leon OldroydIndiaAmy Elsner UNQUALIFIED
Darci PoquetteUnited KingdomOnyama Limba NEGOTIATION
Francesco ShinkoCanadaStephen Shaw RENEWAL
Nicolas IturbideItalyAmy Elsner NEW
Kaitlin OstroskyUnited KingdomIoni Bowcher UNQUALIFIED
Smith GlickBrazilStephen Shaw NEGOTIATION
Adams MorascaAustraliaElwin Sharvill PROPOSAL
Emily WhobreyUnited KingdomOnyama Limba NEGOTIATION
Jefferson SchemmerIndiaBernardo Dominic UNQUALIFIED
Deepesh ChuiAustraliaStephen Shaw NEGOTIATION
Sinclair WaycottCanadaStephen Shaw RENEWAL
Isabel BowleyUnited KingdomElwin Sharvill NEW
Stacey MacleadJapanElwin Sharvill PROPOSAL
Ivar PaprockiIndiaOnyama Limba NEW
Emily WhobreyArgentinaAnna Fali RENEWAL
Murillo MaletIndiaBernardo Dominic QUALIFIED
Chavez BriddickItalyIoni Bowcher UNQUALIFIED
Nicolas IturbideArgentinaElwin Sharvill PROPOSAL
Cody SaylorsGermanyBernardo Dominic PROPOSAL
Alejandro PerinArgentinaAsiya Javayant RENEWAL
Leon OldroydAustraliaStephen Shaw NEW
Wickens NestleGermanyAmy Elsner NEW
Ricardo GauchoItalyOnyama Limba QUALIFIED
Octavia MaletItalyAmy Elsner RENEWAL
Ivar PaprockiCanadaAsiya Javayant NEGOTIATION
Cody SaylorsAustraliaXuxue Feng NEGOTIATION
Stacey MacleadJapanAnna Fali QUALIFIED
Johnson SergiAustraliaElwin Sharvill NEGOTIATION
Emily WhobreyFranceIvan Magalhaes UNQUALIFIED
Kaitlin OstroskyArgentinaOnyama Limba NEGOTIATION
James ButtCanadaStephen Shaw QUALIFIED
Frozen Columns
Name
David Darakjy
Aruna Figeroa
Cody Saylors
Munro Ferencz
Chavez Briddick
Kadeem Flosi
Murillo Malet
Francesco Shinko
Deepesh Chui
James Butt
Tony Foller
James Butt
Aditya Kusko
Mayumi Kolmetz
Salvatore Stockham
Claire Tollner
Costa Dilliard
Costa Dilliard
Francesco Shinko
Greenwood Bolognia
Mujtaba Nicka
Sinclair Waycott
Mayumi Kolmetz
Mujtaba Nicka
Julie Stenseth
Smith Glick
Kaitlin Ostrosky
Maisha Rulapaugh
Smith Glick
Jones Vocelka
Morrow Ruta
Salvatore Stockham
Smith Glick
Izzy Garufi
Alejandro Perin
Juan Wieser
Kadeem Flosi
Smith Glick
Jennifer Amigon
Jones Vocelka
Claire Tollner
Silvio Slusarski
Claire Tollner
Stacey Maclead
Jeanfrancois Venere
James Butt
Isabel Bowley
Emily Whobrey
Rodrigues Campain
Mayumi Kolmetz
IdCountryDate
1000Argentina2026-05-07
1001United Kingdom2026-05-11
1002India2026-05-14
1003France2026-05-20
1004Russia2026-05-08
1005United Kingdom2026-05-20
1006Japan2026-04-23
1007Spain2026-05-17
1008Spain2026-04-22
1009Canada2026-04-30
1010Brazil2026-05-12
1011Japan2026-05-05
1012Italy2026-05-09
1013Russia2026-04-29
1014United Kingdom2026-05-11
1015Brazil2026-04-23
1016Argentina2026-05-10
1017United Kingdom2026-04-27
1018Australia2026-04-25
1019Brazil2026-05-01
1020Italy2026-05-13
1021Germany2026-05-03
1022Australia2026-05-17
1023Australia2026-05-06
1024Russia2026-04-22
1025Canada2026-05-01
1026Russia2026-05-03
1027Argentina2026-04-28
1028France2026-05-01
1029Spain2026-05-20
1030United Kingdom2026-05-08
1031Australia2026-05-08
1032Australia2026-05-09
1033Japan2026-05-02
1034Russia2026-05-20
1035France2026-04-25
1036India2026-05-20
1037Russia2026-05-13
1038Brazil2026-05-01
1039United Kingdom2026-05-07
1040Argentina2026-05-13
1041Germany2026-05-04
1042Australia2026-04-26
1043Italy2026-04-28
1044Australia2026-05-14
1045United Kingdom2026-05-10
1046India2026-05-14
1047Canada2026-05-02
1048Japan2026-05-10
1049Australia2026-05-06

On-Demand Data

NameIdCountryDate
Greenwood Bolognia1000Australia2026-05-04
Arvin Albares1001Germany2026-04-23
Morrow Ruta1002Canada2026-04-22
Chavez Briddick1003France2026-05-13
Clifford Rim1004Germany2026-05-04
Ivar Paprocki1005Canada2026-05-17
Silvio Slusarski1006Italy2026-04-28
Francesco Shinko1007Canada2026-05-21
Ivar Paprocki1008Spain2026-04-28
Ashley Doe1009Italy2026-05-15
Aika Inouye1010Brazil2026-04-26
Maria Marrier1011Russia2026-04-27
Arvin Albares1012Spain2026-05-04
Emily Whobrey1013Russia2026-04-30
Alejandro Perin1014Argentina2026-05-15
Kadeem Flosi1015Japan2026-04-29
Arvin Albares1016France2026-05-02
Maisha Rulapaugh1017United Kingdom2026-04-27
Clifford Rim1018Brazil2026-05-21
Aika Inouye1019France2026-05-11
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Antonio CaudyFranceIoni Bowcher QUALIFIED
Tony FollerSpainIvan Magalhaes NEW
Leja CaldareraCanadaAmy Elsner PROPOSAL
Nicolas IturbideRussiaStephen Shaw UNQUALIFIED
Jennifer AmigonBrazilStephen Shaw UNQUALIFIED
Arvin AlbaresRussiaXuxue Feng RENEWAL
Francesco ShinkoRussiaStephen Shaw PROPOSAL
Rodrigues CampainGermanyOnyama Limba PROPOSAL
Claire TollnerAustraliaXuxue Feng UNQUALIFIED
Julie StensethBrazilIvan Magalhaes NEW
Mayumi KolmetzItalyElwin Sharvill QUALIFIED
Ricardo GauchoGermanyXuxue Feng QUALIFIED
Jeanfrancois VenereJapanElwin Sharvill UNQUALIFIED
Mayumi KolmetzUnited KingdomIoni Bowcher PROPOSAL
Leja CaldareraGermanyStephen Shaw PROPOSAL
Leon OldroydFranceIoni Bowcher NEGOTIATION
Silvio SlusarskiAustraliaIoni Bowcher QUALIFIED
Johnson SergiGermanyIvan Magalhaes UNQUALIFIED
James ButtItalyAnna Fali NEGOTIATION
Arvin AlbaresUnited KingdomAnna Fali NEW
Murillo MaletBrazilAsiya Javayant NEGOTIATION
David DarakjyRussiaAsiya Javayant NEGOTIATION
Faith GillianIndiaBernardo Dominic NEGOTIATION
Francesco ShinkoAustraliaAmy Elsner QUALIFIED
Johnson SergiRussiaAsiya Javayant NEW
Aruna FigeroaJapanIvan Magalhaes NEGOTIATION
Mujtaba NickaUnited KingdomAnna Fali UNQUALIFIED
Jeanfrancois VenereRussiaStephen Shaw PROPOSAL
Jefferson SchemmerJapanAnna Fali UNQUALIFIED
Claire TollnerRussiaElwin Sharvill RENEWAL
Rodrigues CampainSpainOnyama Limba NEW
Arvin AlbaresFranceBernardo Dominic NEGOTIATION
Wickens NestleFranceIoni Bowcher PROPOSAL
David DarakjyIndiaIoni Bowcher NEGOTIATION
Clifford RimUnited KingdomAnna Fali NEW
Deepesh ChuiRussiaOnyama Limba UNQUALIFIED
Aruna FigeroaSpainAsiya Javayant PROPOSAL
Juan WieserBrazilIvan Magalhaes QUALIFIED
Emily WhobreySpainXuxue Feng NEGOTIATION
Leja CaldareraJapanXuxue Feng 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>