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
Smith GlickSpainAnna Fali PROPOSAL
Maisha RulapaughArgentinaAnna Fali UNQUALIFIED
Juan WieserSpainAmy Elsner NEGOTIATION
Juan WieserCanadaStephen Shaw NEGOTIATION
Kadeem FlosiIndiaStephen Shaw QUALIFIED
Costa DilliardAustraliaOnyama Limba PROPOSAL
Isabel BowleyJapanStephen Shaw RENEWAL
Claire TollnerIndiaIoni Bowcher NEGOTIATION
Ivar PaprockiJapanStephen Shaw QUALIFIED
Smith GlickAustraliaXuxue Feng PROPOSAL
Clifford RimBrazilAmy Elsner RENEWAL
Kadeem FlosiItalyAsiya Javayant NEW
Sinclair WaycottAustraliaIvan Magalhaes PROPOSAL
Leja CaldareraFranceAsiya Javayant PROPOSAL
Jefferson SchemmerUnited KingdomXuxue Feng UNQUALIFIED
Misaki RoysterArgentinaXuxue Feng NEW
Juan WieserArgentinaAnna Fali UNQUALIFIED
James ButtCanadaAsiya Javayant RENEWAL
Octavia MaletUnited KingdomElwin Sharvill QUALIFIED
Kaitlin OstroskyCanadaAnna Fali UNQUALIFIED
Ashley DoeJapanBernardo Dominic UNQUALIFIED
Maisha RulapaughAustraliaElwin Sharvill PROPOSAL
Emily WhobreyItalyAnna Fali NEW
Clifford RimBrazilStephen Shaw NEGOTIATION
Julie StensethItalyBernardo Dominic NEGOTIATION
Costa DilliardJapanIvan Magalhaes QUALIFIED
Sinclair WaycottItalyAnna Fali NEW
Deepesh ChuiUnited KingdomIvan Magalhaes NEGOTIATION
David DarakjySpainIoni Bowcher PROPOSAL
Rodrigues CampainSpainIoni Bowcher PROPOSAL
Jennifer AmigonRussiaElwin Sharvill UNQUALIFIED
Alejandro PerinUnited KingdomIvan Magalhaes NEW
Kaitlin OstroskyItalyOnyama Limba RENEWAL
Smith GlickFranceElwin Sharvill RENEWAL
Jefferson SchemmerJapanAsiya Javayant RENEWAL
Francesco ShinkoItalyAnna Fali NEGOTIATION
Alejandro PerinAustraliaOnyama Limba NEW
Salvatore StockhamRussiaIvan Magalhaes RENEWAL
Jones VocelkaJapanAmy Elsner QUALIFIED
Murillo MaletArgentinaOnyama Limba NEGOTIATION
Juan WieserItalyStephen Shaw NEGOTIATION
Mayumi KolmetzIndiaOnyama Limba RENEWAL
Morrow RutaJapanStephen Shaw PROPOSAL
Greenwood BologniaSpainAnna Fali QUALIFIED
Jennifer AmigonIndiaStephen Shaw NEGOTIATION
Wickens NestleAustraliaElwin Sharvill NEGOTIATION
Clifford RimItalyElwin Sharvill NEGOTIATION
Kaitlin OstroskyBrazilStephen Shaw NEGOTIATION
Maria MarrierAustraliaAnna Fali UNQUALIFIED
Jennifer AmigonItalyAsiya Javayant RENEWAL
Horizontal
NameCountryRepresentativeStatus
Misaki RoysterCanadaOnyama Limba NEGOTIATION
Stacey MacleadCanadaElwin Sharvill PROPOSAL
Aika InouyeItalyIoni Bowcher PROPOSAL
Tony FollerFranceAmy Elsner RENEWAL
David DarakjyArgentinaXuxue Feng NEW
Isabel BowleyFranceIvan Magalhaes PROPOSAL
David DarakjyRussiaXuxue Feng UNQUALIFIED
Antonio CaudyGermanyAnna Fali NEGOTIATION
Emily WhobreyArgentinaElwin Sharvill UNQUALIFIED
David DarakjyArgentinaElwin Sharvill RENEWAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Kaitlin OstroskyGermany2026-04-06Commercial Press UNQUALIFIED83Stephen Shaw
1001Chavez BriddickAustralia2026-04-13King, Christopher A Esq PROPOSAL12Stephen Shaw
1002Aditya KuskoFrance2026-04-17Buckley Miller Wright QUALIFIED97Amy Elsner
1003Rodrigues CampainArgentina2026-04-10Rousseaux, Michael Esq QUALIFIED76Ioni Bowcher
1004Nicolas IturbideIndia2026-03-31Feiner Bros NEGOTIATION24Bernardo Dominic
1005Sinclair WaycottBrazil2026-04-15Commercial Press NEW33Elwin Sharvill
1006Antonio CaudyIndia2026-04-13Commercial Press NEW61Elwin Sharvill
1007Morrow RutaIndia2026-04-13Morlong Associates NEGOTIATION32Ioni Bowcher
1008Morrow RutaArgentina2026-03-27King, Christopher A Esq PROPOSAL41Asiya Javayant
1009Tony FollerRussia2026-04-17Benton, John B Jr UNQUALIFIED16Stephen Shaw
1010Mayumi KolmetzJapan2026-03-29Feltz Printing Service PROPOSAL80Elwin Sharvill
1011Silvio SlusarskiItaly2026-04-04Rangoni Of Florence PROPOSAL98Stephen Shaw
1012Rodrigues CampainIndia2026-03-21Commercial Press NEW21Ivan Magalhaes
1013Julie StensethItaly2026-04-16Benton, John B Jr PROPOSAL16Asiya Javayant
1014Cody SaylorsIndia2026-04-02Commercial Press QUALIFIED11Elwin Sharvill
1015Darci PoquetteIndia2026-04-11Rousseaux, Michael Esq NEGOTIATION69Ivan Magalhaes
1016Octavia MaletItaly2026-03-27Truhlar And Truhlar Attys RENEWAL70Ivan Magalhaes
1017Morrow RutaRussia2026-04-03Dorl, James J Esq NEGOTIATION32Stephen Shaw
1018Johnson SergiGermany2026-03-29Feiner Bros NEW21Ivan Magalhaes
1019Juan WieserCanada2026-04-05Printing Dimensions UNQUALIFIED97Elwin Sharvill
1020Faith GillianJapan2026-04-17Morlong Associates NEW91Anna Fali
1021Ricardo GauchoBrazil2026-03-22Chemel, James L Cpa PROPOSAL53Ivan Magalhaes
1022Smith GlickRussia2026-03-30Dorl, James J Esq PROPOSAL32Bernardo Dominic
1023Antonio CaudyItaly2026-04-09Chemel, James L Cpa UNQUALIFIED53Anna Fali
1024Chavez BriddickArgentina2026-03-26Dorl, James J Esq PROPOSAL85Elwin Sharvill
1025Nicolas IturbideRussia2026-04-18Buckley Miller Wright UNQUALIFIED63Onyama Limba
1026Alejandro PerinCanada2026-03-22Buckley Miller Wright NEW70Elwin Sharvill
1027Cody SaylorsGermany2026-04-10Commercial Press NEW9Amy Elsner
1028Mujtaba NickaAustralia2026-04-13Rousseaux, Michael Esq NEGOTIATION85Ivan Magalhaes
1029Aditya KuskoAustralia2026-04-19Dorl, James J Esq PROPOSAL57Ioni Bowcher
1030Mujtaba NickaIndia2026-04-02Benton, John B Jr QUALIFIED66Bernardo Dominic
1031Clifford RimFrance2026-04-11Commercial Press QUALIFIED75Onyama Limba
1032Juan WieserSpain2026-03-22Morlong Associates UNQUALIFIED64Asiya Javayant
1033Jeanfrancois VenereRussia2026-04-12King, Christopher A Esq QUALIFIED97Elwin Sharvill
1034Julie StensethBrazil2026-04-07Chanay, Jeffrey A Esq UNQUALIFIED6Ivan Magalhaes
1035Jeanfrancois VenereArgentina2026-04-13Buckley Miller Wright NEW9Anna Fali
1036Salvatore StockhamRussia2026-04-12Chanay, Jeffrey A Esq NEGOTIATION23Xuxue Feng
1037Ivar PaprockiItaly2026-03-24Dorl, James J Esq PROPOSAL79Elwin Sharvill
1038Rodrigues CampainIndia2026-04-13Feiner Bros RENEWAL44Bernardo Dominic
1039Murillo MaletUnited Kingdom2026-04-05Commercial Press PROPOSAL50Asiya Javayant
1040Costa DilliardRussia2026-04-01Feiner Bros QUALIFIED98Elwin Sharvill
1041Mayumi KolmetzAustralia2026-04-07Buckley Miller Wright UNQUALIFIED16Elwin Sharvill
1042Darci PoquetteBrazil2026-04-19Chapman, Ross E Esq UNQUALIFIED15Bernardo Dominic
1043Johnson SergiAustralia2026-04-17Rangoni Of Florence NEGOTIATION48Amy Elsner
1044David DarakjyAustralia2026-04-09Dorl, James J Esq NEGOTIATION39Asiya Javayant
1045Wickens NestleArgentina2026-03-28Truhlar And Truhlar Attys QUALIFIED84Amy Elsner
1046Emily WhobreyJapan2026-04-19Rousseaux, Michael Esq UNQUALIFIED5Anna Fali
1047Emily WhobreyBrazil2026-04-10Morlong Associates UNQUALIFIED14Ivan Magalhaes
1048Octavia MaletGermany2026-04-07Benton, John B Jr PROPOSAL49Elwin Sharvill
1049Greenwood BologniaBrazil2026-04-07Chanay, Jeffrey A Esq UNQUALIFIED62Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Maisha RulapaughJapanElwin Sharvill PROPOSAL
Cody SaylorsArgentinaAnna Fali PROPOSAL
Francesco ShinkoUnited KingdomAnna Fali NEW
Ivar PaprockiFranceXuxue Feng PROPOSAL
Munro FerenczIndiaAmy Elsner NEGOTIATION
Chavez BriddickBrazilAsiya Javayant NEGOTIATION
Morrow RutaCanadaBernardo Dominic NEW
Maisha RulapaughRussiaIoni Bowcher NEW
Kadeem FlosiRussiaAsiya Javayant QUALIFIED
James ButtJapanAnna Fali NEGOTIATION
Adams MorascaUnited KingdomIvan Magalhaes NEW
Aruna FigeroaGermanyAmy Elsner NEGOTIATION
Salvatore StockhamIndiaIvan Magalhaes RENEWAL
Aditya KuskoRussiaOnyama Limba NEW
Greenwood BologniaFranceXuxue Feng PROPOSAL
Ashley DoeJapanAmy Elsner QUALIFIED
Juan WieserCanadaOnyama Limba RENEWAL
Jefferson SchemmerGermanyStephen Shaw PROPOSAL
Mayumi KolmetzGermanyOnyama Limba RENEWAL
Deepesh ChuiGermanyElwin Sharvill RENEWAL
Misaki RoysterGermanyOnyama Limba QUALIFIED
Nicolas IturbideFranceXuxue Feng NEW
Mayumi KolmetzAustraliaAmy Elsner NEW
Izzy GarufiJapanIvan Magalhaes PROPOSAL
Jennifer AmigonJapanElwin Sharvill NEGOTIATION
Antonio CaudyGermanyBernardo Dominic UNQUALIFIED
Ashley DoeSpainIoni Bowcher NEW
Darci PoquetteItalyXuxue Feng NEW
Chavez BriddickCanadaXuxue Feng RENEWAL
Stacey MacleadFranceOnyama Limba NEGOTIATION
Jefferson SchemmerAustraliaAmy Elsner NEGOTIATION
Aika InouyeArgentinaXuxue Feng RENEWAL
Maisha RulapaughUnited KingdomAmy Elsner PROPOSAL
Smith GlickItalyAnna Fali NEGOTIATION
Maria MarrierBrazilOnyama Limba NEW
Sinclair WaycottGermanyIoni Bowcher NEGOTIATION
Alejandro PerinRussiaBernardo Dominic NEGOTIATION
Ivar PaprockiItalyAsiya Javayant NEGOTIATION
Salvatore StockhamRussiaIvan Magalhaes QUALIFIED
Stacey MacleadIndiaXuxue Feng NEW
Rodrigues CampainGermanyIoni Bowcher PROPOSAL
Silvio SlusarskiUnited KingdomIoni Bowcher RENEWAL
Cody SaylorsUnited KingdomStephen Shaw PROPOSAL
Antonio CaudyItalyAmy Elsner NEGOTIATION
Jones VocelkaRussiaOnyama Limba PROPOSAL
Rodrigues CampainAustraliaIvan Magalhaes NEGOTIATION
Julie StensethUnited KingdomElwin Sharvill NEW
Antonio CaudySpainXuxue Feng NEGOTIATION
Morrow RutaUnited KingdomAnna Fali PROPOSAL
Emily WhobreyUnited KingdomAmy Elsner NEGOTIATION
Frozen Columns
Name
Ashley Doe
James Butt
Jones Vocelka
Mayumi Kolmetz
Jeanfrancois Venere
Francesco Shinko
Jefferson Schemmer
Juan Wieser
Arvin Albares
Maria Marrier
Tony Foller
Misaki Royster
Leja Caldarera
Johnson Sergi
Juan Wieser
Smith Glick
Jennifer Amigon
Smith Glick
Misaki Royster
Mujtaba Nicka
Ashley Doe
Alejandro Perin
Leon Oldroyd
Misaki Royster
Ivar Paprocki
Ashley Doe
Morrow Ruta
Alejandro Perin
Tony Foller
Juan Wieser
Antonio Caudy
David Darakjy
Maria Marrier
Adams Morasca
Mujtaba Nicka
Jennifer Amigon
Misaki Royster
Aruna Figeroa
Aditya Kusko
Misaki Royster
Francesco Shinko
Emily Whobrey
Aruna Figeroa
Wickens Nestle
Jeanfrancois Venere
Alejandro Perin
Misaki Royster
Salvatore Stockham
Adams Morasca
Jennifer Amigon
IdCountryDate
1000France2026-04-18
1001Argentina2026-04-11
1002Italy2026-03-31
1003Spain2026-04-19
1004India2026-04-15
1005Japan2026-04-11
1006Spain2026-04-16
1007Japan2026-04-01
1008Spain2026-04-09
1009Italy2026-04-02
1010Brazil2026-03-29
1011Germany2026-03-28
1012United Kingdom2026-03-21
1013India2026-03-24
1014France2026-04-09
1015Russia2026-03-28
1016India2026-03-23
1017Russia2026-03-25
1018Japan2026-04-01
1019Japan2026-03-28
1020Italy2026-04-12
1021Russia2026-03-30
1022Brazil2026-04-13
1023Russia2026-03-26
1024United Kingdom2026-04-13
1025Italy2026-03-30
1026Canada2026-04-19
1027India2026-03-29
1028France2026-04-10
1029Argentina2026-04-04
1030Argentina2026-04-11
1031Spain2026-04-16
1032Argentina2026-04-15
1033Russia2026-04-15
1034Italy2026-04-05
1035Germany2026-04-19
1036Spain2026-04-10
1037Canada2026-04-05
1038Spain2026-03-27
1039Germany2026-04-07
1040Argentina2026-04-01
1041Russia2026-03-28
1042United Kingdom2026-04-15
1043Russia2026-04-14
1044United Kingdom2026-03-22
1045Brazil2026-04-08
1046Russia2026-04-12
1047Canada2026-03-25
1048Germany2026-04-07
1049Italy2026-03-23

