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
Leja CaldareraCanadaAnna Fali NEGOTIATION
Jones VocelkaIndiaAmy Elsner NEW
Stacey MacleadCanadaBernardo Dominic PROPOSAL
Chavez BriddickUnited KingdomIoni Bowcher QUALIFIED
Clifford RimSpainBernardo Dominic UNQUALIFIED
Julie StensethJapanStephen Shaw NEW
Clifford RimCanadaElwin Sharvill NEW
Julie StensethCanadaIoni Bowcher UNQUALIFIED
Ricardo GauchoCanadaAsiya Javayant UNQUALIFIED
Octavia MaletSpainIvan Magalhaes RENEWAL
Cody SaylorsGermanyBernardo Dominic QUALIFIED
Darci PoquetteIndiaIvan Magalhaes RENEWAL
Murillo MaletItalyAnna Fali QUALIFIED
Ivar PaprockiArgentinaIvan Magalhaes PROPOSAL
Maria MarrierGermanyAmy Elsner RENEWAL
Silvio SlusarskiFranceAmy Elsner NEW
Octavia MaletRussiaAnna Fali RENEWAL
Chavez BriddickUnited KingdomAsiya Javayant UNQUALIFIED
Silvio SlusarskiArgentinaXuxue Feng RENEWAL
Deepesh ChuiUnited KingdomXuxue Feng RENEWAL
Arvin AlbaresSpainIvan Magalhaes RENEWAL
Clifford RimJapanBernardo Dominic RENEWAL
Mujtaba NickaFranceBernardo Dominic NEW
Claire TollnerCanadaIvan Magalhaes RENEWAL
Juan WieserFranceAmy Elsner UNQUALIFIED
Ivar PaprockiArgentinaElwin Sharvill PROPOSAL
Deepesh ChuiBrazilAnna Fali UNQUALIFIED
Mayumi KolmetzArgentinaAmy Elsner PROPOSAL
Costa DilliardJapanBernardo Dominic NEGOTIATION
Ivar PaprockiAustraliaElwin Sharvill NEW
Salvatore StockhamIndiaIvan Magalhaes UNQUALIFIED
Antonio CaudyAustraliaAnna Fali PROPOSAL
Morrow RutaRussiaOnyama Limba UNQUALIFIED
Silvio SlusarskiItalyAnna Fali QUALIFIED
Kadeem FlosiItalyIoni Bowcher RENEWAL
Rodrigues CampainRussiaAnna Fali UNQUALIFIED
Izzy GarufiJapanAmy Elsner NEW
Costa DilliardUnited KingdomIvan Magalhaes NEGOTIATION
Ricardo GauchoFranceIoni Bowcher NEGOTIATION
Aruna FigeroaJapanXuxue Feng NEGOTIATION
Cody SaylorsRussiaXuxue Feng QUALIFIED
Adams MorascaJapanAsiya Javayant UNQUALIFIED
David DarakjyBrazilIvan Magalhaes NEGOTIATION
Aika InouyeRussiaAsiya Javayant PROPOSAL
Costa DilliardArgentinaAnna Fali NEW
Faith GillianUnited KingdomAnna Fali NEGOTIATION
Rodrigues CampainJapanElwin Sharvill NEGOTIATION
James ButtArgentinaAmy Elsner RENEWAL
Maisha RulapaughIndiaIoni Bowcher QUALIFIED
Jeanfrancois VenereIndiaXuxue Feng QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Morrow RutaIndiaAsiya Javayant PROPOSAL
Morrow RutaItalyAsiya Javayant QUALIFIED
Nicolas IturbideCanadaElwin Sharvill NEW
Mayumi KolmetzGermanyElwin Sharvill PROPOSAL
Ashley DoeFranceAnna Fali PROPOSAL
Emily WhobreyItalyElwin Sharvill QUALIFIED
Cody SaylorsAustraliaAsiya Javayant UNQUALIFIED
Tony FollerAustraliaElwin Sharvill QUALIFIED
Costa DilliardUnited KingdomXuxue Feng PROPOSAL
Tony FollerGermanyOnyama Limba QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Munro FerenczFrance2025-07-27Chapman, Ross E Esq QUALIFIED11Stephen Shaw
1001Morrow RutaGermany2025-08-02King, Christopher A Esq NEGOTIATION90Asiya Javayant
1002Wickens NestleItaly2025-07-27Printing Dimensions UNQUALIFIED89Elwin Sharvill
1003Greenwood BologniaArgentina2025-08-11Dorl, James J Esq RENEWAL53Ivan Magalhaes
1004Misaki RoysterArgentina2025-08-05Dorl, James J Esq NEW75Asiya Javayant
1005Kaitlin OstroskyIndia2025-07-13Feltz Printing Service UNQUALIFIED39Elwin Sharvill
1006Aditya KuskoSpain2025-07-24Morlong Associates NEGOTIATION0Bernardo Dominic
1007Aika InouyeSpain2025-07-13Feiner Bros UNQUALIFIED53Xuxue Feng
1008Claire TollnerUnited Kingdom2025-08-02Chanay, Jeffrey A Esq QUALIFIED50Stephen Shaw
1009Cody SaylorsIndia2025-07-20Benton, John B Jr NEGOTIATION74Ioni Bowcher
1010Jefferson SchemmerBrazil2025-07-27Dorl, James J Esq PROPOSAL94Xuxue Feng
1011Antonio CaudyGermany2025-08-06Benton, John B Jr PROPOSAL88Elwin Sharvill
1012Cody SaylorsArgentina2025-07-15Morlong Associates RENEWAL11Elwin Sharvill
1013Costa DilliardRussia2025-07-19Feiner Bros QUALIFIED30Bernardo Dominic
1014Leon OldroydSpain2025-08-11Buckley Miller Wright UNQUALIFIED45Onyama Limba
1015Aditya KuskoBrazil2025-08-08Benton, John B Jr NEGOTIATION48Ioni Bowcher
1016Costa DilliardJapan2025-07-20Dorl, James J Esq NEGOTIATION84Ivan Magalhaes
1017Aika InouyeArgentina2025-07-27Printing Dimensions RENEWAL44Ioni Bowcher
1018Kaitlin OstroskyRussia2025-08-01Printing Dimensions NEGOTIATION79Amy Elsner
1019Deepesh ChuiIndia2025-07-20Feiner Bros PROPOSAL10Elwin Sharvill
1020Stacey MacleadSpain2025-07-17Morlong Associates NEGOTIATION95Onyama Limba
1021Isabel BowleyAustralia2025-07-29Commercial Press NEGOTIATION33Amy Elsner
1022Mujtaba NickaUnited Kingdom2025-07-23Commercial Press UNQUALIFIED33Bernardo Dominic
1023Adams MorascaUnited Kingdom2025-08-08Morlong Associates NEGOTIATION99Ivan Magalhaes
1024Leon OldroydGermany2025-07-17Buckley Miller Wright RENEWAL33Anna Fali
1025Arvin AlbaresArgentina2025-08-03Chapman, Ross E Esq PROPOSAL42Asiya Javayant
1026Kaitlin OstroskyCanada2025-07-26King, Christopher A Esq NEW10Anna Fali
1027Jefferson SchemmerRussia2025-08-03Printing Dimensions QUALIFIED95Bernardo Dominic
1028Johnson SergiIndia2025-08-07Benton, John B Jr PROPOSAL61Ioni Bowcher
1029Murillo MaletCanada2025-07-28Truhlar And Truhlar Attys NEGOTIATION2Ioni Bowcher
1030Izzy GarufiIndia2025-07-14Chanay, Jeffrey A Esq NEGOTIATION55Stephen Shaw
1031Misaki RoysterCanada2025-08-01Rousseaux, Michael Esq NEGOTIATION44Stephen Shaw
1032Faith GillianGermany2025-07-24Chemel, James L Cpa RENEWAL0Stephen Shaw
1033Jones VocelkaItaly2025-08-09Chemel, James L Cpa RENEWAL26Amy Elsner
1034Ashley DoeRussia2025-07-13Feltz Printing Service NEW92Elwin Sharvill
1035Aika InouyeBrazil2025-07-23Rousseaux, Michael Esq QUALIFIED28Anna Fali
1036Maisha RulapaughSpain2025-07-18Chemel, James L Cpa QUALIFIED99Ioni Bowcher
1037Costa DilliardFrance2025-07-31Rangoni Of Florence PROPOSAL96Onyama Limba
1038Leja CaldareraIndia2025-08-09Buckley Miller Wright QUALIFIED68Asiya Javayant
1039Antonio CaudySpain2025-07-27Commercial Press NEW83Bernardo Dominic
1040Isabel BowleyCanada2025-07-22Truhlar And Truhlar Attys QUALIFIED63Elwin Sharvill
1041Mujtaba NickaFrance2025-08-01Truhlar And Truhlar Attys RENEWAL73Amy Elsner
1042Misaki RoysterItaly2025-07-29Feltz Printing Service PROPOSAL75Bernardo Dominic
1043Cody SaylorsIndia2025-07-17Printing Dimensions NEGOTIATION84Elwin Sharvill
1044Wickens NestleBrazil2025-08-10Printing Dimensions RENEWAL79Ioni Bowcher
1045Morrow RutaAustralia2025-07-15Rangoni Of Florence NEGOTIATION90Anna Fali
1046Leja CaldareraItaly2025-08-02Feiner Bros NEW4Xuxue Feng
1047Emily WhobreyFrance2025-08-07Morlong Associates PROPOSAL99Ioni Bowcher
1048James ButtIndia2025-08-06Buckley Miller Wright NEW24Anna Fali
1049Mujtaba NickaAustralia2025-07-18Buckley Miller Wright PROPOSAL73Elwin Sharvill
Frozen Rows
NameCountryRepresentativeStatus
Mujtaba NickaBrazilIvan Magalhaes NEGOTIATION
Alejandro PerinGermanyElwin Sharvill PROPOSAL
Ashley DoeRussiaIvan Magalhaes QUALIFIED
Wickens NestleAustraliaStephen Shaw QUALIFIED
Claire TollnerBrazilXuxue Feng NEW
Ricardo GauchoUnited KingdomOnyama Limba RENEWAL
Kadeem FlosiArgentinaAsiya Javayant NEW
Arvin AlbaresItalyAsiya Javayant RENEWAL
Julie StensethRussiaAsiya Javayant RENEWAL
Kaitlin OstroskyGermanyOnyama Limba RENEWAL
Maria MarrierArgentinaAsiya Javayant NEW
Adams MorascaFranceIvan Magalhaes NEGOTIATION
Johnson SergiArgentinaElwin Sharvill NEGOTIATION
Mayumi KolmetzArgentinaOnyama Limba RENEWAL
Alejandro PerinCanadaIoni Bowcher NEW
Maisha RulapaughSpainStephen Shaw PROPOSAL
Tony FollerFranceIvan Magalhaes NEW
Arvin AlbaresArgentinaOnyama Limba QUALIFIED
Antonio CaudyItalyStephen Shaw UNQUALIFIED
Isabel BowleyArgentinaIvan Magalhaes RENEWAL
Ivar PaprockiSpainIoni Bowcher QUALIFIED
Salvatore StockhamBrazilBernardo Dominic QUALIFIED
Mujtaba NickaFranceStephen Shaw NEW
Arvin AlbaresUnited KingdomAmy Elsner RENEWAL
Mayumi KolmetzSpainElwin Sharvill NEGOTIATION
Leon OldroydArgentinaAmy Elsner RENEWAL
Jones VocelkaRussiaAsiya Javayant PROPOSAL
David DarakjyJapanXuxue Feng NEW
Maria MarrierBrazilElwin Sharvill NEGOTIATION
Tony FollerAustraliaXuxue Feng RENEWAL
Stacey MacleadItalyAsiya Javayant UNQUALIFIED
Mujtaba NickaIndiaBernardo Dominic RENEWAL
Maria MarrierIndiaIoni Bowcher PROPOSAL
Clifford RimJapanBernardo Dominic NEGOTIATION
Munro FerenczIndiaStephen Shaw NEW
Francesco ShinkoBrazilAsiya Javayant PROPOSAL
Maria MarrierFranceElwin Sharvill UNQUALIFIED
Ivar PaprockiBrazilIoni Bowcher NEGOTIATION
Emily WhobreyJapanStephen Shaw NEW
David DarakjyIndiaBernardo Dominic NEGOTIATION
Arvin AlbaresSpainAsiya Javayant RENEWAL
Clifford RimIndiaIvan Magalhaes RENEWAL
Rodrigues CampainItalyBernardo Dominic QUALIFIED
Sinclair WaycottFranceAmy Elsner UNQUALIFIED
Alejandro PerinIndiaOnyama Limba QUALIFIED
Wickens NestleRussiaStephen Shaw UNQUALIFIED
James ButtUnited KingdomAmy Elsner UNQUALIFIED
Greenwood BologniaUnited KingdomAmy Elsner UNQUALIFIED
Jones VocelkaIndiaAnna Fali PROPOSAL
Greenwood BologniaJapanStephen Shaw UNQUALIFIED
Frozen Columns
Name
Isabel Bowley
Stacey Maclead
Faith Gillian
Costa Dilliard
Jennifer Amigon
Octavia Malet
Kadeem Flosi
Murillo Malet
Munro Ferencz
Cody Saylors
Greenwood Bolognia
Wickens Nestle
Smith Glick
Aika Inouye
Salvatore Stockham
Julie Stenseth
Leon Oldroyd
Morrow Ruta
Greenwood Bolognia
Misaki Royster
Francesco Shinko
Silvio Slusarski
Morrow Ruta
Aditya Kusko
Sinclair Waycott
Octavia Malet
Julie Stenseth
Deepesh Chui
Ricardo Gaucho
Wickens Nestle
Johnson Sergi
Clifford Rim
James Butt
Nicolas Iturbide
Adams Morasca
Ashley Doe
Ashley Doe
Jennifer Amigon
Misaki Royster
Ricardo Gaucho
Maria Marrier
Julie Stenseth
Maisha Rulapaugh
Murillo Malet
Jeanfrancois Venere
Francesco Shinko
Faith Gillian
Nicolas Iturbide
Julie Stenseth
Stacey Maclead
IdCountryDate
1000Brazil2025-07-20
1001Japan2025-08-11
1002France2025-07-21
1003Italy2025-07-31
1004Italy2025-08-08
1005Argentina2025-08-10
1006Italy2025-07-16
1007Canada2025-07-16
1008France2025-07-14
1009Brazil2025-07-26
1010Canada2025-08-11
1011Spain2025-07-23
1012Argentina2025-07-25
1013Japan2025-07-19
1014Russia2025-08-10
1015Italy2025-08-02
1016Argentina2025-07-15
1017Australia2025-07-27
1018Argentina2025-07-13
1019Canada2025-08-09
1020Brazil2025-08-10
1021Italy2025-07-31
1022Brazil2025-08-11
1023Italy2025-07-26
1024India2025-08-04
1025India2025-08-10
1026Argentina2025-08-02
1027Japan2025-07-22
1028Germany2025-08-07
1029Australia2025-07-31
1030Brazil2025-08-06
1031France2025-08-04
1032Canada2025-08-07
1033Spain2025-07-28
1034Japan2025-08-09
1035France2025-07-16
1036Canada2025-07-25
1037Italy2025-07-23
1038Germany2025-07-23
1039Russia2025-08-06
1040United Kingdom2025-07-15
1041Russia2025-07-16
1042Brazil2025-07-27
1043Brazil2025-08-01
1044United Kingdom2025-07-14
1045Spain2025-08-05
1046Argentina2025-07-13
1047Italy2025-07-20
1048Russia2025-07-19
1049Italy2025-07-20

