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
Smith GlickRussiaBernardo Dominic PROPOSAL
Julie StensethSpainStephen Shaw RENEWAL
David DarakjySpainXuxue Feng RENEWAL
James ButtUnited KingdomAsiya Javayant NEGOTIATION
Aruna FigeroaJapanAmy Elsner QUALIFIED
Adams MorascaCanadaOnyama Limba QUALIFIED
Wickens NestleBrazilXuxue Feng UNQUALIFIED
Octavia MaletGermanyXuxue Feng QUALIFIED
Silvio SlusarskiIndiaIoni Bowcher NEW
Leon OldroydItalyOnyama Limba QUALIFIED
Murillo MaletItalyElwin Sharvill RENEWAL
Aruna FigeroaBrazilElwin Sharvill RENEWAL
Rodrigues CampainIndiaXuxue Feng NEGOTIATION
Nicolas IturbideItalyOnyama Limba QUALIFIED
Morrow RutaCanadaIoni Bowcher RENEWAL
Rodrigues CampainCanadaAnna Fali UNQUALIFIED
Rodrigues CampainUnited KingdomStephen Shaw RENEWAL
David DarakjyGermanyAnna Fali PROPOSAL
Aika InouyeAustraliaAnna Fali QUALIFIED
Morrow RutaAustraliaStephen Shaw PROPOSAL
Emily WhobreyJapanAmy Elsner NEGOTIATION
Ivar PaprockiItalyIoni Bowcher NEGOTIATION
Arvin AlbaresFranceXuxue Feng PROPOSAL
Aditya KuskoUnited KingdomStephen Shaw UNQUALIFIED
Darci PoquetteSpainAsiya Javayant RENEWAL
Ashley DoeIndiaXuxue Feng PROPOSAL
Aika InouyeUnited KingdomXuxue Feng QUALIFIED
James ButtAustraliaAsiya Javayant QUALIFIED
Aruna FigeroaFranceIvan Magalhaes PROPOSAL
Murillo MaletJapanElwin Sharvill UNQUALIFIED
Arvin AlbaresRussiaIvan Magalhaes NEW
Costa DilliardFranceAnna Fali UNQUALIFIED
Tony FollerItalyXuxue Feng PROPOSAL
Faith GillianSpainAnna Fali NEGOTIATION
Johnson SergiJapanBernardo Dominic QUALIFIED
Murillo MaletJapanIvan Magalhaes NEW
Tony FollerIndiaOnyama Limba QUALIFIED
Faith GillianBrazilAmy Elsner QUALIFIED
Costa DilliardItalyAsiya Javayant QUALIFIED
Ricardo GauchoArgentinaElwin Sharvill PROPOSAL
Jones VocelkaBrazilIvan Magalhaes NEGOTIATION
Murillo MaletIndiaIvan Magalhaes QUALIFIED
Costa DilliardUnited KingdomAsiya Javayant PROPOSAL
Kaitlin OstroskyUnited KingdomIvan Magalhaes RENEWAL
Isabel BowleyRussiaStephen Shaw RENEWAL
Munro FerenczGermanyStephen Shaw QUALIFIED
Leon OldroydCanadaIvan Magalhaes NEW
Kaitlin OstroskySpainBernardo Dominic UNQUALIFIED
Claire TollnerFranceStephen Shaw RENEWAL
Murillo MaletJapanOnyama Limba RENEWAL
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyItalyAmy Elsner QUALIFIED
Costa DilliardAustraliaAsiya Javayant UNQUALIFIED
Ashley DoeRussiaIvan Magalhaes UNQUALIFIED
Isabel BowleyJapanBernardo Dominic UNQUALIFIED
Ivar PaprockiFranceOnyama Limba RENEWAL
Faith GillianSpainIoni Bowcher NEGOTIATION
Smith GlickArgentinaIoni Bowcher QUALIFIED
Silvio SlusarskiSpainStephen Shaw NEGOTIATION
Rodrigues CampainCanadaAsiya Javayant RENEWAL
Sinclair WaycottRussiaStephen Shaw NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Alejandro PerinRussia2026-05-04King, Christopher A Esq PROPOSAL77Elwin Sharvill
1001Costa DilliardUnited Kingdom2026-05-29Printing Dimensions UNQUALIFIED8Amy Elsner
1002Isabel BowleyAustralia2026-05-26Chemel, James L Cpa QUALIFIED23Bernardo Dominic
1003Izzy GarufiGermany2026-05-26Benton, John B Jr QUALIFIED82Ivan Magalhaes
1004Kadeem FlosiBrazil2026-05-08Rangoni Of Florence QUALIFIED16Elwin Sharvill
1005Octavia MaletIndia2026-05-23Benton, John B Jr PROPOSAL39Anna Fali
1006Munro FerenczBrazil2026-05-26King, Christopher A Esq QUALIFIED74Elwin Sharvill
1007Arvin AlbaresJapan2026-05-07Benton, John B Jr UNQUALIFIED59Onyama Limba
1008Smith GlickFrance2026-05-30Buckley Miller Wright NEGOTIATION98Amy Elsner
1009Wickens NestleGermany2026-05-20Buckley Miller Wright QUALIFIED28Ivan Magalhaes
1010Aruna FigeroaIndia2026-05-21Chanay, Jeffrey A Esq NEW69Stephen Shaw
1011Munro FerenczGermany2026-05-28Rangoni Of Florence NEW82Elwin Sharvill
1012Adams MorascaCanada2026-05-08Rangoni Of Florence UNQUALIFIED26Amy Elsner
1013Sinclair WaycottGermany2026-05-12Printing Dimensions QUALIFIED16Anna Fali
1014Mujtaba NickaArgentina2026-05-11Dorl, James J Esq PROPOSAL74Anna Fali
1015Arvin AlbaresArgentina2026-05-11Chemel, James L Cpa RENEWAL29Asiya Javayant
1016Alejandro PerinCanada2026-05-06Benton, John B Jr RENEWAL74Stephen Shaw
1017Jeanfrancois VenereJapan2026-05-15Truhlar And Truhlar Attys QUALIFIED67Anna Fali
1018Isabel BowleyBrazil2026-05-18Commercial Press NEW91Amy Elsner
1019Jefferson SchemmerArgentina2026-05-05Truhlar And Truhlar Attys NEGOTIATION17Amy Elsner
1020Munro FerenczFrance2026-05-27Benton, John B Jr NEGOTIATION74Bernardo Dominic
1021Smith GlickItaly2026-05-17Feiner Bros NEW15Ivan Magalhaes
1022Arvin AlbaresIndia2026-05-24Rangoni Of Florence QUALIFIED7Amy Elsner
1023Claire TollnerSpain2026-05-16Chanay, Jeffrey A Esq QUALIFIED0Asiya Javayant
1024Murillo MaletArgentina2026-05-16Feiner Bros NEGOTIATION51Onyama Limba
1025Misaki RoysterAustralia2026-05-22Commercial Press PROPOSAL56Elwin Sharvill
1026Nicolas IturbideRussia2026-05-25Chanay, Jeffrey A Esq PROPOSAL65Ivan Magalhaes
1027Deepesh ChuiFrance2026-05-05Feiner Bros NEGOTIATION25Onyama Limba
1028David DarakjyJapan2026-05-04King, Christopher A Esq QUALIFIED81Ivan Magalhaes
1029Costa DilliardCanada2026-05-04Rangoni Of Florence NEW84Amy Elsner
1030Adams MorascaArgentina2026-05-30Printing Dimensions UNQUALIFIED15Stephen Shaw
1031Aruna FigeroaIndia2026-05-22Feiner Bros UNQUALIFIED14Stephen Shaw
1032Izzy GarufiJapan2026-05-19Feiner Bros RENEWAL63Ivan Magalhaes
1033Faith GillianItaly2026-05-21Morlong Associates UNQUALIFIED78Amy Elsner
1034Smith GlickCanada2026-05-26Chanay, Jeffrey A Esq UNQUALIFIED6Onyama Limba
1035Isabel BowleyJapan2026-05-11Feiner Bros PROPOSAL28Amy Elsner
1036Clifford RimJapan2026-05-30Rousseaux, Michael Esq NEGOTIATION53Onyama Limba
1037Maisha RulapaughRussia2026-05-07Rousseaux, Michael Esq UNQUALIFIED12Elwin Sharvill
1038Maria MarrierArgentina2026-05-13Morlong Associates NEGOTIATION99Elwin Sharvill
1039Leja CaldareraFrance2026-05-22Chapman, Ross E Esq UNQUALIFIED76Xuxue Feng
1040Adams MorascaRussia2026-05-21Chemel, James L Cpa NEW52Amy Elsner
1041Greenwood BologniaBrazil2026-05-30King, Christopher A Esq QUALIFIED1Xuxue Feng
1042Faith GillianFrance2026-05-14Feltz Printing Service NEGOTIATION92Anna Fali
1043Ivar PaprockiRussia2026-05-22Chemel, James L Cpa QUALIFIED8Amy Elsner
1044Kaitlin OstroskyIndia2026-05-29Commercial Press NEW88Stephen Shaw
1045Aruna FigeroaIndia2026-05-07Chemel, James L Cpa QUALIFIED53Asiya Javayant
1046Julie StensethAustralia2026-05-27Benton, John B Jr PROPOSAL30Onyama Limba
1047Misaki RoysterUnited Kingdom2026-05-03Feltz Printing Service PROPOSAL84Elwin Sharvill
1048Izzy GarufiUnited Kingdom2026-05-08Commercial Press NEW79Stephen Shaw
1049Emily WhobreyCanada2026-05-20Chapman, Ross E Esq PROPOSAL55Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Smith GlickUnited KingdomAsiya Javayant PROPOSAL
Antonio CaudyItalyBernardo Dominic RENEWAL
Silvio SlusarskiGermanyElwin Sharvill RENEWAL
Costa DilliardJapanAsiya Javayant NEW
Kaitlin OstroskyIndiaAmy Elsner QUALIFIED
Aditya KuskoArgentinaElwin Sharvill NEW
Tony FollerAustraliaAmy Elsner QUALIFIED
Johnson SergiIndiaAsiya Javayant NEGOTIATION
Chavez BriddickCanadaElwin Sharvill QUALIFIED
Tony FollerRussiaElwin Sharvill UNQUALIFIED
Kadeem FlosiBrazilElwin Sharvill PROPOSAL
Jennifer AmigonJapanElwin Sharvill QUALIFIED
Rodrigues CampainAustraliaOnyama Limba NEW
Izzy GarufiJapanXuxue Feng NEW
Julie StensethCanadaAsiya Javayant UNQUALIFIED
Darci PoquetteUnited KingdomAmy Elsner UNQUALIFIED
Kaitlin OstroskyFranceOnyama Limba NEGOTIATION
Sinclair WaycottCanadaAnna Fali NEW
Ashley DoeAustraliaElwin Sharvill UNQUALIFIED
Maria MarrierRussiaIoni Bowcher QUALIFIED
Morrow RutaArgentinaAsiya Javayant QUALIFIED
Ricardo GauchoItalyBernardo Dominic NEW
Chavez BriddickUnited KingdomStephen Shaw PROPOSAL
Alejandro PerinUnited KingdomAsiya Javayant NEW
Francesco ShinkoArgentinaStephen Shaw UNQUALIFIED
Greenwood BologniaArgentinaAmy Elsner NEW
Ashley DoeUnited KingdomBernardo Dominic UNQUALIFIED
Morrow RutaIndiaOnyama Limba QUALIFIED
Isabel BowleyItalyXuxue Feng PROPOSAL
Darci PoquetteItalyXuxue Feng QUALIFIED
Mayumi KolmetzGermanyOnyama Limba NEW
Juan WieserUnited KingdomXuxue Feng RENEWAL
James ButtFranceIoni Bowcher NEGOTIATION
Sinclair WaycottArgentinaIoni Bowcher QUALIFIED
Cody SaylorsSpainOnyama Limba UNQUALIFIED
Smith GlickArgentinaIoni Bowcher QUALIFIED
Jefferson SchemmerGermanyIoni Bowcher QUALIFIED
Antonio CaudyBrazilAmy Elsner RENEWAL
Ricardo GauchoArgentinaAnna Fali RENEWAL
Claire TollnerAustraliaAmy Elsner RENEWAL
Claire TollnerRussiaAsiya Javayant RENEWAL
Maisha RulapaughCanadaBernardo Dominic NEGOTIATION
Darci PoquetteArgentinaBernardo Dominic RENEWAL
Aruna FigeroaItalyOnyama Limba NEW
Greenwood BologniaItalyOnyama Limba PROPOSAL
Juan WieserFranceStephen Shaw QUALIFIED
Faith GillianSpainBernardo Dominic QUALIFIED
Arvin AlbaresFranceAsiya Javayant NEGOTIATION
Faith GillianFranceAnna Fali QUALIFIED
James ButtIndiaXuxue Feng RENEWAL
Frozen Columns
Name
Sinclair Waycott
Deepesh Chui
Ricardo Gaucho
Costa Dilliard
Ivar Paprocki
Murillo Malet
Antonio Caudy
Kadeem Flosi
Clifford Rim
Jeanfrancois Venere
Rodrigues Campain
Mayumi Kolmetz
Kadeem Flosi
Tony Foller
Jeanfrancois Venere
Jefferson Schemmer
Isabel Bowley
Aruna Figeroa
Leon Oldroyd
Kadeem Flosi
Julie Stenseth
Jennifer Amigon
David Darakjy
Nicolas Iturbide
Clifford Rim
Ivar Paprocki
Juan Wieser
Clifford Rim
Salvatore Stockham
Jones Vocelka
Ashley Doe
David Darakjy
Francesco Shinko
Aika Inouye
Antonio Caudy
Deepesh Chui
Aruna Figeroa
Antonio Caudy
Stacey Maclead
Emily Whobrey
Faith Gillian
Cody Saylors
Jones Vocelka
Tony Foller
Mujtaba Nicka
Stacey Maclead
Aditya Kusko
Chavez Briddick
James Butt
Jones Vocelka
IdCountryDate
1000United Kingdom2026-05-16
1001Germany2026-05-06
1002Canada2026-05-16
1003Russia2026-05-21
1004Brazil2026-05-19
1005France2026-05-19
1006India2026-05-07
1007India2026-05-08
1008Italy2026-05-23
1009Japan2026-05-16
1010Japan2026-05-21
1011Russia2026-05-11
1012Japan2026-05-26
1013France2026-05-29
1014Canada2026-05-29
1015Japan2026-05-04
1016Russia2026-05-11
1017Australia2026-05-12
1018Spain2026-05-25
1019India2026-05-15
1020United Kingdom2026-05-19
1021United Kingdom2026-05-08
1022India2026-05-16
1023United Kingdom2026-05-06
1024Argentina2026-05-12
1025India2026-05-26
1026Italy2026-05-02
1027Russia2026-05-05
1028Russia2026-05-03
1029India2026-05-04
1030Brazil2026-05-26
1031Russia2026-05-23
1032Australia2026-05-05
1033France2026-05-12
1034Canada2026-05-07
1035Argentina2026-05-09
1036United Kingdom2026-05-25
1037Canada2026-05-30
1038Germany2026-05-27
1039Japan2026-05-23
1040Germany2026-05-27
1041Spain2026-05-16
1042Japan2026-05-08
1043Italy2026-05-25
1044France2026-05-28
1045Australia2026-05-05
1046Argentina2026-05-29
1047Japan2026-05-22
1048Argentina2026-05-18
1049France2026-05-22

