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
Octavia MaletAustraliaAmy Elsner PROPOSAL
Chavez BriddickIndiaElwin Sharvill RENEWAL
Johnson SergiAustraliaStephen Shaw PROPOSAL
Jefferson SchemmerUnited KingdomElwin Sharvill RENEWAL
Adams MorascaSpainIoni Bowcher PROPOSAL
Murillo MaletJapanAsiya Javayant NEW
Greenwood BologniaJapanIvan Magalhaes PROPOSAL
Deepesh ChuiUnited KingdomIoni Bowcher QUALIFIED
Deepesh ChuiAustraliaXuxue Feng NEW
Chavez BriddickIndiaAnna Fali PROPOSAL
Juan WieserSpainAmy Elsner UNQUALIFIED
Rodrigues CampainSpainBernardo Dominic NEGOTIATION
Jennifer AmigonJapanBernardo Dominic PROPOSAL
Munro FerenczArgentinaAmy Elsner NEGOTIATION
Antonio CaudyBrazilAmy Elsner NEGOTIATION
Jones VocelkaGermanyStephen Shaw PROPOSAL
Costa DilliardRussiaBernardo Dominic QUALIFIED
Maria MarrierCanadaOnyama Limba QUALIFIED
Murillo MaletJapanAsiya Javayant RENEWAL
Nicolas IturbideAustraliaAsiya Javayant RENEWAL
Aruna FigeroaAustraliaElwin Sharvill NEW
Cody SaylorsBrazilAmy Elsner PROPOSAL
Johnson SergiIndiaStephen Shaw NEGOTIATION
Julie StensethJapanXuxue Feng RENEWAL
Leon OldroydFranceOnyama Limba PROPOSAL
Clifford RimSpainIvan Magalhaes QUALIFIED
Jennifer AmigonGermanyIvan Magalhaes PROPOSAL
Ivar PaprockiRussiaBernardo Dominic RENEWAL
Stacey MacleadSpainAmy Elsner PROPOSAL
Aika InouyeSpainElwin Sharvill QUALIFIED
Silvio SlusarskiGermanyElwin Sharvill PROPOSAL
Murillo MaletIndiaBernardo Dominic NEW
Isabel BowleySpainAmy Elsner NEW
Claire TollnerBrazilAsiya Javayant QUALIFIED
Tony FollerRussiaAsiya Javayant UNQUALIFIED
Murillo MaletGermanyIoni Bowcher NEW
Cody SaylorsGermanyElwin Sharvill PROPOSAL
Johnson SergiItalyStephen Shaw NEW
Mayumi KolmetzCanadaXuxue Feng UNQUALIFIED
Munro FerenczFranceAmy Elsner PROPOSAL
Jennifer AmigonIndiaOnyama Limba NEW
Julie StensethArgentinaOnyama Limba PROPOSAL
Alejandro PerinAustraliaIoni Bowcher NEGOTIATION
Jennifer AmigonAustraliaXuxue Feng QUALIFIED
Clifford RimCanadaElwin Sharvill PROPOSAL
Maisha RulapaughIndiaBernardo Dominic PROPOSAL
Stacey MacleadSpainAnna Fali PROPOSAL
Jones VocelkaJapanAmy Elsner UNQUALIFIED
Ashley DoeSpainStephen Shaw RENEWAL
James ButtItalyIvan Magalhaes UNQUALIFIED
Horizontal
NameCountryRepresentativeStatus
Morrow RutaCanadaAsiya Javayant QUALIFIED
Munro FerenczRussiaElwin Sharvill QUALIFIED
Stacey MacleadSpainStephen Shaw NEW
Mujtaba NickaItalyAnna Fali UNQUALIFIED
Greenwood BologniaUnited KingdomOnyama Limba QUALIFIED
Munro FerenczFranceIoni Bowcher UNQUALIFIED
Jeanfrancois VenereCanadaXuxue Feng NEGOTIATION
Chavez BriddickArgentinaAmy Elsner QUALIFIED
Tony FollerIndiaBernardo Dominic UNQUALIFIED
Nicolas IturbideUnited KingdomElwin Sharvill RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Salvatore StockhamJapan2026-05-29King, Christopher A Esq RENEWAL34Amy Elsner
1001Aruna FigeroaArgentina2026-06-01Truhlar And Truhlar Attys PROPOSAL47Elwin Sharvill
1002Leon OldroydCanada2026-05-29Dorl, James J Esq NEW73Amy Elsner
1003Misaki RoysterArgentina2026-05-21Chanay, Jeffrey A Esq NEW84Stephen Shaw
1004David DarakjyIndia2026-06-03Truhlar And Truhlar Attys NEW3Anna Fali
1005Adams MorascaSpain2026-05-30Truhlar And Truhlar Attys RENEWAL76Asiya Javayant
1006Jeanfrancois VenereSpain2026-06-06Rangoni Of Florence PROPOSAL63Ivan Magalhaes
1007Greenwood BologniaSpain2026-06-01Printing Dimensions QUALIFIED46Stephen Shaw
1008Ivar PaprockiUnited Kingdom2026-05-19Dorl, James J Esq RENEWAL77Amy Elsner
1009Sinclair WaycottArgentina2026-05-29Buckley Miller Wright PROPOSAL45Anna Fali
1010Izzy GarufiItaly2026-05-24Chanay, Jeffrey A Esq RENEWAL90Onyama Limba
1011Darci PoquetteSpain2026-05-16Commercial Press PROPOSAL2Ioni Bowcher
1012Smith GlickItaly2026-05-21Feiner Bros QUALIFIED54Onyama Limba
1013Salvatore StockhamArgentina2026-05-13Feiner Bros PROPOSAL73Ioni Bowcher
1014Francesco ShinkoGermany2026-06-09Morlong Associates NEGOTIATION26Ioni Bowcher
1015Chavez BriddickGermany2026-06-03Rangoni Of Florence RENEWAL79Onyama Limba
1016Deepesh ChuiBrazil2026-05-17Buckley Miller Wright NEW37Ivan Magalhaes
1017Chavez BriddickCanada2026-06-09Benton, John B Jr NEW48Ivan Magalhaes
1018Munro FerenczUnited Kingdom2026-05-23Benton, John B Jr RENEWAL79Onyama Limba
1019Darci PoquetteJapan2026-05-27Feltz Printing Service UNQUALIFIED22Asiya Javayant
1020Silvio SlusarskiFrance2026-05-16Printing Dimensions NEGOTIATION43Xuxue Feng
1021Kaitlin OstroskyUnited Kingdom2026-06-01Benton, John B Jr UNQUALIFIED65Elwin Sharvill
1022Rodrigues CampainItaly2026-06-03Chapman, Ross E Esq NEW35Amy Elsner
1023Morrow RutaAustralia2026-06-08Chanay, Jeffrey A Esq NEW83Ioni Bowcher
1024Adams MorascaArgentina2026-06-02King, Christopher A Esq PROPOSAL77Elwin Sharvill
1025Nicolas IturbideUnited Kingdom2026-05-16Commercial Press NEW74Ioni Bowcher
1026Darci PoquetteGermany2026-05-31Commercial Press UNQUALIFIED93Ivan Magalhaes
1027Faith GillianItaly2026-05-21Truhlar And Truhlar Attys RENEWAL49Bernardo Dominic
1028Adams MorascaJapan2026-06-10Morlong Associates RENEWAL88Elwin Sharvill
1029Chavez BriddickFrance2026-05-21Dorl, James J Esq PROPOSAL29Onyama Limba
1030Faith GillianUnited Kingdom2026-05-29Chanay, Jeffrey A Esq NEW35Ioni Bowcher
1031Ashley DoeGermany2026-05-23Chemel, James L Cpa UNQUALIFIED47Stephen Shaw
1032Wickens NestleArgentina2026-05-14Feiner Bros QUALIFIED44Bernardo Dominic
1033Rodrigues CampainItaly2026-05-26Chemel, James L Cpa PROPOSAL55Anna Fali
1034Maria MarrierAustralia2026-05-18Morlong Associates RENEWAL37Asiya Javayant
1035Alejandro PerinRussia2026-05-26Morlong Associates UNQUALIFIED18Ioni Bowcher
1036Deepesh ChuiItaly2026-06-07Chemel, James L Cpa QUALIFIED29Elwin Sharvill
1037Juan WieserUnited Kingdom2026-06-06King, Christopher A Esq RENEWAL15Ioni Bowcher
1038Nicolas IturbideFrance2026-06-05Feiner Bros QUALIFIED1Asiya Javayant
1039Arvin AlbaresAustralia2026-05-14Dorl, James J Esq RENEWAL98Anna Fali
1040Juan WieserItaly2026-05-13Chanay, Jeffrey A Esq RENEWAL58Xuxue Feng
1041Deepesh ChuiAustralia2026-05-15Dorl, James J Esq RENEWAL92Amy Elsner
1042Jennifer AmigonBrazil2026-05-14Morlong Associates UNQUALIFIED11Ioni Bowcher
1043Isabel BowleyFrance2026-05-17Commercial Press PROPOSAL39Ivan Magalhaes
1044Mujtaba NickaCanada2026-05-30Truhlar And Truhlar Attys QUALIFIED14Stephen Shaw
1045Leon OldroydItaly2026-05-27Buckley Miller Wright NEGOTIATION75Onyama Limba
1046Tony FollerJapan2026-06-11Feiner Bros QUALIFIED79Stephen Shaw
1047Kadeem FlosiSpain2026-05-22Printing Dimensions QUALIFIED7Ioni Bowcher
1048Maria MarrierGermany2026-05-16Chanay, Jeffrey A Esq QUALIFIED77Anna Fali
1049Maria MarrierFrance2026-05-25Rousseaux, Michael Esq RENEWAL67Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Tony FollerArgentinaOnyama Limba QUALIFIED
Maisha RulapaughFranceIoni Bowcher PROPOSAL
Cody SaylorsArgentinaAsiya Javayant NEGOTIATION
Julie StensethAustraliaAmy Elsner NEW
Costa DilliardJapanIvan Magalhaes QUALIFIED
Chavez BriddickCanadaBernardo Dominic QUALIFIED
Morrow RutaRussiaElwin Sharvill UNQUALIFIED
Sinclair WaycottIndiaAsiya Javayant RENEWAL
David DarakjyIndiaBernardo Dominic PROPOSAL
Jefferson SchemmerItalyIvan Magalhaes NEGOTIATION
Costa DilliardJapanAnna Fali UNQUALIFIED
Clifford RimIndiaIoni Bowcher QUALIFIED
Maisha RulapaughIndiaAmy Elsner RENEWAL
Johnson SergiArgentinaIoni Bowcher NEGOTIATION
Arvin AlbaresCanadaStephen Shaw PROPOSAL
Jefferson SchemmerIndiaIoni Bowcher QUALIFIED
Misaki RoysterRussiaIvan Magalhaes PROPOSAL
Kadeem FlosiFranceIvan Magalhaes UNQUALIFIED
Adams MorascaItalyAnna Fali RENEWAL
Aika InouyeJapanElwin Sharvill NEW
Aika InouyeCanadaAnna Fali UNQUALIFIED
Mujtaba NickaGermanyXuxue Feng QUALIFIED
Aika InouyeIndiaAmy Elsner RENEWAL
David DarakjyCanadaAnna Fali NEW
Misaki RoysterRussiaAsiya Javayant NEW
Kaitlin OstroskyItalyStephen Shaw RENEWAL
Faith GillianSpainAnna Fali RENEWAL
Misaki RoysterAustraliaElwin Sharvill NEW
Tony FollerArgentinaStephen Shaw NEW
Rodrigues CampainUnited KingdomOnyama Limba UNQUALIFIED
Darci PoquetteFranceAmy Elsner QUALIFIED
Sinclair WaycottIndiaAsiya Javayant PROPOSAL
Leon OldroydFranceStephen Shaw RENEWAL
Jeanfrancois VenereRussiaAsiya Javayant UNQUALIFIED
Silvio SlusarskiFranceIvan Magalhaes NEGOTIATION
Aika InouyeRussiaAsiya Javayant UNQUALIFIED
Chavez BriddickJapanIoni Bowcher PROPOSAL
Ashley DoeItalyOnyama Limba QUALIFIED
Munro FerenczIndiaXuxue Feng QUALIFIED
Francesco ShinkoBrazilXuxue Feng PROPOSAL
Claire TollnerSpainAsiya Javayant NEGOTIATION
Darci PoquetteArgentinaIvan Magalhaes QUALIFIED
Nicolas IturbideFranceOnyama Limba NEW
Greenwood BologniaUnited KingdomOnyama Limba NEGOTIATION
Chavez BriddickFranceAmy Elsner RENEWAL
Salvatore StockhamCanadaStephen Shaw NEGOTIATION
Silvio SlusarskiFranceBernardo Dominic NEW
Stacey MacleadJapanIvan Magalhaes UNQUALIFIED
Maisha RulapaughUnited KingdomAsiya Javayant NEW
Ashley DoeCanadaElwin Sharvill UNQUALIFIED
Frozen Columns
Name
Greenwood Bolognia
Jeanfrancois Venere
Nicolas Iturbide
Misaki Royster
Misaki Royster
Emily Whobrey
Kaitlin Ostrosky
Jones Vocelka
Claire Tollner
Ashley Doe
Rodrigues Campain
Mujtaba Nicka
Faith Gillian
Julie Stenseth
Ashley Doe
Emily Whobrey
Antonio Caudy
James Butt
Maisha Rulapaugh
Stacey Maclead
Izzy Garufi
Wickens Nestle
Arvin Albares
Leon Oldroyd
Ashley Doe
Leja Caldarera
Alejandro Perin
James Butt
Arvin Albares
Tony Foller
Clifford Rim
Antonio Caudy
Costa Dilliard
Greenwood Bolognia
Ashley Doe
Isabel Bowley
Wickens Nestle
Leja Caldarera
Aditya Kusko
Darci Poquette
Jefferson Schemmer
Costa Dilliard
Claire Tollner
Murillo Malet
Kaitlin Ostrosky
Ivar Paprocki
Wickens Nestle
Morrow Ruta
Alejandro Perin
Faith Gillian
IdCountryDate
1000Spain2026-05-25
1001Canada2026-05-13
1002India2026-05-22
1003Germany2026-05-24
1004Italy2026-05-25
1005Japan2026-05-22
1006France2026-05-14
1007Spain2026-06-04
1008Italy2026-05-14
1009United Kingdom2026-06-07
1010Spain2026-06-02
1011France2026-05-20
1012India2026-06-08
1013India2026-05-29
1014India2026-06-03
1015Japan2026-05-30
1016Russia2026-06-01
1017Canada2026-05-28
1018Germany2026-06-08
1019India2026-05-30
1020Brazil2026-06-11
1021Germany2026-06-08
1022United Kingdom2026-05-14
1023Canada2026-05-15
1024Argentina2026-06-02
1025Italy2026-06-06
1026Italy2026-05-28
1027Argentina2026-05-25
1028Russia2026-06-09
1029United Kingdom2026-06-08
1030Australia2026-06-10
1031Brazil2026-05-14
1032Spain2026-06-11
1033Argentina2026-06-08
1034Australia2026-05-25
1035France2026-06-05
1036Canada2026-06-05
1037Germany2026-05-21
1038India2026-06-11
1039Canada2026-05-22
1040France2026-06-05
1041Italy2026-05-15
1042France2026-05-18
1043Russia2026-06-05
1044Canada2026-05-26
1045Japan2026-05-19
1046Russia2026-05-23
1047Brazil2026-05-28
1048Canada2026-05-15
1049Brazil2026-05-28

