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
Claire TollnerItalyStephen Shaw QUALIFIED
Mujtaba NickaFranceStephen Shaw NEGOTIATION
Costa DilliardJapanStephen Shaw PROPOSAL
David DarakjyAustraliaElwin Sharvill NEW
Izzy GarufiItalyOnyama Limba RENEWAL
Misaki RoysterItalyIvan Magalhaes QUALIFIED
Smith GlickAustraliaAmy Elsner NEW
Greenwood BologniaCanadaAnna Fali NEGOTIATION
Jeanfrancois VenereSpainElwin Sharvill NEW
Alejandro PerinBrazilBernardo Dominic RENEWAL
Costa DilliardAustraliaBernardo Dominic NEW
Jones VocelkaAustraliaAmy Elsner NEGOTIATION
Greenwood BologniaSpainAnna Fali NEW
Smith GlickArgentinaAmy Elsner UNQUALIFIED
James ButtJapanElwin Sharvill RENEWAL
Tony FollerItalyOnyama Limba NEW
Claire TollnerAustraliaIvan Magalhaes PROPOSAL
Maria MarrierGermanyAmy Elsner QUALIFIED
Leja CaldareraRussiaXuxue Feng NEGOTIATION
Aika InouyeFranceAnna Fali PROPOSAL
Tony FollerIndiaAnna Fali PROPOSAL
Murillo MaletIndiaAnna Fali RENEWAL
Ricardo GauchoIndiaElwin Sharvill NEGOTIATION
Faith GillianRussiaIoni Bowcher NEGOTIATION
Clifford RimFranceIoni Bowcher QUALIFIED
Izzy GarufiFranceElwin Sharvill QUALIFIED
Misaki RoysterItalyElwin Sharvill QUALIFIED
Aika InouyeCanadaAsiya Javayant NEW
Ashley DoeGermanyIoni Bowcher PROPOSAL
Kadeem FlosiCanadaIoni Bowcher RENEWAL
Ivar PaprockiGermanyStephen Shaw RENEWAL
Maria MarrierGermanyStephen Shaw PROPOSAL
Aruna FigeroaSpainIvan Magalhaes UNQUALIFIED
Rodrigues CampainIndiaIoni Bowcher NEGOTIATION
Izzy GarufiAustraliaElwin Sharvill QUALIFIED
Greenwood BologniaBrazilIoni Bowcher RENEWAL
Deepesh ChuiIndiaOnyama Limba UNQUALIFIED
Claire TollnerFranceElwin Sharvill QUALIFIED
James ButtIndiaElwin Sharvill NEGOTIATION
Costa DilliardAustraliaXuxue Feng NEW
Rodrigues CampainGermanyAsiya Javayant RENEWAL
Chavez BriddickAustraliaStephen Shaw NEGOTIATION
Nicolas IturbideJapanAmy Elsner PROPOSAL
Aika InouyeGermanyElwin Sharvill NEW
Clifford RimArgentinaXuxue Feng NEW
Murillo MaletSpainStephen Shaw RENEWAL
Salvatore StockhamJapanElwin Sharvill QUALIFIED
Jennifer AmigonRussiaElwin Sharvill RENEWAL
Jennifer AmigonUnited KingdomAmy Elsner QUALIFIED
Jones VocelkaUnited KingdomAsiya Javayant PROPOSAL
Horizontal
NameCountryRepresentativeStatus
Juan WieserRussiaAmy Elsner RENEWAL
Clifford RimItalyXuxue Feng NEW
Johnson SergiRussiaAmy Elsner QUALIFIED
Smith GlickGermanyAnna Fali RENEWAL
Costa DilliardRussiaStephen Shaw NEGOTIATION
Mayumi KolmetzArgentinaElwin Sharvill UNQUALIFIED
Arvin AlbaresAustraliaStephen Shaw NEW
Aditya KuskoFranceStephen Shaw PROPOSAL
Julie StensethAustraliaAnna Fali RENEWAL
Aika InouyeGermanyElwin Sharvill NEW
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Aika InouyeBrazil2025-09-10Feiner Bros NEW73Anna Fali
1001Francesco ShinkoSpain2025-09-01Feiner Bros PROPOSAL54Xuxue Feng
1002Emily WhobreyAustralia2025-09-17King, Christopher A Esq NEW61Xuxue Feng
1003Maria MarrierRussia2025-09-21Chapman, Ross E Esq QUALIFIED56Ivan Magalhaes
1004Smith GlickItaly2025-09-02Feiner Bros UNQUALIFIED40Ivan Magalhaes
1005Antonio CaudyCanada2025-09-15Chapman, Ross E Esq NEW17Ioni Bowcher
1006Murillo MaletIndia2025-09-04Benton, John B Jr PROPOSAL33Ivan Magalhaes
1007Darci PoquetteBrazil2025-09-13Benton, John B Jr RENEWAL71Xuxue Feng
1008Julie StensethIndia2025-09-19Feiner Bros PROPOSAL35Stephen Shaw
1009Wickens NestleFrance2025-09-13Buckley Miller Wright NEGOTIATION10Elwin Sharvill
1010Maisha RulapaughItaly2025-09-13Printing Dimensions PROPOSAL10Bernardo Dominic
1011Aika InouyeJapan2025-09-24Chemel, James L Cpa QUALIFIED64Anna Fali
1012Aditya KuskoIndia2025-09-20Printing Dimensions QUALIFIED3Ivan Magalhaes
1013Rodrigues CampainRussia2025-09-14King, Christopher A Esq NEW14Asiya Javayant
1014Aika InouyeAustralia2025-09-21Chapman, Ross E Esq UNQUALIFIED45Ioni Bowcher
1015Wickens NestleItaly2025-09-19Truhlar And Truhlar Attys NEW5Onyama Limba
1016Arvin AlbaresCanada2025-09-10Benton, John B Jr QUALIFIED63Asiya Javayant
1017Darci PoquetteJapan2025-08-28Rousseaux, Michael Esq NEGOTIATION72Amy Elsner
1018Kaitlin OstroskyIndia2025-09-20Printing Dimensions PROPOSAL95Ioni Bowcher
1019Izzy GarufiSpain2025-09-23Feiner Bros NEGOTIATION58Asiya Javayant
1020Darci PoquetteUnited Kingdom2025-08-31Benton, John B Jr PROPOSAL55Xuxue Feng
1021Jennifer AmigonCanada2025-09-14Rousseaux, Michael Esq PROPOSAL55Elwin Sharvill
1022Smith GlickIndia2025-08-27Commercial Press NEGOTIATION6Stephen Shaw
1023Ricardo GauchoIndia2025-09-18Truhlar And Truhlar Attys NEGOTIATION47Bernardo Dominic
1024Mujtaba NickaUnited Kingdom2025-09-15Buckley Miller Wright PROPOSAL52Anna Fali
1025Leja CaldareraItaly2025-09-23Feiner Bros NEGOTIATION11Ivan Magalhaes
1026Mayumi KolmetzAustralia2025-09-10Truhlar And Truhlar Attys UNQUALIFIED63Xuxue Feng
1027Rodrigues CampainSpain2025-08-30Rousseaux, Michael Esq NEW65Onyama Limba
1028Maisha RulapaughJapan2025-09-21King, Christopher A Esq UNQUALIFIED26Xuxue Feng
1029Rodrigues CampainJapan2025-09-01Commercial Press NEW48Onyama Limba
1030Izzy GarufiArgentina2025-09-04Printing Dimensions NEW16Onyama Limba
1031Murillo MaletBrazil2025-09-16Printing Dimensions NEW5Onyama Limba
1032Emily WhobreyUnited Kingdom2025-08-31Dorl, James J Esq UNQUALIFIED35Amy Elsner
1033Jefferson SchemmerSpain2025-09-23Feiner Bros UNQUALIFIED99Elwin Sharvill
1034Claire TollnerIndia2025-09-08Feltz Printing Service RENEWAL78Asiya Javayant
1035Darci PoquetteGermany2025-09-17Morlong Associates QUALIFIED80Amy Elsner
1036Leon OldroydRussia2025-09-02Truhlar And Truhlar Attys NEGOTIATION53Asiya Javayant
1037Maisha RulapaughJapan2025-09-21Printing Dimensions PROPOSAL71Xuxue Feng
1038Isabel BowleySpain2025-09-23King, Christopher A Esq NEGOTIATION55Elwin Sharvill
1039Clifford RimIndia2025-09-10Chanay, Jeffrey A Esq UNQUALIFIED1Elwin Sharvill
1040Adams MorascaJapan2025-09-22Rangoni Of Florence NEGOTIATION26Ioni Bowcher
1041Isabel BowleyGermany2025-09-12Benton, John B Jr NEGOTIATION0Xuxue Feng
1042Morrow RutaGermany2025-09-15Chanay, Jeffrey A Esq PROPOSAL92Bernardo Dominic
1043Morrow RutaFrance2025-09-13Chapman, Ross E Esq UNQUALIFIED78Elwin Sharvill
1044Smith GlickArgentina2025-09-10Printing Dimensions PROPOSAL6Amy Elsner
1045Aika InouyeIndia2025-09-14Truhlar And Truhlar Attys NEW72Bernardo Dominic
1046Cody SaylorsArgentina2025-09-04Chanay, Jeffrey A Esq UNQUALIFIED43Ivan Magalhaes
1047Izzy GarufiSpain2025-09-01Buckley Miller Wright PROPOSAL3Bernardo Dominic
1048Morrow RutaJapan2025-09-05Rangoni Of Florence PROPOSAL53Onyama Limba
1049Silvio SlusarskiIndia2025-09-03Truhlar And Truhlar Attys NEW25Amy Elsner
Frozen Rows
NameCountryRepresentativeStatus
Alejandro PerinFranceXuxue Feng RENEWAL
Aditya KuskoUnited KingdomElwin Sharvill UNQUALIFIED
Adams MorascaSpainAnna Fali RENEWAL
Greenwood BologniaArgentinaXuxue Feng QUALIFIED
Stacey MacleadRussiaAmy Elsner RENEWAL
Leon OldroydArgentinaXuxue Feng NEGOTIATION
Ashley DoeJapanAmy Elsner PROPOSAL
Isabel BowleyGermanyIoni Bowcher UNQUALIFIED
Deepesh ChuiArgentinaIvan Magalhaes RENEWAL
Izzy GarufiIndiaIvan Magalhaes RENEWAL
Juan WieserCanadaAnna Fali PROPOSAL
Darci PoquetteBrazilAsiya Javayant RENEWAL
Aika InouyeIndiaStephen Shaw QUALIFIED
Francesco ShinkoJapanStephen Shaw UNQUALIFIED
Jones VocelkaRussiaAsiya Javayant PROPOSAL
Claire TollnerUnited KingdomBernardo Dominic NEGOTIATION
Smith GlickRussiaXuxue Feng PROPOSAL
Julie StensethGermanyIoni Bowcher RENEWAL
Aditya KuskoFranceElwin Sharvill RENEWAL
Morrow RutaJapanElwin Sharvill RENEWAL
Ashley DoeSpainBernardo Dominic RENEWAL
Antonio CaudyAustraliaBernardo Dominic PROPOSAL
Emily WhobreyBrazilIoni Bowcher RENEWAL
Ashley DoeIndiaOnyama Limba RENEWAL
Darci PoquetteUnited KingdomAmy Elsner RENEWAL
David DarakjySpainOnyama Limba QUALIFIED
Nicolas IturbideCanadaOnyama Limba NEGOTIATION
Ricardo GauchoAustraliaXuxue Feng NEGOTIATION
Nicolas IturbideItalyAsiya Javayant RENEWAL
Jefferson SchemmerRussiaIoni Bowcher NEGOTIATION
Jefferson SchemmerRussiaElwin Sharvill PROPOSAL
Rodrigues CampainGermanyAsiya Javayant PROPOSAL
Leja CaldareraJapanAsiya Javayant NEGOTIATION
Emily WhobreyFranceAmy Elsner NEW
Stacey MacleadRussiaIoni Bowcher NEW
Claire TollnerIndiaIvan Magalhaes NEGOTIATION
Stacey MacleadFranceAnna Fali RENEWAL
Jennifer AmigonCanadaStephen Shaw NEGOTIATION
Kadeem FlosiSpainIvan Magalhaes NEW
Juan WieserJapanAmy Elsner UNQUALIFIED
Greenwood BologniaBrazilAmy Elsner QUALIFIED
Darci PoquetteJapanAsiya Javayant PROPOSAL
Clifford RimIndiaOnyama Limba RENEWAL
Nicolas IturbideSpainIoni Bowcher NEW
Arvin AlbaresItalyElwin Sharvill RENEWAL
Maisha RulapaughAustraliaAnna Fali PROPOSAL
Ashley DoeJapanElwin Sharvill NEGOTIATION
Johnson SergiGermanyAmy Elsner NEW
Aika InouyeBrazilAnna Fali RENEWAL
Mayumi KolmetzUnited KingdomOnyama Limba NEGOTIATION
Frozen Columns
Name
Adams Morasca
Costa Dilliard
Costa Dilliard
Aditya Kusko
Antonio Caudy
Aika Inouye
Nicolas Iturbide
Jeanfrancois Venere
Greenwood Bolognia
Ashley Doe
Sinclair Waycott
Nicolas Iturbide
Jennifer Amigon
Adams Morasca
Jennifer Amigon
Johnson Sergi
Juan Wieser
Smith Glick
Izzy Garufi
Greenwood Bolognia
Chavez Briddick
Julie Stenseth
Faith Gillian
Maria Marrier
Morrow Ruta
Francesco Shinko
Claire Tollner
Jefferson Schemmer
Claire Tollner
Clifford Rim
Silvio Slusarski
Costa Dilliard
Johnson Sergi
Rodrigues Campain
Alejandro Perin
Wickens Nestle
Jennifer Amigon
Julie Stenseth
Leja Caldarera
Emily Whobrey
Johnson Sergi
Octavia Malet
Aruna Figeroa
Jennifer Amigon
Darci Poquette
Aika Inouye
Mayumi Kolmetz
Claire Tollner
Aditya Kusko
Smith Glick
IdCountryDate
1000United Kingdom2025-09-21
1001France2025-09-08
1002Brazil2025-09-04
1003Australia2025-09-03
1004Italy2025-08-28
1005Japan2025-09-13
1006Italy2025-09-01
1007Russia2025-09-08
1008Argentina2025-09-04
1009Italy2025-09-03
1010Germany2025-09-05
1011Germany2025-08-28
1012Italy2025-09-19
1013Brazil2025-08-26
1014United Kingdom2025-08-29
1015Japan2025-09-12
1016Germany2025-09-17
1017United Kingdom2025-09-02
1018Germany2025-09-10
1019Argentina2025-09-01
1020Germany2025-09-24
1021Spain2025-09-20
1022Italy2025-09-21
1023France2025-09-19
1024Spain2025-09-02
1025Brazil2025-09-24
1026Japan2025-09-23
1027Russia2025-09-19
1028Italy2025-09-18
1029Germany2025-09-17
1030Brazil2025-09-16
1031Germany2025-09-19
1032Germany2025-09-03
1033Italy2025-09-14
1034Argentina2025-09-22
1035United Kingdom2025-09-02
1036United Kingdom2025-09-12
1037Canada2025-09-11
1038Brazil2025-09-08
1039Germany2025-08-28
1040Australia2025-09-02
1041Russia2025-09-11
1042India2025-09-21
1043Spain2025-09-19
1044Japan2025-09-19
1045Italy2025-08-26
1046Russia2025-09-01
1047Canada2025-08-26
1048Australia2025-09-22
1049Australia2025-08-29