On-Demand Data

NameIdCountryDate
Aika Inouye1000India2026-05-25
Julie Stenseth1001United Kingdom2026-05-16
Kadeem Flosi1002Argentina2026-05-16
Alejandro Perin1003Russia2026-05-28
Emily Whobrey1004France2026-05-15
Johnson Sergi1005Russia2026-05-01
Francesco Shinko1006Spain2026-05-16
Isabel Bowley1007India2026-05-14
Clifford Rim1008Brazil2026-05-02
Munro Ferencz1009Spain2026-05-06
Claire Tollner1010India2026-05-16
Aika Inouye1011Canada2026-05-03
Arvin Albares1012Spain2026-05-19
Maria Marrier1013Argentina2026-05-07
David Darakjy1014Germany2026-05-04
Juan Wieser1015Argentina2026-05-15
James Butt1016Japan2026-05-17
Wickens Nestle1017Italy2026-05-03
Cody Saylors1018Argentina2026-05-06
Claire Tollner1019Germany2026-05-21
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Kaitlin OstroskyFranceElwin Sharvill UNQUALIFIED
Mayumi KolmetzJapanAsiya Javayant NEW
Ricardo GauchoRussiaIvan Magalhaes UNQUALIFIED
Ashley DoeSpainElwin Sharvill PROPOSAL
Ivar PaprockiGermanyBernardo Dominic NEGOTIATION
Munro FerenczIndiaIvan Magalhaes UNQUALIFIED
Claire TollnerIndiaBernardo Dominic NEGOTIATION
Stacey MacleadFranceStephen Shaw UNQUALIFIED
Stacey MacleadSpainXuxue Feng RENEWAL
Ivar PaprockiBrazilOnyama Limba RENEWAL
Juan WieserCanadaElwin Sharvill NEW
Murillo MaletBrazilXuxue Feng QUALIFIED
Stacey MacleadGermanyAsiya Javayant NEGOTIATION
Arvin AlbaresArgentinaAmy Elsner UNQUALIFIED
Silvio SlusarskiUnited KingdomAmy Elsner PROPOSAL
Kadeem FlosiIndiaStephen Shaw QUALIFIED
Alejandro PerinUnited KingdomIoni Bowcher NEGOTIATION
Munro FerenczAustraliaAmy Elsner NEGOTIATION
Johnson SergiArgentinaXuxue Feng UNQUALIFIED
Darci PoquetteJapanAsiya Javayant UNQUALIFIED
Greenwood BologniaUnited KingdomAmy Elsner QUALIFIED
Ashley DoeCanadaAmy Elsner NEW
Mujtaba NickaCanadaOnyama Limba UNQUALIFIED
Aruna FigeroaIndiaBernardo Dominic UNQUALIFIED
Silvio SlusarskiIndiaAnna Fali QUALIFIED
Maisha RulapaughCanadaOnyama Limba RENEWAL
Aruna FigeroaAustraliaAmy Elsner NEW
Misaki RoysterAustraliaStephen Shaw NEGOTIATION
Deepesh ChuiBrazilAnna Fali NEGOTIATION
Mayumi KolmetzGermanyXuxue Feng NEGOTIATION
Clifford RimArgentinaAmy Elsner QUALIFIED
Stacey MacleadArgentinaAnna Fali PROPOSAL
Murillo MaletSpainOnyama Limba NEW
Maria MarrierFranceIvan Magalhaes PROPOSAL
Darci PoquetteJapanAmy Elsner PROPOSAL
Silvio SlusarskiFranceXuxue Feng RENEWAL
Leon OldroydUnited KingdomIoni Bowcher RENEWAL
Misaki RoysterItalyStephen Shaw QUALIFIED
Mayumi KolmetzIndiaIoni Bowcher UNQUALIFIED
Adams MorascaBrazilIvan Magalhaes 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>