On-Demand Data

NameIdCountryDate
Ashley Doe1000Canada2026-04-05
Ashley Doe1001Russia2026-04-08
Jones Vocelka1002Brazil2026-03-24
Greenwood Bolognia1003United Kingdom2026-03-22
Deepesh Chui1004India2026-04-11
Kadeem Flosi1005Italy2026-04-17
Alejandro Perin1006India2026-03-29
Francesco Shinko1007Spain2026-04-07
Salvatore Stockham1008Brazil2026-04-14
Sinclair Waycott1009India2026-04-02
Munro Ferencz1010Canada2026-03-26
Faith Gillian1011France2026-03-25
Murillo Malet1012Argentina2026-03-28
Stacey Maclead1013United Kingdom2026-04-12
Stacey Maclead1014Argentina2026-04-19
Izzy Garufi1015Japan2026-04-12
Salvatore Stockham1016Japan2026-04-06
Misaki Royster1017United Kingdom2026-04-05
Johnson Sergi1018Japan2026-04-18
Julie Stenseth1019Canada2026-04-19
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Cody SaylorsAustraliaBernardo Dominic NEGOTIATION
Aruna FigeroaAustraliaIvan Magalhaes UNQUALIFIED
Julie StensethBrazilStephen Shaw UNQUALIFIED
Juan WieserFranceIoni Bowcher PROPOSAL
Maisha RulapaughGermanyAsiya Javayant RENEWAL
Darci PoquetteArgentinaIoni Bowcher NEGOTIATION
Francesco ShinkoJapanElwin Sharvill RENEWAL
Maria MarrierUnited KingdomBernardo Dominic NEW
Aditya KuskoCanadaAsiya Javayant PROPOSAL
Aika InouyeRussiaIoni Bowcher PROPOSAL
Sinclair WaycottItalyStephen Shaw QUALIFIED
Jeanfrancois VenereIndiaBernardo Dominic QUALIFIED
Claire TollnerCanadaXuxue Feng RENEWAL
Mayumi KolmetzBrazilXuxue Feng QUALIFIED
Isabel BowleyItalyBernardo Dominic PROPOSAL
Aditya KuskoJapanElwin Sharvill NEGOTIATION
Francesco ShinkoJapanIoni Bowcher QUALIFIED
Rodrigues CampainRussiaOnyama Limba QUALIFIED
Claire TollnerRussiaIoni Bowcher UNQUALIFIED
Antonio CaudyFranceElwin Sharvill PROPOSAL
Misaki RoysterSpainXuxue Feng PROPOSAL
Leja CaldareraCanadaAsiya Javayant RENEWAL
Deepesh ChuiCanadaAsiya Javayant UNQUALIFIED
Octavia MaletArgentinaOnyama Limba RENEWAL
Arvin AlbaresRussiaBernardo Dominic QUALIFIED
Claire TollnerAustraliaIoni Bowcher QUALIFIED
Tony FollerJapanAnna Fali UNQUALIFIED
Murillo MaletIndiaElwin Sharvill PROPOSAL
Isabel BowleySpainIoni Bowcher QUALIFIED
Maisha RulapaughSpainAmy Elsner PROPOSAL
Nicolas IturbideRussiaAsiya Javayant NEW
Clifford RimSpainIoni Bowcher UNQUALIFIED
Mayumi KolmetzJapanStephen Shaw QUALIFIED
Salvatore StockhamArgentinaIvan Magalhaes NEW
David DarakjyGermanyAnna Fali NEW
Leon OldroydJapanAsiya Javayant UNQUALIFIED
Clifford RimAustraliaIvan Magalhaes PROPOSAL
Leja CaldareraAustraliaAmy Elsner QUALIFIED
Jennifer AmigonRussiaAmy Elsner NEGOTIATION
Morrow RutaGermanyOnyama Limba UNQUALIFIED

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