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
Mayumi KolmetzAustraliaIvan Magalhaes QUALIFIED
James ButtFranceAnna Fali UNQUALIFIED
Sinclair WaycottCanadaElwin Sharvill QUALIFIED
Isabel BowleyJapanAmy Elsner UNQUALIFIED
Francesco ShinkoJapanIoni Bowcher RENEWAL
Silvio SlusarskiCanadaAmy Elsner NEW
Smith GlickJapanXuxue Feng RENEWAL
Wickens NestleFranceXuxue Feng QUALIFIED
Aika InouyeSpainAnna Fali NEW
Aruna FigeroaBrazilAnna Fali PROPOSAL
Faith GillianUnited KingdomAnna Fali NEGOTIATION
Ashley DoeSpainAsiya Javayant NEW
Jefferson SchemmerGermanyAmy Elsner NEW
Francesco ShinkoFranceAsiya Javayant PROPOSAL
Jones VocelkaBrazilAnna Fali QUALIFIED
Nicolas IturbideAustraliaAmy Elsner NEW
Izzy GarufiAustraliaBernardo Dominic RENEWAL
Darci PoquetteCanadaIvan Magalhaes RENEWAL
Aruna FigeroaItalyStephen Shaw PROPOSAL
Jefferson SchemmerRussiaXuxue Feng QUALIFIED
Claire TollnerIndiaBernardo Dominic NEGOTIATION
Antonio CaudyUnited KingdomXuxue Feng NEGOTIATION
Chavez BriddickUnited KingdomXuxue Feng NEGOTIATION
James ButtCanadaXuxue Feng UNQUALIFIED
Adams MorascaSpainXuxue Feng NEW
Leon OldroydFranceAmy Elsner NEW
Leon OldroydBrazilOnyama Limba PROPOSAL
Aruna FigeroaRussiaOnyama Limba NEGOTIATION
Isabel BowleyBrazilBernardo Dominic PROPOSAL
James ButtUnited KingdomIoni Bowcher NEGOTIATION
Tony FollerFranceBernardo Dominic NEGOTIATION
Johnson SergiAustraliaBernardo Dominic UNQUALIFIED
Murillo MaletCanadaStephen Shaw QUALIFIED
Cody SaylorsSpainAnna Fali QUALIFIED
Tony FollerAustraliaAmy Elsner PROPOSAL
Clifford RimFranceAmy Elsner PROPOSAL
Deepesh ChuiIndiaAsiya Javayant NEW
Chavez BriddickIndiaXuxue Feng RENEWAL
Sinclair WaycottItalyStephen Shaw PROPOSAL
Faith GillianArgentinaIvan Magalhaes NEGOTIATION
Ashley DoeRussiaAnna Fali NEW
Isabel BowleyArgentinaIoni Bowcher UNQUALIFIED
Munro FerenczArgentinaIvan Magalhaes RENEWAL
Darci PoquetteItalyOnyama Limba UNQUALIFIED
Faith GillianCanadaAnna Fali UNQUALIFIED
Kaitlin OstroskyArgentinaElwin Sharvill RENEWAL
Salvatore StockhamBrazilElwin Sharvill PROPOSAL
Kaitlin OstroskyFranceOnyama Limba NEGOTIATION
Faith GillianBrazilAmy Elsner RENEWAL
Wickens NestleBrazilElwin Sharvill NEGOTIATION
Horizontal
NameCountryRepresentativeStatus
Octavia MaletIndiaAsiya Javayant NEGOTIATION
Cody SaylorsArgentinaXuxue Feng NEGOTIATION
Ashley DoeRussiaElwin Sharvill NEW
Wickens NestleSpainElwin Sharvill QUALIFIED
Johnson SergiCanadaAnna Fali RENEWAL
Francesco ShinkoIndiaIvan Magalhaes UNQUALIFIED
Jennifer AmigonJapanAsiya Javayant UNQUALIFIED
Nicolas IturbideIndiaOnyama Limba UNQUALIFIED
Silvio SlusarskiUnited KingdomAmy Elsner RENEWAL
Aika InouyeIndiaStephen Shaw NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Costa DilliardFrance2026-05-25Feltz Printing Service NEW63Onyama Limba
1001Misaki RoysterBrazil2026-06-02Commercial Press PROPOSAL32Onyama Limba
1002Faith GillianIndia2026-05-29Feiner Bros QUALIFIED51Ioni Bowcher
1003Arvin AlbaresRussia2026-05-24Dorl, James J Esq RENEWAL53Stephen Shaw
1004Maisha RulapaughUnited Kingdom2026-05-31Truhlar And Truhlar Attys RENEWAL29Onyama Limba
1005Tony FollerIndia2026-05-10Rousseaux, Michael Esq RENEWAL75Ioni Bowcher
1006Emily WhobreyUnited Kingdom2026-05-24King, Christopher A Esq NEGOTIATION87Stephen Shaw
1007Leja CaldareraSpain2026-05-31Feltz Printing Service UNQUALIFIED62Ioni Bowcher
1008Kadeem FlosiFrance2026-06-07Chapman, Ross E Esq PROPOSAL29Ioni Bowcher
1009Isabel BowleySpain2026-05-20Feiner Bros QUALIFIED80Amy Elsner
1010Claire TollnerArgentina2026-06-06Chapman, Ross E Esq NEW74Ivan Magalhaes
1011Aika InouyeSpain2026-05-18Rousseaux, Michael Esq NEW44Elwin Sharvill
1012Faith GillianIndia2026-05-30Benton, John B Jr NEGOTIATION48Onyama Limba
1013Leon OldroydArgentina2026-05-15Chapman, Ross E Esq QUALIFIED89Amy Elsner
1014Maria MarrierAustralia2026-05-17Rousseaux, Michael Esq PROPOSAL24Ivan Magalhaes
1015David DarakjyItaly2026-05-29Morlong Associates UNQUALIFIED73Amy Elsner
1016Octavia MaletBrazil2026-06-06Truhlar And Truhlar Attys QUALIFIED13Xuxue Feng
1017Izzy GarufiUnited Kingdom2026-05-22Rousseaux, Michael Esq RENEWAL56Ivan Magalhaes
1018Stacey MacleadArgentina2026-05-27King, Christopher A Esq PROPOSAL6Ioni Bowcher
1019Wickens NestleUnited Kingdom2026-05-28Chanay, Jeffrey A Esq PROPOSAL14Onyama Limba
1020Clifford RimArgentina2026-05-10Chemel, James L Cpa NEGOTIATION79Asiya Javayant
1021Nicolas IturbideArgentina2026-05-22Feiner Bros PROPOSAL72Ivan Magalhaes
1022Julie StensethIndia2026-05-27Morlong Associates UNQUALIFIED55Amy Elsner
1023Adams MorascaFrance2026-05-11Rangoni Of Florence NEW48Stephen Shaw
1024Murillo MaletRussia2026-05-30Commercial Press PROPOSAL66Bernardo Dominic
1025Sinclair WaycottGermany2026-06-01Chanay, Jeffrey A Esq UNQUALIFIED65Anna Fali
1026Mujtaba NickaIndia2026-05-10Commercial Press QUALIFIED98Asiya Javayant
1027Emily WhobreyIndia2026-05-22Morlong Associates QUALIFIED83Amy Elsner
1028Chavez BriddickSpain2026-05-11Feiner Bros UNQUALIFIED66Xuxue Feng
1029Munro FerenczIndia2026-06-05Dorl, James J Esq UNQUALIFIED6Xuxue Feng
1030Sinclair WaycottSpain2026-06-05Chanay, Jeffrey A Esq QUALIFIED89Ioni Bowcher
1031Kadeem FlosiRussia2026-05-14Printing Dimensions NEW93Onyama Limba
1032Aruna FigeroaJapan2026-05-31King, Christopher A Esq RENEWAL52Amy Elsner
1033Aditya KuskoFrance2026-05-25King, Christopher A Esq NEW35Asiya Javayant
1034Darci PoquetteCanada2026-06-04Printing Dimensions PROPOSAL23Ioni Bowcher
1035Isabel BowleyAustralia2026-05-24Chapman, Ross E Esq NEGOTIATION45Xuxue Feng
1036Emily WhobreyCanada2026-06-01Printing Dimensions RENEWAL15Elwin Sharvill
1037Juan WieserCanada2026-05-11Printing Dimensions NEW1Ivan Magalhaes
1038Juan WieserBrazil2026-05-20Morlong Associates UNQUALIFIED71Ivan Magalhaes
1039Leon OldroydGermany2026-05-11Feltz Printing Service NEW57Ivan Magalhaes
1040Kadeem FlosiRussia2026-05-11Chanay, Jeffrey A Esq PROPOSAL85Bernardo Dominic
1041Rodrigues CampainAustralia2026-05-31Rangoni Of Florence NEGOTIATION51Bernardo Dominic
1042Johnson SergiGermany2026-05-10King, Christopher A Esq QUALIFIED12Ioni Bowcher
1043Jeanfrancois VenereUnited Kingdom2026-05-18Benton, John B Jr NEGOTIATION50Ivan Magalhaes
1044Darci PoquetteCanada2026-06-06Commercial Press NEGOTIATION73Asiya Javayant
1045Wickens NestleIndia2026-06-06Rousseaux, Michael Esq QUALIFIED15Xuxue Feng
1046Aruna FigeroaCanada2026-05-19Morlong Associates UNQUALIFIED39Anna Fali
1047Ashley DoeItaly2026-06-03Chanay, Jeffrey A Esq RENEWAL95Asiya Javayant
1048David DarakjyUnited Kingdom2026-05-25King, Christopher A Esq NEGOTIATION57Amy Elsner
1049Isabel BowleyFrance2026-06-01Benton, John B Jr QUALIFIED79Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoArgentinaAmy Elsner RENEWAL
David DarakjyIndiaBernardo Dominic QUALIFIED
Jennifer AmigonRussiaElwin Sharvill PROPOSAL
Jefferson SchemmerUnited KingdomOnyama Limba PROPOSAL
Aruna FigeroaBrazilElwin Sharvill UNQUALIFIED
Mayumi KolmetzGermanyBernardo Dominic NEGOTIATION
Mayumi KolmetzJapanElwin Sharvill UNQUALIFIED
Jennifer AmigonRussiaIoni Bowcher NEW
Jeanfrancois VenereGermanyIoni Bowcher NEW
Smith GlickFranceStephen Shaw NEGOTIATION
Kadeem FlosiSpainIoni Bowcher UNQUALIFIED
Jefferson SchemmerIndiaAnna Fali NEGOTIATION
Ashley DoeArgentinaBernardo Dominic NEGOTIATION
Wickens NestleFranceAsiya Javayant QUALIFIED
Leon OldroydArgentinaIvan Magalhaes RENEWAL
Aditya KuskoIndiaStephen Shaw RENEWAL
Greenwood BologniaAustraliaBernardo Dominic QUALIFIED
Alejandro PerinUnited KingdomOnyama Limba NEGOTIATION
Nicolas IturbideRussiaAnna Fali UNQUALIFIED
Francesco ShinkoGermanyOnyama Limba RENEWAL
Mayumi KolmetzFranceAmy Elsner NEGOTIATION
Salvatore StockhamItalyAmy Elsner QUALIFIED
Johnson SergiIndiaElwin Sharvill NEGOTIATION
Mujtaba NickaIndiaAmy Elsner QUALIFIED
Salvatore StockhamGermanyOnyama Limba QUALIFIED
Alejandro PerinUnited KingdomAsiya Javayant NEW
Arvin AlbaresUnited KingdomElwin Sharvill PROPOSAL
Wickens NestleIndiaIvan Magalhaes NEGOTIATION
Ricardo GauchoGermanyIvan Magalhaes QUALIFIED
Octavia MaletCanadaAsiya Javayant QUALIFIED
Maisha RulapaughCanadaXuxue Feng PROPOSAL
Morrow RutaBrazilIoni Bowcher NEW
Antonio CaudyAustraliaAsiya Javayant QUALIFIED
Johnson SergiItalyAsiya Javayant RENEWAL
Leon OldroydRussiaAmy Elsner RENEWAL
Kadeem FlosiSpainBernardo Dominic NEW
Francesco ShinkoAustraliaBernardo Dominic QUALIFIED
Adams MorascaJapanAnna Fali NEGOTIATION
Nicolas IturbideItalyStephen Shaw RENEWAL
Wickens NestleJapanIoni Bowcher RENEWAL
Morrow RutaCanadaIoni Bowcher PROPOSAL
Tony FollerAustraliaStephen Shaw QUALIFIED
Juan WieserGermanyElwin Sharvill NEW
Smith GlickSpainAnna Fali UNQUALIFIED
Tony FollerFranceAnna Fali NEGOTIATION
Morrow RutaCanadaIvan Magalhaes NEW
Kaitlin OstroskyGermanyBernardo Dominic PROPOSAL
Deepesh ChuiGermanyAnna Fali UNQUALIFIED
Nicolas IturbideFranceXuxue Feng NEW
Munro FerenczJapanBernardo Dominic PROPOSAL
Frozen Columns
Name
Nicolas Iturbide
Leon Oldroyd
Juan Wieser
Stacey Maclead
Adams Morasca
Clifford Rim
Munro Ferencz
Darci Poquette
Clifford Rim
Smith Glick
Faith Gillian
Ashley Doe
Kadeem Flosi
Alejandro Perin
Jones Vocelka
Claire Tollner
Maria Marrier
Leon Oldroyd
Francesco Shinko
Silvio Slusarski
David Darakjy
Murillo Malet
Misaki Royster
Silvio Slusarski
Aditya Kusko
Deepesh Chui
Faith Gillian
Octavia Malet
Jeanfrancois Venere
Silvio Slusarski
Izzy Garufi
Leon Oldroyd
Ashley Doe
Murillo Malet
David Darakjy
Julie Stenseth
Johnson Sergi
Arvin Albares
Salvatore Stockham
Juan Wieser
Cody Saylors
Juan Wieser
Mujtaba Nicka
Misaki Royster
Sinclair Waycott
Ricardo Gaucho
Aditya Kusko
Darci Poquette
Clifford Rim
Mujtaba Nicka
IdCountryDate
1000Spain2026-05-10
1001Italy2026-05-10
1002Argentina2026-05-25
1003Japan2026-05-12
1004United Kingdom2026-06-06
1005India2026-05-11
1006Spain2026-05-31
1007France2026-05-21
1008Spain2026-05-10
1009India2026-05-12
1010Italy2026-05-25
1011Italy2026-05-30
1012India2026-05-11
1013Australia2026-06-06
1014Brazil2026-05-20
1015Argentina2026-05-20
1016France2026-05-17
1017Italy2026-05-24
1018Spain2026-05-15
1019Japan2026-06-08
1020Brazil2026-05-14
1021Germany2026-05-18
1022Spain2026-05-28
1023Germany2026-05-15
1024Italy2026-06-01
1025France2026-05-20
1026Brazil2026-05-31
1027Canada2026-05-26
1028Spain2026-06-08
1029India2026-06-07
1030Russia2026-05-29
1031India2026-05-21
1032Italy2026-05-21
1033Australia2026-06-06
1034Germany2026-05-11
1035Germany2026-05-12
1036Japan2026-05-22
1037France2026-06-02
1038Japan2026-05-22
1039Brazil2026-05-28
1040Japan2026-06-07
1041India2026-05-29
1042Argentina2026-05-19
1043India2026-06-04
1044India2026-05-23
1045United Kingdom2026-06-03
1046Brazil2026-05-24
1047France2026-06-04
1048Japan2026-05-10
1049Germany2026-05-17

