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
Wickens NestleFranceAnna Fali NEGOTIATION
Antonio CaudyGermanyXuxue Feng NEW
Izzy GarufiItalyBernardo Dominic QUALIFIED
Maisha RulapaughBrazilAnna Fali QUALIFIED
Maria MarrierFranceXuxue Feng PROPOSAL
Alejandro PerinUnited KingdomOnyama Limba UNQUALIFIED
Arvin AlbaresArgentinaAnna Fali QUALIFIED
Octavia MaletAustraliaXuxue Feng RENEWAL
Jennifer AmigonCanadaIoni Bowcher NEW
Smith GlickAustraliaXuxue Feng RENEWAL
Jennifer AmigonFranceAsiya Javayant NEGOTIATION
Octavia MaletSpainXuxue Feng PROPOSAL
Francesco ShinkoGermanyStephen Shaw NEW
Darci PoquetteUnited KingdomIvan Magalhaes PROPOSAL
Ashley DoeItalyAnna Fali NEGOTIATION
Mayumi KolmetzRussiaStephen Shaw UNQUALIFIED
Ivar PaprockiIndiaAsiya Javayant NEW
Emily WhobreyItalyElwin Sharvill PROPOSAL
Stacey MacleadAustraliaIvan Magalhaes NEGOTIATION
Sinclair WaycottFranceAmy Elsner RENEWAL
Jeanfrancois VenereJapanAnna Fali RENEWAL
Antonio CaudyItalyXuxue Feng PROPOSAL
Mayumi KolmetzFranceXuxue Feng QUALIFIED
Faith GillianUnited KingdomOnyama Limba PROPOSAL
Antonio CaudyAustraliaBernardo Dominic NEGOTIATION
Maria MarrierJapanXuxue Feng UNQUALIFIED
Juan WieserRussiaIvan Magalhaes PROPOSAL
Aruna FigeroaJapanBernardo Dominic UNQUALIFIED
Emily WhobreyJapanElwin Sharvill UNQUALIFIED
Silvio SlusarskiAustraliaAnna Fali UNQUALIFIED
Izzy GarufiIndiaIvan Magalhaes RENEWAL
David DarakjyIndiaIvan Magalhaes RENEWAL
Ashley DoeArgentinaAsiya Javayant NEW
Ivar PaprockiFranceAnna Fali PROPOSAL
Aika InouyeItalyIoni Bowcher PROPOSAL
Aika InouyeAustraliaElwin Sharvill UNQUALIFIED
Tony FollerCanadaXuxue Feng NEW
Aruna FigeroaRussiaIoni Bowcher PROPOSAL
Juan WieserFranceElwin Sharvill QUALIFIED
Kaitlin OstroskyArgentinaAsiya Javayant QUALIFIED
Johnson SergiArgentinaAnna Fali PROPOSAL
Nicolas IturbideCanadaAmy Elsner NEW
Aruna FigeroaItalyElwin Sharvill NEW
Kaitlin OstroskyItalyIoni Bowcher PROPOSAL
James ButtAustraliaBernardo Dominic UNQUALIFIED
Isabel BowleyUnited KingdomAnna Fali UNQUALIFIED
Deepesh ChuiUnited KingdomIoni Bowcher NEW
Julie StensethItalyStephen Shaw UNQUALIFIED
Ashley DoeCanadaElwin Sharvill QUALIFIED
James ButtAustraliaXuxue Feng NEW
Horizontal
NameCountryRepresentativeStatus
Johnson SergiArgentinaElwin Sharvill QUALIFIED
Maisha RulapaughItalyOnyama Limba NEGOTIATION
Cody SaylorsRussiaAsiya Javayant QUALIFIED
Francesco ShinkoIndiaAmy Elsner NEW
Tony FollerItalyStephen Shaw QUALIFIED
Deepesh ChuiCanadaIoni Bowcher RENEWAL
Darci PoquetteArgentinaBernardo Dominic NEW
James ButtJapanElwin Sharvill UNQUALIFIED
Aruna FigeroaItalyElwin Sharvill UNQUALIFIED
Nicolas IturbideUnited KingdomBernardo Dominic PROPOSAL
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Antonio CaudyIndia2026-04-03Benton, John B Jr NEW82Xuxue Feng
1001Ashley DoeIndia2026-04-10Buckley Miller Wright PROPOSAL64Amy Elsner
1002Deepesh ChuiGermany2026-04-09Chapman, Ross E Esq RENEWAL58Ioni Bowcher
1003Faith GillianFrance2026-04-05Dorl, James J Esq RENEWAL6Anna Fali
1004Tony FollerBrazil2026-04-10Commercial Press NEW29Xuxue Feng
1005Wickens NestleCanada2026-04-22Commercial Press QUALIFIED64Bernardo Dominic
1006Isabel BowleyArgentina2026-04-20King, Christopher A Esq PROPOSAL88Asiya Javayant
1007Alejandro PerinFrance2026-04-21Rangoni Of Florence QUALIFIED53Xuxue Feng
1008Murillo MaletAustralia2026-03-27Chanay, Jeffrey A Esq QUALIFIED61Anna Fali
1009Tony FollerUnited Kingdom2026-04-10Truhlar And Truhlar Attys UNQUALIFIED58Stephen Shaw
1010Claire TollnerArgentina2026-04-24Dorl, James J Esq PROPOSAL41Anna Fali
1011Darci PoquetteJapan2026-04-23Feiner Bros UNQUALIFIED53Ivan Magalhaes
1012Izzy GarufiJapan2026-04-21Dorl, James J Esq PROPOSAL19Amy Elsner
1013James ButtAustralia2026-04-06Rousseaux, Michael Esq QUALIFIED44Onyama Limba
1014Munro FerenczAustralia2026-04-03Morlong Associates NEW78Ioni Bowcher
1015Costa DilliardSpain2026-03-28Rousseaux, Michael Esq PROPOSAL82Xuxue Feng
1016Jefferson SchemmerJapan2026-03-26Rousseaux, Michael Esq QUALIFIED25Asiya Javayant
1017Jennifer AmigonSpain2026-04-22King, Christopher A Esq NEGOTIATION46Bernardo Dominic
1018Stacey MacleadGermany2026-04-08King, Christopher A Esq NEGOTIATION64Elwin Sharvill
1019Mayumi KolmetzGermany2026-04-13Benton, John B Jr UNQUALIFIED15Xuxue Feng
1020Munro FerenczFrance2026-04-07Commercial Press QUALIFIED98Asiya Javayant
1021Julie StensethJapan2026-04-14Morlong Associates NEW2Amy Elsner
1022Isabel BowleySpain2026-04-10Chapman, Ross E Esq RENEWAL45Elwin Sharvill
1023Adams MorascaItaly2026-04-17Rousseaux, Michael Esq UNQUALIFIED48Stephen Shaw
1024Wickens NestleItaly2026-04-13Commercial Press QUALIFIED44Elwin Sharvill
1025Faith GillianSpain2026-04-07Buckley Miller Wright UNQUALIFIED15Asiya Javayant
1026Aika InouyeBrazil2026-04-20Printing Dimensions RENEWAL54Asiya Javayant
1027Johnson SergiIndia2026-04-17Feiner Bros RENEWAL18Bernardo Dominic
1028Smith GlickItaly2026-04-20Rangoni Of Florence UNQUALIFIED4Onyama Limba
1029Greenwood BologniaJapan2026-04-09Printing Dimensions NEGOTIATION21Xuxue Feng
1030Juan WieserIndia2026-04-16Dorl, James J Esq RENEWAL8Amy Elsner
1031Salvatore StockhamSpain2026-04-21Feiner Bros QUALIFIED44Amy Elsner
1032Wickens NestleGermany2026-04-14Buckley Miller Wright RENEWAL42Anna Fali
1033Alejandro PerinGermany2026-04-06Dorl, James J Esq NEGOTIATION0Ivan Magalhaes
1034Alejandro PerinUnited Kingdom2026-04-13Morlong Associates PROPOSAL39Anna Fali
1035Izzy GarufiArgentina2026-04-09Feltz Printing Service NEGOTIATION75Anna Fali
1036Leon OldroydArgentina2026-04-11Chapman, Ross E Esq RENEWAL26Ioni Bowcher
1037Morrow RutaCanada2026-04-11Dorl, James J Esq UNQUALIFIED0Onyama Limba
1038Mujtaba NickaArgentina2026-04-12Feiner Bros NEW90Ioni Bowcher
1039Tony FollerUnited Kingdom2026-03-28Feltz Printing Service NEGOTIATION38Ioni Bowcher
1040Octavia MaletSpain2026-04-03Chapman, Ross E Esq QUALIFIED35Asiya Javayant
1041David DarakjyAustralia2026-03-31Feiner Bros PROPOSAL85Ioni Bowcher
1042Johnson SergiUnited Kingdom2026-04-15Commercial Press NEW35Ivan Magalhaes
1043Kadeem FlosiSpain2026-04-01Morlong Associates NEGOTIATION12Ivan Magalhaes
1044Greenwood BologniaSpain2026-03-29Morlong Associates NEGOTIATION63Elwin Sharvill
1045Johnson SergiCanada2026-04-07Rangoni Of Florence NEW40Xuxue Feng
1046Murillo MaletIndia2026-04-16Chanay, Jeffrey A Esq QUALIFIED14Amy Elsner
1047Sinclair WaycottCanada2026-04-17Dorl, James J Esq NEGOTIATION75Elwin Sharvill
1048Jefferson SchemmerAustralia2026-03-28Feiner Bros RENEWAL88Anna Fali
1049James ButtIndia2026-03-27King, Christopher A Esq NEW9Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Aditya KuskoIndiaIoni Bowcher UNQUALIFIED
Claire TollnerJapanAmy Elsner PROPOSAL
Arvin AlbaresRussiaBernardo Dominic QUALIFIED
David DarakjyItalyAnna Fali RENEWAL
Morrow RutaGermanyIoni Bowcher NEW
Leja CaldareraGermanyAsiya Javayant RENEWAL
Izzy GarufiItalyStephen Shaw QUALIFIED
Ashley DoeAustraliaAnna Fali QUALIFIED
Alejandro PerinJapanOnyama Limba NEGOTIATION
Wickens NestleIndiaStephen Shaw UNQUALIFIED
Ricardo GauchoRussiaXuxue Feng UNQUALIFIED
Salvatore StockhamRussiaIoni Bowcher PROPOSAL
Alejandro PerinSpainBernardo Dominic PROPOSAL
James ButtItalyOnyama Limba PROPOSAL
Adams MorascaBrazilStephen Shaw PROPOSAL
James ButtCanadaAnna Fali RENEWAL
Nicolas IturbideRussiaAnna Fali NEGOTIATION
David DarakjyBrazilIvan Magalhaes RENEWAL
Claire TollnerSpainAmy Elsner PROPOSAL
Mujtaba NickaUnited KingdomIoni Bowcher UNQUALIFIED
Misaki RoysterIndiaStephen Shaw RENEWAL
Chavez BriddickJapanElwin Sharvill QUALIFIED
Wickens NestleRussiaAsiya Javayant NEW
Wickens NestleItalyElwin Sharvill NEW
Nicolas IturbideFranceAmy Elsner RENEWAL
Leon OldroydArgentinaAnna Fali NEW
Darci PoquetteIndiaAmy Elsner NEGOTIATION
Alejandro PerinIndiaOnyama Limba NEGOTIATION
Morrow RutaJapanAmy Elsner NEGOTIATION
Mayumi KolmetzArgentinaXuxue Feng NEW
Mujtaba NickaAustraliaBernardo Dominic PROPOSAL
Jones VocelkaJapanAmy Elsner PROPOSAL
Francesco ShinkoItalyIvan Magalhaes NEGOTIATION
Maria MarrierBrazilBernardo Dominic NEGOTIATION
Ricardo GauchoUnited KingdomStephen Shaw RENEWAL
Cody SaylorsUnited KingdomAmy Elsner RENEWAL
James ButtJapanXuxue Feng NEW
Mujtaba NickaIndiaBernardo Dominic QUALIFIED
Aruna FigeroaAustraliaBernardo Dominic RENEWAL
Misaki RoysterJapanElwin Sharvill RENEWAL
Francesco ShinkoUnited KingdomAnna Fali PROPOSAL
Ashley DoeFranceAmy Elsner NEGOTIATION
Tony FollerGermanyAmy Elsner NEW
Aditya KuskoItalyXuxue Feng UNQUALIFIED
Jones VocelkaAustraliaAnna Fali PROPOSAL
David DarakjyFranceXuxue Feng RENEWAL
Jennifer AmigonJapanXuxue Feng NEW
Mayumi KolmetzRussiaAsiya Javayant QUALIFIED
Jennifer AmigonFranceBernardo Dominic NEW
Octavia MaletBrazilStephen Shaw RENEWAL
Frozen Columns
Name
Cody Saylors
Ashley Doe
Aika Inouye
Misaki Royster
Julie Stenseth
Murillo Malet
Leon Oldroyd
Emily Whobrey
Misaki Royster
Aruna Figeroa
Faith Gillian
Kaitlin Ostrosky
Wickens Nestle
Stacey Maclead
Ivar Paprocki
Mayumi Kolmetz
Misaki Royster
David Darakjy
Silvio Slusarski
Kadeem Flosi
Ricardo Gaucho
Mayumi Kolmetz
Smith Glick
Maisha Rulapaugh
Morrow Ruta
Misaki Royster
Arvin Albares
Misaki Royster
Octavia Malet
Darci Poquette
Aruna Figeroa
Murillo Malet
Aditya Kusko
Mayumi Kolmetz
Kadeem Flosi
Jones Vocelka
David Darakjy
Darci Poquette
Darci Poquette
Leja Caldarera
Octavia Malet
Clifford Rim
Julie Stenseth
Faith Gillian
Izzy Garufi
Ivar Paprocki
Nicolas Iturbide
Clifford Rim
David Darakjy
Isabel Bowley
IdCountryDate
1000India2026-04-16
1001Spain2026-04-11
1002United Kingdom2026-04-18
1003Canada2026-03-31
1004France2026-04-08
1005Spain2026-04-24
1006United Kingdom2026-04-04
1007Argentina2026-04-12
1008United Kingdom2026-04-14
1009India2026-04-17
1010Germany2026-03-30
1011Russia2026-03-29
1012Spain2026-04-17
1013Brazil2026-04-14
1014France2026-04-24
1015Brazil2026-04-16
1016Germany2026-04-01
1017United Kingdom2026-04-14
1018Argentina2026-04-23
1019India2026-04-08
1020Japan2026-03-30
1021Argentina2026-04-20
1022Italy2026-04-18
1023Brazil2026-04-02
1024France2026-04-08
1025United Kingdom2026-03-29
1026France2026-04-02
1027Germany2026-04-08
1028Argentina2026-03-26
1029Germany2026-04-04
1030Spain2026-04-22
1031Italy2026-04-17
1032Brazil2026-04-15
1033Australia2026-03-29
1034Brazil2026-04-02
1035Australia2026-03-26
1036Russia2026-04-05
1037India2026-04-03
1038Australia2026-03-30
1039Germany2026-04-11
1040Germany2026-04-03
1041India2026-03-28
1042Italy2026-04-21
1043France2026-04-20
1044Argentina2026-04-01
1045Brazil2026-04-04
1046France2026-04-06
1047Argentina2026-04-19
1048Argentina2026-04-16
1049Spain2026-04-11