On-Demand Data

NameIdCountryDate
Cody Saylors1000Italy2025-07-15
Cody Saylors1001India2025-08-01
Johnson Sergi1002Russia2025-07-31
Nicolas Iturbide1003Germany2025-07-27
James Butt1004Russia2025-08-06
Rodrigues Campain1005Canada2025-07-29
Clifford Rim1006Germany2025-08-11
Tony Foller1007Japan2025-07-21
Deepesh Chui1008Spain2025-07-30
Wickens Nestle1009United Kingdom2025-07-28
Nicolas Iturbide1010Brazil2025-08-03
James Butt1011United Kingdom2025-07-27
David Darakjy1012Russia2025-08-06
Izzy Garufi1013Australia2025-07-16
Antonio Caudy1014India2025-08-10
Alejandro Perin1015Canada2025-08-10
Wickens Nestle1016France2025-08-10
Nicolas Iturbide1017Argentina2025-07-20
Darci Poquette1018Japan2025-07-16
Murillo Malet1019Australia2025-08-10
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Munro FerenczBrazilAmy Elsner UNQUALIFIED
Ivar PaprockiAustraliaAmy Elsner NEW
Kadeem FlosiUnited KingdomOnyama Limba QUALIFIED
Misaki RoysterBrazilAnna Fali UNQUALIFIED
Murillo MaletGermanyAmy Elsner PROPOSAL
Deepesh ChuiFranceStephen Shaw QUALIFIED
Mujtaba NickaFranceAsiya Javayant PROPOSAL
Jones VocelkaGermanyIvan Magalhaes NEW
Aruna FigeroaIndiaIvan Magalhaes RENEWAL
Johnson SergiGermanyElwin Sharvill QUALIFIED
Ashley DoeUnited KingdomOnyama Limba QUALIFIED
Stacey MacleadAustraliaIoni Bowcher NEGOTIATION
Ivar PaprockiItalyAsiya Javayant UNQUALIFIED
Aika InouyeGermanyAnna Fali PROPOSAL
Aika InouyeBrazilElwin Sharvill NEGOTIATION
Jeanfrancois VenereUnited KingdomAsiya Javayant QUALIFIED
Sinclair WaycottBrazilOnyama Limba UNQUALIFIED
Clifford RimSpainElwin Sharvill PROPOSAL
Jeanfrancois VenereSpainAsiya Javayant PROPOSAL
Salvatore StockhamGermanyIoni Bowcher QUALIFIED
Ivar PaprockiBrazilXuxue Feng RENEWAL
Claire TollnerAustraliaOnyama Limba NEGOTIATION
David DarakjyArgentinaXuxue Feng PROPOSAL
Morrow RutaSpainStephen Shaw NEW
Wickens NestleAustraliaOnyama Limba RENEWAL
Claire TollnerArgentinaAsiya Javayant NEGOTIATION
Isabel BowleyFranceIoni Bowcher PROPOSAL
Stacey MacleadUnited KingdomBernardo Dominic NEGOTIATION
Leja CaldareraSpainIoni Bowcher QUALIFIED
Salvatore StockhamCanadaIoni Bowcher UNQUALIFIED
Morrow RutaArgentinaXuxue Feng NEW
Tony FollerItalyBernardo Dominic QUALIFIED
Clifford RimCanadaBernardo Dominic NEGOTIATION
Wickens NestleArgentinaOnyama Limba RENEWAL
James ButtIndiaIvan Magalhaes NEW
James ButtRussiaBernardo Dominic NEGOTIATION
Juan WieserItalyOnyama Limba UNQUALIFIED
Wickens NestleIndiaAmy Elsner NEGOTIATION
Chavez BriddickRussiaAsiya Javayant NEGOTIATION
Isabel BowleyIndiaElwin Sharvill 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>