On-Demand Data

NameIdCountryDate
Salvatore Stockham1000India2025-09-02
Izzy Garufi1001Canada2025-09-21
David Darakjy1002Argentina2025-08-29
Aruna Figeroa1003Germany2025-09-03
Aruna Figeroa1004India2025-09-17
Clifford Rim1005France2025-09-22
David Darakjy1006Spain2025-09-19
Jefferson Schemmer1007United Kingdom2025-09-22
Maria Marrier1008United Kingdom2025-09-01
Arvin Albares1009Argentina2025-08-27
Morrow Ruta1010Argentina2025-09-13
Julie Stenseth1011France2025-09-02
Clifford Rim1012United Kingdom2025-08-28
David Darakjy1013Russia2025-08-26
Clifford Rim1014Russia2025-09-15
Claire Tollner1015Spain2025-08-27
Salvatore Stockham1016Brazil2025-09-16
Francesco Shinko1017Russia2025-09-12
Juan Wieser1018Brazil2025-09-23
Aruna Figeroa1019Canada2025-09-13
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
James ButtItalyAnna Fali PROPOSAL
Leja CaldareraItalyIoni Bowcher QUALIFIED
Ivar PaprockiIndiaBernardo Dominic NEW
Cody SaylorsJapanIoni Bowcher NEW
Adams MorascaCanadaOnyama Limba PROPOSAL
Emily WhobreyRussiaBernardo Dominic RENEWAL
Nicolas IturbideJapanAmy Elsner NEW
Ricardo GauchoBrazilIoni Bowcher NEW
Greenwood BologniaJapanAsiya Javayant UNQUALIFIED
Murillo MaletCanadaStephen Shaw RENEWAL
James ButtFranceAnna Fali NEW
Munro FerenczItalyElwin Sharvill UNQUALIFIED
Ashley DoeItalyAmy Elsner NEGOTIATION
Antonio CaudyCanadaIvan Magalhaes NEGOTIATION
Emily WhobreySpainOnyama Limba UNQUALIFIED
Misaki RoysterGermanyIvan Magalhaes UNQUALIFIED
James ButtBrazilAnna Fali UNQUALIFIED
Aika InouyeBrazilAmy Elsner NEW
Izzy GarufiItalyBernardo Dominic UNQUALIFIED
Aruna FigeroaCanadaIvan Magalhaes RENEWAL
Jeanfrancois VenereGermanyAnna Fali RENEWAL
Murillo MaletRussiaIvan Magalhaes RENEWAL
Cody SaylorsItalyElwin Sharvill RENEWAL
Leon OldroydIndiaBernardo Dominic PROPOSAL
Faith GillianIndiaStephen Shaw UNQUALIFIED
Johnson SergiItalyXuxue Feng NEGOTIATION
Aruna FigeroaGermanyStephen Shaw NEW
Morrow RutaSpainIoni Bowcher QUALIFIED
Ivar PaprockiJapanBernardo Dominic QUALIFIED
Johnson SergiRussiaAsiya Javayant NEGOTIATION
Smith GlickCanadaAmy Elsner NEW
Maisha RulapaughGermanyStephen Shaw PROPOSAL
Isabel BowleyBrazilAsiya Javayant UNQUALIFIED
Ricardo GauchoJapanElwin Sharvill NEGOTIATION
Chavez BriddickRussiaBernardo Dominic QUALIFIED
Johnson SergiIndiaIoni Bowcher NEW
Mujtaba NickaBrazilIvan Magalhaes NEW
Chavez BriddickAustraliaBernardo Dominic QUALIFIED
Cody SaylorsCanadaStephen Shaw NEW
Alejandro PerinItalyOnyama Limba 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>