On-Demand Data

NameIdCountryDate
Juan Wieser1000Spain2026-03-31
Izzy Garufi1001France2026-04-23
Leja Caldarera1002United Kingdom2026-04-11
Deepesh Chui1003Brazil2026-03-30
James Butt1004Spain2026-04-24
Darci Poquette1005Brazil2026-03-29
Kaitlin Ostrosky1006Brazil2026-04-05
Faith Gillian1007Spain2026-04-17
Claire Tollner1008Italy2026-04-21
Adams Morasca1009Brazil2026-04-13
Maria Marrier1010United Kingdom2026-04-03
Stacey Maclead1011India2026-04-11
Leja Caldarera1012India2026-04-03
Mujtaba Nicka1013India2026-04-04
Morrow Ruta1014France2026-04-12
Octavia Malet1015Russia2026-03-29
Aruna Figeroa1016Germany2026-04-20
Arvin Albares1017Italy2026-03-30
Mujtaba Nicka1018Canada2026-03-29
Johnson Sergi1019Canada2026-04-05
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Claire TollnerSpainIoni Bowcher NEW
Mayumi KolmetzUnited KingdomIvan Magalhaes PROPOSAL
Misaki RoysterJapanIoni Bowcher PROPOSAL
Maria MarrierCanadaElwin Sharvill RENEWAL
Maisha RulapaughItalyBernardo Dominic PROPOSAL
Clifford RimGermanyAsiya Javayant NEW
Ricardo GauchoCanadaStephen Shaw UNQUALIFIED
Antonio CaudyBrazilOnyama Limba NEW
Stacey MacleadJapanOnyama Limba NEGOTIATION
Ricardo GauchoJapanAsiya Javayant NEGOTIATION
Cody SaylorsRussiaElwin Sharvill NEW
Jefferson SchemmerGermanyAsiya Javayant NEGOTIATION
Tony FollerFranceIoni Bowcher NEGOTIATION
David DarakjyJapanOnyama Limba QUALIFIED
Smith GlickCanadaBernardo Dominic PROPOSAL
Ashley DoeGermanyStephen Shaw PROPOSAL
Isabel BowleyUnited KingdomBernardo Dominic UNQUALIFIED
Maria MarrierArgentinaAsiya Javayant NEGOTIATION
Stacey MacleadUnited KingdomAsiya Javayant NEW
Kadeem FlosiRussiaAmy Elsner RENEWAL
Cody SaylorsRussiaStephen Shaw PROPOSAL
Misaki RoysterSpainElwin Sharvill PROPOSAL
Aika InouyeIndiaIvan Magalhaes NEGOTIATION
Deepesh ChuiSpainIvan Magalhaes NEGOTIATION
Octavia MaletArgentinaElwin Sharvill RENEWAL
Greenwood BologniaBrazilAnna Fali UNQUALIFIED
Claire TollnerRussiaAmy Elsner QUALIFIED
Cody SaylorsCanadaStephen Shaw PROPOSAL
Jennifer AmigonAustraliaXuxue Feng RENEWAL
Kadeem FlosiArgentinaIvan Magalhaes NEW
Costa DilliardBrazilXuxue Feng RENEWAL
Alejandro PerinUnited KingdomBernardo Dominic NEW
Sinclair WaycottIndiaAmy Elsner NEGOTIATION
Wickens NestleCanadaStephen Shaw PROPOSAL
Tony FollerItalyElwin Sharvill QUALIFIED
Smith GlickBrazilAsiya Javayant RENEWAL
Francesco ShinkoSpainAmy Elsner PROPOSAL
Maria MarrierArgentinaIvan Magalhaes PROPOSAL
Morrow RutaSpainAnna Fali PROPOSAL
Kaitlin OstroskyFranceElwin Sharvill 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>