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
Cody SaylorsGermanyXuxue Feng UNQUALIFIED
Juan WieserAustraliaIvan Magalhaes UNQUALIFIED
Leja CaldareraRussiaElwin Sharvill RENEWAL
Wickens NestleIndiaAmy Elsner NEGOTIATION
Kadeem FlosiRussiaOnyama Limba NEW
Costa DilliardAustraliaAmy Elsner NEGOTIATION
Morrow RutaArgentinaBernardo Dominic NEW
Adams MorascaAustraliaAmy Elsner UNQUALIFIED
David DarakjyGermanyStephen Shaw UNQUALIFIED
James ButtItalyAnna Fali PROPOSAL
Morrow RutaJapanAmy Elsner UNQUALIFIED
Leon OldroydSpainIoni Bowcher UNQUALIFIED
Aika InouyeIndiaIoni Bowcher NEGOTIATION
Mujtaba NickaFranceAmy Elsner NEW
Adams MorascaFranceBernardo Dominic QUALIFIED
Johnson SergiAustraliaXuxue Feng UNQUALIFIED
Aditya KuskoGermanyOnyama Limba UNQUALIFIED
Deepesh ChuiIndiaOnyama Limba RENEWAL
Alejandro PerinAustraliaAnna Fali NEGOTIATION
Claire TollnerRussiaAnna Fali QUALIFIED
Ricardo GauchoJapanOnyama Limba QUALIFIED
Octavia MaletCanadaXuxue Feng RENEWAL
Octavia MaletIndiaAsiya Javayant QUALIFIED
Stacey MacleadSpainStephen Shaw UNQUALIFIED
Greenwood BologniaArgentinaAnna Fali QUALIFIED
Stacey MacleadItalyStephen Shaw NEW
Juan WieserArgentinaElwin Sharvill RENEWAL
Ivar PaprockiIndiaOnyama Limba RENEWAL
Claire TollnerFranceAsiya Javayant RENEWAL
David DarakjyArgentinaAmy Elsner RENEWAL
Antonio CaudyArgentinaBernardo Dominic NEW
Antonio CaudyBrazilAnna Fali PROPOSAL
Greenwood BologniaCanadaIoni Bowcher NEGOTIATION
Jones VocelkaJapanStephen Shaw NEW
Costa DilliardBrazilBernardo Dominic QUALIFIED
Emily WhobreyArgentinaXuxue Feng PROPOSAL
Alejandro PerinGermanyBernardo Dominic NEW
James ButtRussiaOnyama Limba NEGOTIATION
Jeanfrancois VenereItalyAmy Elsner UNQUALIFIED
Aika InouyeRussiaAmy Elsner UNQUALIFIED
Chavez BriddickBrazilOnyama Limba PROPOSAL
Leja CaldareraBrazilElwin Sharvill PROPOSAL
Cody SaylorsUnited KingdomStephen Shaw UNQUALIFIED
Juan WieserBrazilElwin Sharvill NEW
Mayumi KolmetzFranceElwin Sharvill QUALIFIED
Costa DilliardBrazilElwin Sharvill NEW
Cody SaylorsItalyStephen Shaw QUALIFIED
Cody SaylorsCanadaStephen Shaw NEGOTIATION
Faith GillianBrazilStephen Shaw NEGOTIATION
Mayumi KolmetzIndiaAsiya Javayant NEW
Horizontal
NameCountryRepresentativeStatus
Tony FollerSpainIoni Bowcher NEW
Clifford RimCanadaIvan Magalhaes QUALIFIED
Murillo MaletArgentinaIvan Magalhaes QUALIFIED
Antonio CaudySpainElwin Sharvill RENEWAL
Salvatore StockhamAustraliaIoni Bowcher NEGOTIATION
Cody SaylorsCanadaStephen Shaw PROPOSAL
Aika InouyeAustraliaIoni Bowcher RENEWAL
Wickens NestleArgentinaAnna Fali UNQUALIFIED
Ashley DoeRussiaBernardo Dominic QUALIFIED
Morrow RutaGermanyOnyama Limba NEGOTIATION
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Morrow RutaSpain2025-08-31Chapman, Ross E Esq RENEWAL93Ivan Magalhaes
1001Adams MorascaGermany2025-08-31Commercial Press UNQUALIFIED48Elwin Sharvill
1002Francesco ShinkoRussia2025-09-02Rangoni Of Florence QUALIFIED43Onyama Limba
1003Faith GillianJapan2025-09-06Dorl, James J Esq UNQUALIFIED68Ivan Magalhaes
1004Jefferson SchemmerSpain2025-08-21Feltz Printing Service UNQUALIFIED21Elwin Sharvill
1005Ashley DoeBrazil2025-08-15Feltz Printing Service NEGOTIATION20Bernardo Dominic
1006Maisha RulapaughRussia2025-09-02Feiner Bros NEW73Xuxue Feng
1007Leon OldroydBrazil2025-09-10Chemel, James L Cpa PROPOSAL21Ioni Bowcher
1008Munro FerenczUnited Kingdom2025-09-02Chanay, Jeffrey A Esq PROPOSAL81Stephen Shaw
1009Adams MorascaIndia2025-08-16Morlong Associates RENEWAL50Ioni Bowcher
1010Ivar PaprockiArgentina2025-08-16Chapman, Ross E Esq QUALIFIED69Amy Elsner
1011Ricardo GauchoUnited Kingdom2025-09-07Chapman, Ross E Esq NEGOTIATION72Amy Elsner
1012Ivar PaprockiSpain2025-09-12Chapman, Ross E Esq PROPOSAL73Anna Fali
1013Sinclair WaycottAustralia2025-08-25Feiner Bros NEGOTIATION0Asiya Javayant
1014Darci PoquetteJapan2025-09-11Feiner Bros RENEWAL24Ioni Bowcher
1015Ashley DoeItaly2025-09-03Morlong Associates NEW39Onyama Limba
1016Antonio CaudyFrance2025-09-04Rangoni Of Florence QUALIFIED69Onyama Limba
1017Chavez BriddickJapan2025-08-14Feiner Bros PROPOSAL6Ioni Bowcher
1018Octavia MaletItaly2025-08-25Dorl, James J Esq PROPOSAL96Elwin Sharvill
1019Sinclair WaycottBrazil2025-09-11Truhlar And Truhlar Attys NEGOTIATION10Anna Fali
1020James ButtSpain2025-09-03Buckley Miller Wright QUALIFIED49Ioni Bowcher
1021Rodrigues CampainRussia2025-08-27Rangoni Of Florence NEGOTIATION21Stephen Shaw
1022Kadeem FlosiAustralia2025-09-06Chanay, Jeffrey A Esq PROPOSAL68Amy Elsner
1023Salvatore StockhamCanada2025-09-03Buckley Miller Wright NEW63Amy Elsner
1024Isabel BowleyBrazil2025-08-14Dorl, James J Esq RENEWAL88Anna Fali
1025Kaitlin OstroskyBrazil2025-08-16Feltz Printing Service NEGOTIATION94Bernardo Dominic
1026Ashley DoeJapan2025-08-16Commercial Press QUALIFIED37Elwin Sharvill
1027Francesco ShinkoUnited Kingdom2025-09-01Morlong Associates NEGOTIATION62Ivan Magalhaes
1028Kaitlin OstroskyAustralia2025-09-07Rangoni Of Florence NEGOTIATION64Xuxue Feng
1029Maria MarrierBrazil2025-08-25Chanay, Jeffrey A Esq UNQUALIFIED9Bernardo Dominic
1030Mujtaba NickaCanada2025-09-10Commercial Press PROPOSAL42Asiya Javayant
1031Silvio SlusarskiSpain2025-08-14Rousseaux, Michael Esq UNQUALIFIED57Ivan Magalhaes
1032Juan WieserItaly2025-09-09Feiner Bros PROPOSAL91Elwin Sharvill
1033Francesco ShinkoCanada2025-08-17Chapman, Ross E Esq PROPOSAL21Amy Elsner
1034Jones VocelkaFrance2025-08-24Rangoni Of Florence NEW9Anna Fali
1035Aruna FigeroaIndia2025-08-27Rangoni Of Florence UNQUALIFIED98Anna Fali
1036Sinclair WaycottGermany2025-09-06Feltz Printing Service RENEWAL20Ivan Magalhaes
1037Arvin AlbaresAustralia2025-08-19Printing Dimensions NEW62Xuxue Feng
1038Isabel BowleyArgentina2025-08-29Rousseaux, Michael Esq NEW83Elwin Sharvill
1039Aruna FigeroaFrance2025-08-17Truhlar And Truhlar Attys NEGOTIATION89Ioni Bowcher
1040Faith GillianItaly2025-08-14Chapman, Ross E Esq PROPOSAL52Ivan Magalhaes
1041Octavia MaletCanada2025-08-20Feiner Bros RENEWAL98Bernardo Dominic
1042Darci PoquetteAustralia2025-08-19Feiner Bros NEW47Ioni Bowcher
1043Nicolas IturbideJapan2025-08-26Printing Dimensions NEGOTIATION6Xuxue Feng
1044Aika InouyeFrance2025-08-26King, Christopher A Esq UNQUALIFIED2Elwin Sharvill
1045Leon OldroydCanada2025-09-06Benton, John B Jr QUALIFIED10Elwin Sharvill
1046Aruna FigeroaSpain2025-08-20Feiner Bros PROPOSAL26Elwin Sharvill
1047Adams MorascaItaly2025-09-09Commercial Press RENEWAL74Ivan Magalhaes
1048Emily WhobreyAustralia2025-08-26King, Christopher A Esq QUALIFIED18Stephen Shaw
1049Claire TollnerUnited Kingdom2025-09-03Truhlar And Truhlar Attys UNQUALIFIED79Asiya Javayant
Frozen Rows
NameCountryRepresentativeStatus
Aruna FigeroaBrazilAmy Elsner NEGOTIATION
Isabel BowleyUnited KingdomElwin Sharvill PROPOSAL
Alejandro PerinItalyAmy Elsner UNQUALIFIED
Munro FerenczItalyAsiya Javayant NEW
Darci PoquetteBrazilIvan Magalhaes NEW
Jefferson SchemmerRussiaElwin Sharvill RENEWAL
Deepesh ChuiAustraliaIvan Magalhaes QUALIFIED
Clifford RimJapanAmy Elsner RENEWAL
Chavez BriddickArgentinaStephen Shaw UNQUALIFIED
Ashley DoeGermanyIvan Magalhaes UNQUALIFIED
Salvatore StockhamGermanyAnna Fali RENEWAL
Morrow RutaItalyIoni Bowcher NEW
Misaki RoysterGermanyAnna Fali RENEWAL
Jeanfrancois VenereAustraliaBernardo Dominic NEW
Murillo MaletIndiaBernardo Dominic RENEWAL
Adams MorascaSpainIoni Bowcher NEGOTIATION
Deepesh ChuiUnited KingdomIvan Magalhaes PROPOSAL
Nicolas IturbideGermanyStephen Shaw QUALIFIED
Aruna FigeroaFranceIvan Magalhaes UNQUALIFIED
Nicolas IturbideCanadaElwin Sharvill UNQUALIFIED
Nicolas IturbideSpainAnna Fali PROPOSAL
Nicolas IturbideIndiaStephen Shaw QUALIFIED
James ButtGermanyXuxue Feng NEGOTIATION
Kaitlin OstroskyRussiaAmy Elsner NEW
Sinclair WaycottSpainElwin Sharvill NEW
Isabel BowleyBrazilStephen Shaw UNQUALIFIED
Darci PoquetteBrazilAnna Fali UNQUALIFIED
Faith GillianGermanyBernardo Dominic NEGOTIATION
Salvatore StockhamGermanyElwin Sharvill QUALIFIED
Smith GlickUnited KingdomAnna Fali QUALIFIED
Leja CaldareraIndiaAnna Fali NEW
Isabel BowleyCanadaOnyama Limba PROPOSAL
David DarakjySpainIoni Bowcher QUALIFIED
Smith GlickBrazilAmy Elsner UNQUALIFIED
Faith GillianSpainAnna Fali RENEWAL
Mujtaba NickaArgentinaXuxue Feng PROPOSAL
Arvin AlbaresUnited KingdomOnyama Limba RENEWAL
Clifford RimFranceAmy Elsner NEGOTIATION
Wickens NestleCanadaAnna Fali NEGOTIATION
Smith GlickAustraliaIvan Magalhaes QUALIFIED
Silvio SlusarskiAustraliaAmy Elsner RENEWAL
Antonio CaudyAustraliaStephen Shaw RENEWAL
Sinclair WaycottIndiaXuxue Feng QUALIFIED
Salvatore StockhamItalyXuxue Feng UNQUALIFIED
Faith GillianJapanBernardo Dominic NEGOTIATION
Darci PoquetteRussiaXuxue Feng RENEWAL
Jeanfrancois VenereIndiaElwin Sharvill RENEWAL
Morrow RutaGermanyAnna Fali NEGOTIATION
Silvio SlusarskiAustraliaOnyama Limba UNQUALIFIED
Jones VocelkaBrazilIoni Bowcher QUALIFIED
Frozen Columns
Name
Johnson Sergi
Cody Saylors
Aruna Figeroa
Morrow Ruta
Maria Marrier
Jones Vocelka
Johnson Sergi
Wickens Nestle
Morrow Ruta
Salvatore Stockham
Arvin Albares
Antonio Caudy
Adams Morasca
Kaitlin Ostrosky
Nicolas Iturbide
Aruna Figeroa
Rodrigues Campain
Maria Marrier
Munro Ferencz
Wickens Nestle
David Darakjy
Leja Caldarera
Francesco Shinko
Antonio Caudy
Ivar Paprocki
Stacey Maclead
Costa Dilliard
Morrow Ruta
Jones Vocelka
Kaitlin Ostrosky
Claire Tollner
Munro Ferencz
Julie Stenseth
Costa Dilliard
Maisha Rulapaugh
Maria Marrier
Aditya Kusko
Wickens Nestle
Johnson Sergi
Octavia Malet
Francesco Shinko
Maria Marrier
Smith Glick
Kadeem Flosi
Claire Tollner
Adams Morasca
Izzy Garufi
Izzy Garufi
Julie Stenseth
Stacey Maclead
IdCountryDate
1000Canada2025-09-11
1001Germany2025-08-15
1002Germany2025-08-23
1003United Kingdom2025-09-05
1004India2025-08-28
1005Russia2025-09-07
1006India2025-09-04
1007Russia2025-09-03
1008Italy2025-08-20
1009Australia2025-08-26
1010United Kingdom2025-09-02
1011Russia2025-09-07
1012India2025-08-26
1013Italy2025-08-25
1014United Kingdom2025-09-06
1015Spain2025-09-03
1016Australia2025-09-03
1017Argentina2025-09-12
1018Argentina2025-08-15
1019Spain2025-08-15
1020India2025-09-06
1021Australia2025-09-05
1022Russia2025-09-12
1023France2025-08-28
1024Argentina2025-08-18
1025Australia2025-09-09
1026Brazil2025-09-12
1027Argentina2025-08-15
1028Russia2025-08-30
1029France2025-09-06
1030France2025-09-11
1031Russia2025-09-10
1032Canada2025-09-03
1033Brazil2025-08-28
1034Spain2025-08-18
1035Italy2025-08-30
1036Argentina2025-08-17
1037India2025-08-21
1038Australia2025-08-26
1039Argentina2025-08-24
1040Argentina2025-08-30
1041Germany2025-08-19
1042Brazil2025-08-16
1043Germany2025-09-08
1044Brazil2025-08-23
1045Argentina2025-09-08
1046Brazil2025-08-14
1047Italy2025-09-06
1048France2025-08-30
1049Spain2025-08-17