On-Demand Data

NameIdCountryDate
Kaitlin Ostrosky1000Argentina2026-05-14
David Darakjy1001Russia2026-06-08
Johnson Sergi1002Germany2026-05-14
Julie Stenseth1003Australia2026-05-29
Costa Dilliard1004France2026-05-19
Rodrigues Campain1005Canada2026-05-24
Ashley Doe1006Argentina2026-05-11
Murillo Malet1007Spain2026-05-18
Octavia Malet1008Spain2026-05-25
Julie Stenseth1009Australia2026-05-22
Jefferson Schemmer1010Canada2026-05-15
Silvio Slusarski1011Brazil2026-06-08
Mujtaba Nicka1012Brazil2026-05-23
Kaitlin Ostrosky1013Japan2026-06-04
Isabel Bowley1014Spain2026-05-16
Rodrigues Campain1015Canada2026-05-11
Aditya Kusko1016Italy2026-06-08
Johnson Sergi1017Germany2026-05-21
Darci Poquette1018Germany2026-06-03
Deepesh Chui1019Russia2026-05-31
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aruna FigeroaItalyIvan Magalhaes QUALIFIED
Stacey MacleadJapanOnyama Limba PROPOSAL
Leja CaldareraIndiaXuxue Feng PROPOSAL
Jefferson SchemmerUnited KingdomAsiya Javayant UNQUALIFIED
Maria MarrierFranceAsiya Javayant RENEWAL
Darci PoquetteSpainIvan Magalhaes PROPOSAL
Faith GillianIndiaAnna Fali NEW
Jones VocelkaArgentinaStephen Shaw NEGOTIATION
Mayumi KolmetzCanadaBernardo Dominic RENEWAL
Rodrigues CampainJapanAnna Fali UNQUALIFIED
Ricardo GauchoGermanyElwin Sharvill NEGOTIATION
Adams MorascaArgentinaIoni Bowcher NEGOTIATION
Greenwood BologniaFranceAmy Elsner NEGOTIATION
Kadeem FlosiArgentinaIoni Bowcher NEW
Julie StensethIndiaStephen Shaw RENEWAL
Maisha RulapaughItalyAnna Fali NEW
Adams MorascaBrazilIoni Bowcher RENEWAL
Julie StensethUnited KingdomAsiya Javayant RENEWAL
Cody SaylorsArgentinaIvan Magalhaes NEGOTIATION
Stacey MacleadBrazilAmy Elsner UNQUALIFIED
Aditya KuskoBrazilXuxue Feng QUALIFIED
Arvin AlbaresUnited KingdomElwin Sharvill NEW
Maria MarrierJapanBernardo Dominic PROPOSAL
Adams MorascaAustraliaStephen Shaw RENEWAL
Aika InouyeSpainStephen Shaw NEGOTIATION
Aika InouyeUnited KingdomIvan Magalhaes UNQUALIFIED
Morrow RutaJapanOnyama Limba PROPOSAL
Misaki RoysterBrazilOnyama Limba QUALIFIED
Isabel BowleyIndiaAnna Fali NEW
David DarakjyRussiaXuxue Feng PROPOSAL
Johnson SergiAustraliaAmy Elsner PROPOSAL
Ricardo GauchoJapanElwin Sharvill NEW
Jeanfrancois VenereArgentinaXuxue Feng NEW
Aruna FigeroaJapanXuxue Feng NEGOTIATION
Costa DilliardUnited KingdomIvan Magalhaes UNQUALIFIED
Wickens NestleFranceXuxue Feng UNQUALIFIED
Jones VocelkaFranceXuxue Feng QUALIFIED
Kadeem FlosiRussiaOnyama Limba PROPOSAL
Julie StensethRussiaAmy Elsner RENEWAL
Silvio SlusarskiIndiaAsiya Javayant QUALIFIED

<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>