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
Adams MorascaCanadaXuxue Feng QUALIFIED
Aditya KuskoItalyIvan Magalhaes QUALIFIED
Mujtaba NickaItalyStephen Shaw UNQUALIFIED
Jefferson SchemmerBrazilIvan Magalhaes RENEWAL
Stacey MacleadSpainStephen Shaw QUALIFIED
Jefferson SchemmerRussiaIoni Bowcher NEW
Izzy GarufiJapanAsiya Javayant RENEWAL
Francesco ShinkoAustraliaElwin Sharvill RENEWAL
Ivar PaprockiFranceOnyama Limba NEGOTIATION
Leon OldroydJapanBernardo Dominic NEGOTIATION
Ivar PaprockiIndiaBernardo Dominic NEW
Francesco ShinkoUnited KingdomIoni Bowcher RENEWAL
Leon OldroydFranceElwin Sharvill UNQUALIFIED
Emily WhobreyArgentinaXuxue Feng NEGOTIATION
Adams MorascaUnited KingdomXuxue Feng RENEWAL
Deepesh ChuiIndiaIoni Bowcher NEGOTIATION
Julie StensethItalyStephen Shaw RENEWAL
Munro FerenczUnited KingdomAsiya Javayant PROPOSAL
Ivar PaprockiJapanOnyama Limba UNQUALIFIED
Kadeem FlosiIndiaIvan Magalhaes PROPOSAL
Isabel BowleyIndiaStephen Shaw RENEWAL
Smith GlickArgentinaAmy Elsner UNQUALIFIED
Adams MorascaGermanyIoni Bowcher UNQUALIFIED
Cody SaylorsIndiaIoni Bowcher RENEWAL
Stacey MacleadJapanAmy Elsner PROPOSAL
Ashley DoeArgentinaAnna Fali UNQUALIFIED
Aditya KuskoJapanAmy Elsner NEW
Francesco ShinkoUnited KingdomBernardo Dominic UNQUALIFIED
Costa DilliardGermanyAmy Elsner PROPOSAL
Ivar PaprockiBrazilXuxue Feng QUALIFIED
Maisha RulapaughIndiaOnyama Limba PROPOSAL
Leon OldroydCanadaAsiya Javayant QUALIFIED
Cody SaylorsAustraliaAnna Fali PROPOSAL
Octavia MaletSpainAsiya Javayant NEW
Alejandro PerinGermanyAnna Fali UNQUALIFIED
Antonio CaudyBrazilIoni Bowcher UNQUALIFIED
Clifford RimItalyIoni Bowcher UNQUALIFIED
Jennifer AmigonArgentinaAnna Fali NEGOTIATION
Cody SaylorsRussiaXuxue Feng RENEWAL
Alejandro PerinBrazilStephen Shaw PROPOSAL
Francesco ShinkoArgentinaIoni Bowcher QUALIFIED
Isabel BowleyItalyXuxue Feng UNQUALIFIED
Rodrigues CampainCanadaOnyama Limba UNQUALIFIED
Aditya KuskoSpainIoni Bowcher UNQUALIFIED
Munro FerenczArgentinaBernardo Dominic NEGOTIATION
Claire TollnerSpainAsiya Javayant UNQUALIFIED
Johnson SergiCanadaAsiya Javayant PROPOSAL
Kaitlin OstroskyArgentinaXuxue Feng NEW
Mayumi KolmetzRussiaAmy Elsner PROPOSAL
Morrow RutaCanadaBernardo Dominic QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Adams MorascaAustraliaElwin Sharvill NEW
Isabel BowleyJapanElwin Sharvill RENEWAL
Izzy GarufiIndiaElwin Sharvill PROPOSAL
Stacey MacleadRussiaElwin Sharvill UNQUALIFIED
Juan WieserAustraliaStephen Shaw QUALIFIED
Izzy GarufiItalyElwin Sharvill NEW
Munro FerenczRussiaIoni Bowcher QUALIFIED
Jeanfrancois VenereBrazilXuxue Feng NEGOTIATION
Munro FerenczFranceStephen Shaw UNQUALIFIED
Cody SaylorsFranceBernardo Dominic PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Juan WieserJapan2026-04-16Truhlar And Truhlar Attys UNQUALIFIED93Anna Fali
1001Izzy GarufiJapan2026-04-30Printing Dimensions RENEWAL53Xuxue Feng
1002Munro FerenczArgentina2026-04-06Dorl, James J Esq NEGOTIATION93Asiya Javayant
1003Ashley DoeFrance2026-04-12Feiner Bros NEW82Ivan Magalhaes
1004Ivar PaprockiItaly2026-04-16Rangoni Of Florence NEGOTIATION10Anna Fali
1005Antonio CaudySpain2026-04-02Commercial Press RENEWAL93Ivan Magalhaes
1006Stacey MacleadFrance2026-04-01Chemel, James L Cpa RENEWAL77Ivan Magalhaes
1007Sinclair WaycottGermany2026-04-22Rousseaux, Michael Esq NEW48Onyama Limba
1008Aika InouyeUnited Kingdom2026-04-11Commercial Press PROPOSAL93Ivan Magalhaes
1009Izzy GarufiJapan2026-04-01Rangoni Of Florence UNQUALIFIED54Ivan Magalhaes
1010Morrow RutaFrance2026-04-27Benton, John B Jr NEW73Asiya Javayant
1011Adams MorascaItaly2026-04-24Commercial Press NEW80Asiya Javayant
1012Leon OldroydSpain2026-04-09Chapman, Ross E Esq QUALIFIED26Anna Fali
1013Misaki RoysterBrazil2026-04-18Dorl, James J Esq NEGOTIATION74Xuxue Feng
1014Octavia MaletItaly2026-04-29King, Christopher A Esq NEGOTIATION87Amy Elsner
1015Costa DilliardFrance2026-04-02Buckley Miller Wright PROPOSAL80Elwin Sharvill
1016Kaitlin OstroskyAustralia2026-04-12Rangoni Of Florence UNQUALIFIED9Stephen Shaw
1017Aditya KuskoFrance2026-04-04Commercial Press NEW84Ioni Bowcher
1018Leja CaldareraSpain2026-04-26Feltz Printing Service PROPOSAL71Elwin Sharvill
1019Isabel BowleyFrance2026-04-19Feltz Printing Service PROPOSAL20Amy Elsner
1020Jeanfrancois VenereRussia2026-04-21Chanay, Jeffrey A Esq RENEWAL60Bernardo Dominic
1021Cody SaylorsIndia2026-04-02Printing Dimensions RENEWAL75Amy Elsner
1022Leon OldroydAustralia2026-04-04Printing Dimensions UNQUALIFIED2Stephen Shaw
1023Kadeem FlosiArgentina2026-04-16Chanay, Jeffrey A Esq NEW32Asiya Javayant
1024Adams MorascaUnited Kingdom2026-04-28Dorl, James J Esq UNQUALIFIED72Amy Elsner
1025Stacey MacleadJapan2026-04-13Commercial Press UNQUALIFIED94Ioni Bowcher
1026Salvatore StockhamGermany2026-04-16Chemel, James L Cpa NEW18Onyama Limba
1027Maisha RulapaughUnited Kingdom2026-04-30Feltz Printing Service UNQUALIFIED29Ivan Magalhaes
1028Claire TollnerArgentina2026-04-09Commercial Press UNQUALIFIED95Asiya Javayant
1029Ricardo GauchoCanada2026-04-22King, Christopher A Esq QUALIFIED56Bernardo Dominic
1030Ivar PaprockiJapan2026-04-21Rangoni Of Florence RENEWAL93Anna Fali
1031Deepesh ChuiJapan2026-04-12Commercial Press QUALIFIED31Ivan Magalhaes
1032Emily WhobreySpain2026-04-23Commercial Press NEW22Xuxue Feng
1033Salvatore StockhamAustralia2026-04-13Feltz Printing Service NEW77Amy Elsner
1034Ivar PaprockiItaly2026-04-08Benton, John B Jr PROPOSAL76Elwin Sharvill
1035Aika InouyeItaly2026-04-07King, Christopher A Esq NEW48Bernardo Dominic
1036Isabel BowleyArgentina2026-04-08Feltz Printing Service RENEWAL79Ivan Magalhaes
1037Juan WieserGermany2026-04-23Feltz Printing Service NEGOTIATION99Ivan Magalhaes
1038Smith GlickItaly2026-04-09Feltz Printing Service RENEWAL31Ivan Magalhaes
1039James ButtAustralia2026-04-07Feiner Bros PROPOSAL28Elwin Sharvill
1040Jennifer AmigonFrance2026-04-29Chapman, Ross E Esq NEW89Bernardo Dominic
1041Clifford RimGermany2026-04-29Rangoni Of Florence NEW18Onyama Limba
1042Mujtaba NickaCanada2026-04-19Buckley Miller Wright NEGOTIATION88Ivan Magalhaes
1043Jennifer AmigonRussia2026-04-23Chemel, James L Cpa NEGOTIATION57Anna Fali
1044Julie StensethUnited Kingdom2026-04-15Morlong Associates RENEWAL49Onyama Limba
1045Juan WieserItaly2026-04-01Rangoni Of Florence NEW12Ioni Bowcher
1046Aika InouyeGermany2026-04-05Benton, John B Jr NEGOTIATION87Xuxue Feng
1047Claire TollnerAustralia2026-04-22Feltz Printing Service PROPOSAL56Elwin Sharvill
1048Kadeem FlosiAustralia2026-04-18Morlong Associates NEGOTIATION95Anna Fali
1049Rodrigues CampainJapan2026-04-26Chemel, James L Cpa UNQUALIFIED95Ivan Magalhaes
Frozen Rows
NameCountryRepresentativeStatus
Sinclair WaycottFranceAnna Fali PROPOSAL
Julie StensethFranceXuxue Feng RENEWAL
Octavia MaletGermanyAnna Fali QUALIFIED
Arvin AlbaresItalyOnyama Limba NEGOTIATION
Deepesh ChuiUnited KingdomElwin Sharvill QUALIFIED
Claire TollnerRussiaOnyama Limba QUALIFIED
Leja CaldareraUnited KingdomIoni Bowcher UNQUALIFIED
Ashley DoeUnited KingdomElwin Sharvill QUALIFIED
Murillo MaletJapanAnna Fali RENEWAL
Adams MorascaArgentinaStephen Shaw QUALIFIED
Francesco ShinkoIndiaIoni Bowcher RENEWAL
Ashley DoeArgentinaIoni Bowcher NEGOTIATION
Misaki RoysterUnited KingdomBernardo Dominic NEGOTIATION
David DarakjyIndiaXuxue Feng NEW
Arvin AlbaresIndiaStephen Shaw NEGOTIATION
Faith GillianItalyAsiya Javayant UNQUALIFIED
Murillo MaletBrazilElwin Sharvill NEGOTIATION
Aruna FigeroaArgentinaAmy Elsner NEW
Sinclair WaycottSpainXuxue Feng NEW
Claire TollnerFranceAnna Fali NEW
Arvin AlbaresIndiaAsiya Javayant QUALIFIED
Isabel BowleyArgentinaStephen Shaw RENEWAL
Ricardo GauchoIndiaAmy Elsner NEW
Ivar PaprockiCanadaIvan Magalhaes RENEWAL
Tony FollerUnited KingdomIoni Bowcher QUALIFIED
Smith GlickItalyIoni Bowcher NEW
Aruna FigeroaGermanyAmy Elsner QUALIFIED
Sinclair WaycottArgentinaStephen Shaw UNQUALIFIED
David DarakjyRussiaAnna Fali NEGOTIATION
Nicolas IturbideGermanyOnyama Limba NEGOTIATION
Jones VocelkaJapanOnyama Limba PROPOSAL
Wickens NestleAustraliaStephen Shaw UNQUALIFIED
Leja CaldareraAustraliaBernardo Dominic UNQUALIFIED
Smith GlickRussiaOnyama Limba RENEWAL
Leon OldroydJapanStephen Shaw RENEWAL
Chavez BriddickAustraliaBernardo Dominic NEGOTIATION
Jones VocelkaFranceBernardo Dominic NEW
Nicolas IturbideAustraliaAmy Elsner RENEWAL
Octavia MaletGermanyElwin Sharvill PROPOSAL
Jones VocelkaCanadaIvan Magalhaes QUALIFIED
Mayumi KolmetzJapanElwin Sharvill QUALIFIED
Sinclair WaycottGermanyXuxue Feng NEW
Smith GlickAustraliaIoni Bowcher QUALIFIED
Aika InouyeUnited KingdomAmy Elsner NEGOTIATION
Mayumi KolmetzFranceXuxue Feng UNQUALIFIED
Mujtaba NickaGermanyXuxue Feng UNQUALIFIED
Munro FerenczAustraliaAsiya Javayant QUALIFIED
Sinclair WaycottItalyIvan Magalhaes UNQUALIFIED
Rodrigues CampainFranceBernardo Dominic QUALIFIED
Ivar PaprockiSpainStephen Shaw NEGOTIATION
Frozen Columns
Name
Aruna Figeroa
Wickens Nestle
Antonio Caudy
Claire Tollner
Isabel Bowley
Aditya Kusko
Deepesh Chui
Arvin Albares
Chavez Briddick
Alejandro Perin
David Darakjy
Alejandro Perin
Ivar Paprocki
Clifford Rim
Jefferson Schemmer
James Butt
David Darakjy
Jennifer Amigon
Aditya Kusko
Darci Poquette
Alejandro Perin
Silvio Slusarski
Ashley Doe
Jeanfrancois Venere
Isabel Bowley
Jefferson Schemmer
Costa Dilliard
Jennifer Amigon
Jones Vocelka
Mayumi Kolmetz
Johnson Sergi
David Darakjy
Jones Vocelka
Francesco Shinko
Stacey Maclead
Chavez Briddick
Arvin Albares
Deepesh Chui
James Butt
David Darakjy
Jennifer Amigon
Sinclair Waycott
Emily Whobrey
Aika Inouye
Aika Inouye
Murillo Malet
Ricardo Gaucho
Cody Saylors
Darci Poquette
Salvatore Stockham
IdCountryDate
1000Germany2026-04-18
1001India2026-04-29
1002Argentina2026-04-19
1003Japan2026-04-30
1004Brazil2026-04-04
1005Russia2026-04-08
1006Brazil2026-04-13
1007Brazil2026-04-02
1008France2026-04-23
1009Spain2026-04-20
1010United Kingdom2026-04-07
1011Germany2026-04-08
1012Germany2026-04-12
1013India2026-04-14
1014Canada2026-04-08
1015Spain2026-04-09
1016Argentina2026-04-27
1017Russia2026-04-02
1018United Kingdom2026-04-17
1019Italy2026-04-10
1020Japan2026-04-26
1021Canada2026-04-10
1022India2026-04-28
1023Russia2026-04-18
1024France2026-04-25
1025Brazil2026-04-20
1026Russia2026-04-25
1027France2026-04-16
1028Italy2026-04-16
1029Argentina2026-04-03
1030Italy2026-04-13
1031Japan2026-04-02
1032France2026-04-09
1033Brazil2026-04-20
1034Brazil2026-04-11
1035Russia2026-04-27
1036India2026-04-16
1037United Kingdom2026-04-13
1038Japan2026-04-11
1039Italy2026-04-02
1040Italy2026-04-29
1041Japan2026-04-06
1042India2026-04-28
1043France2026-04-11
1044Brazil2026-04-01
1045Argentina2026-04-12
1046Canada2026-04-20
1047United Kingdom2026-04-25
1048Canada2026-04-21
1049Russia2026-04-29