On-Demand Data

NameIdCountryDate
Jeanfrancois Venere1000United Kingdom2025-09-11
Munro Ferencz1001Brazil2025-08-31
Costa Dilliard1002Canada2025-09-05
Greenwood Bolognia1003Germany2025-08-16
Maisha Rulapaugh1004Argentina2025-09-07
Juan Wieser1005United Kingdom2025-09-10
Wickens Nestle1006Australia2025-09-01
Aditya Kusko1007Japan2025-08-18
Maria Marrier1008Germany2025-09-08
Smith Glick1009Italy2025-08-30
Murillo Malet1010Japan2025-08-15
Aika Inouye1011France2025-09-04
Emily Whobrey1012Japan2025-09-06
Deepesh Chui1013United Kingdom2025-09-08
Jeanfrancois Venere1014Australia2025-08-30
Clifford Rim1015Brazil2025-09-09
Rodrigues Campain1016Brazil2025-08-24
Izzy Garufi1017Germany2025-08-22
Aditya Kusko1018Spain2025-09-11
Stacey Maclead1019Germany2025-08-14
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Deepesh ChuiRussiaBernardo Dominic RENEWAL
Adams MorascaGermanyAsiya Javayant PROPOSAL
Emily WhobreyIndiaAmy Elsner UNQUALIFIED
Kaitlin OstroskyCanadaAnna Fali QUALIFIED
Juan WieserUnited KingdomXuxue Feng NEGOTIATION
Cody SaylorsGermanyIvan Magalhaes NEW
Costa DilliardAustraliaXuxue Feng QUALIFIED
Murillo MaletIndiaAmy Elsner QUALIFIED
Jeanfrancois VenereCanadaAmy Elsner PROPOSAL
James ButtUnited KingdomOnyama Limba RENEWAL
Antonio CaudyIndiaIoni Bowcher NEGOTIATION
Kaitlin OstroskyBrazilOnyama Limba NEGOTIATION
Alejandro PerinBrazilAsiya Javayant UNQUALIFIED
Smith GlickJapanAmy Elsner UNQUALIFIED
Maria MarrierRussiaElwin Sharvill QUALIFIED
Jefferson SchemmerRussiaIoni Bowcher PROPOSAL
Stacey MacleadRussiaBernardo Dominic UNQUALIFIED
Deepesh ChuiAustraliaElwin Sharvill UNQUALIFIED
Claire TollnerArgentinaAmy Elsner NEGOTIATION
Adams MorascaGermanyXuxue Feng PROPOSAL
Aika InouyeCanadaAnna Fali QUALIFIED
Ivar PaprockiAustraliaIvan Magalhaes RENEWAL
Ivar PaprockiSpainStephen Shaw QUALIFIED
Mayumi KolmetzAustraliaElwin Sharvill RENEWAL
Murillo MaletFranceIvan Magalhaes RENEWAL
Costa DilliardJapanAmy Elsner NEW
Claire TollnerAustraliaElwin Sharvill NEGOTIATION
Deepesh ChuiBrazilAsiya Javayant NEW
Stacey MacleadAustraliaXuxue Feng RENEWAL
Clifford RimBrazilXuxue Feng QUALIFIED
Isabel BowleyCanadaStephen Shaw UNQUALIFIED
Adams MorascaCanadaOnyama Limba UNQUALIFIED
Leon OldroydRussiaAnna Fali NEW
Rodrigues CampainFranceIvan Magalhaes PROPOSAL
Juan WieserItalyXuxue Feng NEW
Emily WhobreyGermanyIoni Bowcher NEW
Greenwood BologniaGermanyIoni Bowcher UNQUALIFIED
Darci PoquetteUnited KingdomStephen Shaw UNQUALIFIED
Claire TollnerSpainElwin Sharvill NEW
Leon OldroydBrazilOnyama Limba NEW

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