On-Demand Data

NameIdCountryDate
Ricardo Gaucho1000United Kingdom2026-05-23
Sinclair Waycott1001Spain2026-05-17
Chavez Briddick1002Japan2026-06-01
Alejandro Perin1003Italy2026-05-24
Clifford Rim1004Brazil2026-05-25
Aika Inouye1005Japan2026-06-03
Octavia Malet1006Canada2026-05-30
Jennifer Amigon1007Italy2026-05-28
Maisha Rulapaugh1008Australia2026-05-15
Greenwood Bolognia1009Russia2026-06-03
Maria Marrier1010Canada2026-05-26
Aditya Kusko1011India2026-05-22
Darci Poquette1012Brazil2026-05-25
Faith Gillian1013United Kingdom2026-05-16
Claire Tollner1014United Kingdom2026-05-18
Deepesh Chui1015France2026-05-31
Murillo Malet1016United Kingdom2026-06-02
Julie Stenseth1017Argentina2026-05-21
Jefferson Schemmer1018Italy2026-05-18
Kaitlin Ostrosky1019Brazil2026-05-17
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Darci PoquetteArgentinaOnyama Limba NEW
Jefferson SchemmerFranceXuxue Feng RENEWAL
Jeanfrancois VenereGermanyAnna Fali NEW
Wickens NestleGermanyAmy Elsner UNQUALIFIED
Emily WhobreyCanadaIvan Magalhaes UNQUALIFIED
Deepesh ChuiAustraliaAnna Fali NEW
Costa DilliardCanadaAmy Elsner NEGOTIATION
Izzy GarufiSpainElwin Sharvill PROPOSAL
Maria MarrierAustraliaAsiya Javayant QUALIFIED
Tony FollerCanadaElwin Sharvill PROPOSAL
Ivar PaprockiJapanBernardo Dominic NEW
Darci PoquetteUnited KingdomStephen Shaw UNQUALIFIED
Wickens NestleItalyAsiya Javayant QUALIFIED
Francesco ShinkoIndiaIoni Bowcher PROPOSAL
Izzy GarufiRussiaXuxue Feng UNQUALIFIED
Stacey MacleadCanadaOnyama Limba UNQUALIFIED
Darci PoquetteCanadaAnna Fali UNQUALIFIED
Aditya KuskoSpainAmy Elsner RENEWAL
Kadeem FlosiJapanOnyama Limba UNQUALIFIED
Antonio CaudySpainOnyama Limba NEGOTIATION
Rodrigues CampainGermanyIoni Bowcher RENEWAL
Emily WhobreyAustraliaStephen Shaw QUALIFIED
Munro FerenczSpainAmy Elsner PROPOSAL
Salvatore StockhamIndiaAnna Fali PROPOSAL
Deepesh ChuiGermanyXuxue Feng PROPOSAL
Francesco ShinkoFranceIoni Bowcher NEGOTIATION
Maria MarrierIndiaXuxue Feng PROPOSAL
Mujtaba NickaSpainIoni Bowcher PROPOSAL
Leja CaldareraRussiaAsiya Javayant QUALIFIED
Sinclair WaycottCanadaXuxue Feng RENEWAL
Leja CaldareraCanadaAnna Fali QUALIFIED
Clifford RimSpainAsiya Javayant NEW
Johnson SergiSpainOnyama Limba QUALIFIED
Greenwood BologniaJapanAnna Fali NEGOTIATION
Jefferson SchemmerItalyIvan Magalhaes UNQUALIFIED
Wickens NestleItalyAsiya Javayant PROPOSAL
Ashley DoeSpainAnna Fali RENEWAL
Claire TollnerFranceAsiya Javayant NEGOTIATION
Johnson SergiCanadaAsiya Javayant RENEWAL
Jones VocelkaBrazilStephen Shaw 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>