On-Demand Data

NameIdCountryDate
Kadeem Flosi1000Spain2026-04-01
Aika Inouye1001United Kingdom2026-04-24
Antonio Caudy1002Australia2026-04-06
Arvin Albares1003Canada2026-04-06
Jeanfrancois Venere1004United Kingdom2026-04-01
Mayumi Kolmetz1005France2026-04-24
Antonio Caudy1006Spain2026-04-19
Ivar Paprocki1007Germany2026-04-30
Juan Wieser1008India2026-04-12
Misaki Royster1009Japan2026-04-12
Chavez Briddick1010Italy2026-04-12
Johnson Sergi1011Canada2026-04-23
Emily Whobrey1012Italy2026-04-10
Salvatore Stockham1013Brazil2026-04-12
Jefferson Schemmer1014India2026-04-04
Alejandro Perin1015France2026-04-04
Maria Marrier1016Germany2026-04-12
Leja Caldarera1017Japan2026-04-13
Leja Caldarera1018Italy2026-04-26
Cody Saylors1019Germany2026-04-25
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Aruna FigeroaRussiaIvan Magalhaes QUALIFIED
Claire TollnerFranceIvan Magalhaes RENEWAL
Salvatore StockhamGermanyXuxue Feng UNQUALIFIED
Greenwood BologniaItalyStephen Shaw UNQUALIFIED
Leja CaldareraIndiaIvan Magalhaes QUALIFIED
Munro FerenczItalyXuxue Feng UNQUALIFIED
Isabel BowleySpainIoni Bowcher NEW
Ricardo GauchoFranceAnna Fali QUALIFIED
Julie StensethUnited KingdomIvan Magalhaes QUALIFIED
Clifford RimBrazilElwin Sharvill UNQUALIFIED
Jefferson SchemmerRussiaAnna Fali UNQUALIFIED
Mujtaba NickaFranceIvan Magalhaes NEGOTIATION
Rodrigues CampainRussiaStephen Shaw QUALIFIED
Munro FerenczItalyXuxue Feng PROPOSAL
Jeanfrancois VenereSpainAmy Elsner NEW
Izzy GarufiSpainIoni Bowcher NEGOTIATION
Arvin AlbaresIndiaAnna Fali UNQUALIFIED
James ButtGermanyIoni Bowcher RENEWAL
Ashley DoeJapanOnyama Limba UNQUALIFIED
Julie StensethUnited KingdomXuxue Feng UNQUALIFIED
Chavez BriddickRussiaStephen Shaw NEGOTIATION
Aditya KuskoGermanyOnyama Limba RENEWAL
Ricardo GauchoArgentinaAnna Fali PROPOSAL
Aditya KuskoUnited KingdomAmy Elsner QUALIFIED
Silvio SlusarskiAustraliaXuxue Feng PROPOSAL
Darci PoquetteIndiaOnyama Limba NEW
Aditya KuskoBrazilStephen Shaw NEGOTIATION
Jennifer AmigonSpainAmy Elsner QUALIFIED
Isabel BowleySpainOnyama Limba PROPOSAL
Aika InouyeRussiaOnyama Limba NEW
Wickens NestleGermanyElwin Sharvill QUALIFIED
Jefferson SchemmerGermanyAmy Elsner NEGOTIATION
Jennifer AmigonIndiaIoni Bowcher NEGOTIATION
Wickens NestleIndiaXuxue Feng NEGOTIATION
Maisha RulapaughBrazilStephen Shaw QUALIFIED
Cody SaylorsCanadaAnna Fali PROPOSAL
Sinclair WaycottCanadaOnyama Limba NEGOTIATION
Jeanfrancois VenereFranceStephen Shaw NEGOTIATION
Nicolas IturbideAustraliaBernardo Dominic PROPOSAL
Kadeem FlosiFranceXuxue 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>