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
Leon OldroydFranceStephen Shaw NEGOTIATION
Adams MorascaGermanyElwin Sharvill RENEWAL
Aditya KuskoItalyElwin Sharvill PROPOSAL
Salvatore StockhamGermanyElwin Sharvill UNQUALIFIED
Jennifer AmigonItalyAmy Elsner NEGOTIATION
Silvio SlusarskiBrazilBernardo Dominic QUALIFIED
Maisha RulapaughIndiaXuxue Feng PROPOSAL
Emily WhobreyItalyAsiya Javayant NEGOTIATION
Morrow RutaFranceAmy Elsner RENEWAL
Chavez BriddickSpainAsiya Javayant RENEWAL
Emily WhobreyItalyAnna Fali NEW
Silvio SlusarskiAustraliaBernardo Dominic NEW
Ivar PaprockiAustraliaStephen Shaw NEGOTIATION
Octavia MaletItalyBernardo Dominic NEW
Ricardo GauchoAustraliaAmy Elsner NEW
David DarakjyJapanAmy Elsner QUALIFIED
Murillo MaletRussiaAsiya Javayant PROPOSAL
Ashley DoeFranceStephen Shaw NEW
Jones VocelkaRussiaOnyama Limba NEGOTIATION
Leja CaldareraJapanAsiya Javayant NEW
Ricardo GauchoAustraliaElwin Sharvill UNQUALIFIED
Emily WhobreyItalyIvan Magalhaes PROPOSAL
Francesco ShinkoItalyIoni Bowcher NEW
Emily WhobreyUnited KingdomElwin Sharvill RENEWAL
Maisha RulapaughAustraliaElwin Sharvill NEGOTIATION
Antonio CaudySpainIvan Magalhaes UNQUALIFIED
Aruna FigeroaBrazilIvan Magalhaes PROPOSAL
Jones VocelkaItalyOnyama Limba NEW
Mayumi KolmetzBrazilStephen Shaw NEGOTIATION
Maria MarrierCanadaAnna Fali NEGOTIATION
Leon OldroydGermanyIvan Magalhaes NEW
Greenwood BologniaUnited KingdomOnyama Limba NEW
Kaitlin OstroskyItalyAsiya Javayant NEW
Octavia MaletIndiaAnna Fali NEW
Antonio CaudyIndiaXuxue Feng RENEWAL
Tony FollerJapanBernardo Dominic PROPOSAL
Izzy GarufiFranceStephen Shaw QUALIFIED
Costa DilliardGermanyStephen Shaw NEW
Izzy GarufiIndiaXuxue Feng NEGOTIATION
Clifford RimBrazilAmy Elsner NEGOTIATION
Adams MorascaCanadaAmy Elsner UNQUALIFIED
Clifford RimJapanStephen Shaw QUALIFIED
Adams MorascaRussiaBernardo Dominic PROPOSAL
Ivar PaprockiIndiaXuxue Feng QUALIFIED
Smith GlickBrazilAnna Fali QUALIFIED
Salvatore StockhamGermanyIvan Magalhaes QUALIFIED
David DarakjyAustraliaAnna Fali NEGOTIATION
Nicolas IturbideBrazilOnyama Limba NEW
Emily WhobreyUnited KingdomAsiya Javayant QUALIFIED
Adams MorascaGermanyStephen Shaw QUALIFIED
Horizontal
NameCountryRepresentativeStatus
Kaitlin OstroskyBrazilAnna Fali PROPOSAL
Clifford RimSpainXuxue Feng NEGOTIATION
Jeanfrancois VenereCanadaStephen Shaw RENEWAL
Costa DilliardUnited KingdomAsiya Javayant NEGOTIATION
Aika InouyeSpainXuxue Feng QUALIFIED
Juan WieserArgentinaIoni Bowcher RENEWAL
Cody SaylorsJapanOnyama Limba NEW
Leja CaldareraRussiaStephen Shaw NEW
Jefferson SchemmerGermanyBernardo Dominic PROPOSAL
Darci PoquetteJapanBernardo Dominic QUALIFIED
Horizontal and Vertical
IdNameCountryDateCompanyStatusActivityRepresentative
1000Izzy GarufiRussia2026-06-02Rousseaux, Michael Esq NEGOTIATION35Elwin Sharvill
1001Maria MarrierGermany2026-05-11Morlong Associates NEW30Stephen Shaw
1002Adams MorascaItaly2026-05-11Feiner Bros PROPOSAL13Elwin Sharvill
1003Leja CaldareraBrazil2026-05-20Buckley Miller Wright RENEWAL74Elwin Sharvill
1004Leon OldroydArgentina2026-05-12Benton, John B Jr PROPOSAL87Onyama Limba
1005Faith GillianSpain2026-05-19Chapman, Ross E Esq PROPOSAL74Ivan Magalhaes
1006Jones VocelkaRussia2026-05-25Rousseaux, Michael Esq PROPOSAL79Bernardo Dominic
1007Rodrigues CampainJapan2026-05-22Printing Dimensions QUALIFIED78Ivan Magalhaes
1008Darci PoquetteBrazil2026-05-12Morlong Associates QUALIFIED26Stephen Shaw
1009Isabel BowleyRussia2026-05-29Chemel, James L Cpa QUALIFIED11Bernardo Dominic
1010Mayumi KolmetzAustralia2026-05-07Chapman, Ross E Esq NEGOTIATION74Stephen Shaw
1011Maria MarrierRussia2026-05-28Chapman, Ross E Esq NEGOTIATION83Anna Fali
1012Cody SaylorsItaly2026-05-08Chemel, James L Cpa NEW62Stephen Shaw
1013Deepesh ChuiFrance2026-06-01Chapman, Ross E Esq NEGOTIATION43Xuxue Feng
1014Isabel BowleyCanada2026-05-08Commercial Press NEGOTIATION91Ivan Magalhaes
1015Rodrigues CampainUnited Kingdom2026-05-07Dorl, James J Esq NEW1Stephen Shaw
1016Emily WhobreyGermany2026-05-08Truhlar And Truhlar Attys QUALIFIED47Elwin Sharvill
1017Juan WieserRussia2026-05-17Benton, John B Jr RENEWAL72Ioni Bowcher
1018Jones VocelkaSpain2026-05-31Truhlar And Truhlar Attys NEGOTIATION53Ioni Bowcher
1019Maria MarrierFrance2026-05-13Feiner Bros QUALIFIED49Bernardo Dominic
1020Ricardo GauchoArgentina2026-05-13Truhlar And Truhlar Attys QUALIFIED54Ioni Bowcher
1021Faith GillianRussia2026-05-26Rangoni Of Florence UNQUALIFIED46Anna Fali
1022Izzy GarufiUnited Kingdom2026-05-22Rangoni Of Florence UNQUALIFIED0Stephen Shaw
1023Cody SaylorsAustralia2026-05-19Truhlar And Truhlar Attys NEGOTIATION98Elwin Sharvill
1024Juan WieserRussia2026-05-07Printing Dimensions PROPOSAL77Elwin Sharvill
1025Ashley DoeArgentina2026-05-25Dorl, James J Esq UNQUALIFIED35Xuxue Feng
1026Chavez BriddickIndia2026-05-25Feltz Printing Service NEW1Asiya Javayant
1027Deepesh ChuiSpain2026-05-25Feiner Bros PROPOSAL98Bernardo Dominic
1028Mujtaba NickaIndia2026-05-31Chemel, James L Cpa NEW2Onyama Limba
1029Ivar PaprockiArgentina2026-05-14Feiner Bros PROPOSAL43Anna Fali
1030Leja CaldareraSpain2026-05-18Rangoni Of Florence RENEWAL52Amy Elsner
1031Jefferson SchemmerUnited Kingdom2026-05-15King, Christopher A Esq NEGOTIATION13Asiya Javayant
1032Mayumi KolmetzBrazil2026-05-05Truhlar And Truhlar Attys QUALIFIED31Amy Elsner
1033Aditya KuskoIndia2026-05-14Chapman, Ross E Esq UNQUALIFIED83Amy Elsner
1034Stacey MacleadAustralia2026-05-28Morlong Associates NEW51Xuxue Feng
1035Misaki RoysterAustralia2026-05-25Benton, John B Jr RENEWAL30Ivan Magalhaes
1036Darci PoquetteCanada2026-05-24Chemel, James L Cpa NEW19Amy Elsner
1037Jennifer AmigonItaly2026-05-18Chanay, Jeffrey A Esq NEGOTIATION42Ioni Bowcher
1038Aruna FigeroaRussia2026-05-15Morlong Associates UNQUALIFIED58Stephen Shaw
1039Greenwood BologniaArgentina2026-05-17Commercial Press PROPOSAL66Asiya Javayant
1040James ButtIndia2026-05-21Buckley Miller Wright NEW79Onyama Limba
1041Deepesh ChuiArgentina2026-05-27Morlong Associates QUALIFIED74Anna Fali
1042Costa DilliardGermany2026-05-12King, Christopher A Esq UNQUALIFIED29Elwin Sharvill
1043Darci PoquetteAustralia2026-05-13Feltz Printing Service QUALIFIED97Onyama Limba
1044Aditya KuskoSpain2026-05-27Chanay, Jeffrey A Esq RENEWAL23Anna Fali
1045David DarakjyUnited Kingdom2026-05-30Rousseaux, Michael Esq RENEWAL84Anna Fali
1046Ivar PaprockiIndia2026-05-22Rousseaux, Michael Esq QUALIFIED89Ivan Magalhaes
1047Jones VocelkaIndia2026-05-09Benton, John B Jr NEGOTIATION27Xuxue Feng
1048Alejandro PerinSpain2026-05-12King, Christopher A Esq NEGOTIATION89Bernardo Dominic
1049Jennifer AmigonRussia2026-05-19Commercial Press PROPOSAL91Xuxue Feng
Frozen Rows
NameCountryRepresentativeStatus
Morrow RutaFranceIvan Magalhaes QUALIFIED
Octavia MaletJapanElwin Sharvill NEW
Jennifer AmigonRussiaStephen Shaw RENEWAL
Octavia MaletIndiaOnyama Limba NEW
Aruna FigeroaFranceXuxue Feng UNQUALIFIED
Stacey MacleadArgentinaAsiya Javayant RENEWAL
Silvio SlusarskiAustraliaOnyama Limba UNQUALIFIED
Faith GillianGermanyElwin Sharvill NEW
Smith GlickUnited KingdomOnyama Limba QUALIFIED
Faith GillianJapanAsiya Javayant PROPOSAL
Murillo MaletJapanElwin Sharvill UNQUALIFIED
Claire TollnerItalyOnyama Limba RENEWAL
David DarakjyGermanyStephen Shaw PROPOSAL
Francesco ShinkoJapanAsiya Javayant NEW
Ivar PaprockiItalyBernardo Dominic UNQUALIFIED
Rodrigues CampainBrazilAnna Fali NEW
Jennifer AmigonSpainAsiya Javayant QUALIFIED
Izzy GarufiAustraliaElwin Sharvill QUALIFIED
Emily WhobreyItalyIoni Bowcher NEGOTIATION
Stacey MacleadJapanIoni Bowcher RENEWAL
Nicolas IturbideRussiaElwin Sharvill PROPOSAL
Deepesh ChuiGermanyXuxue Feng NEGOTIATION
Munro FerenczItalyStephen Shaw NEW
Kadeem FlosiAustraliaAmy Elsner RENEWAL
Jennifer AmigonSpainXuxue Feng RENEWAL
Izzy GarufiRussiaStephen Shaw RENEWAL
Greenwood BologniaGermanyIvan Magalhaes NEGOTIATION
Aruna FigeroaBrazilStephen Shaw UNQUALIFIED
Morrow RutaUnited KingdomOnyama Limba PROPOSAL
Adams MorascaJapanAsiya Javayant RENEWAL
Jeanfrancois VenereCanadaAsiya Javayant RENEWAL
Leon OldroydJapanAmy Elsner NEW
Clifford RimIndiaIvan Magalhaes NEGOTIATION
Izzy GarufiAustraliaXuxue Feng NEW
Julie StensethArgentinaOnyama Limba QUALIFIED
Juan WieserItalyOnyama Limba NEW
Kaitlin OstroskyIndiaOnyama Limba NEGOTIATION
Ashley DoeJapanAsiya Javayant QUALIFIED
Julie StensethIndiaIvan Magalhaes PROPOSAL
Izzy GarufiBrazilXuxue Feng NEW
Octavia MaletItalyStephen Shaw NEW
Costa DilliardCanadaAsiya Javayant PROPOSAL
Clifford RimCanadaAnna Fali UNQUALIFIED
Ricardo GauchoAustraliaOnyama Limba UNQUALIFIED
Octavia MaletFranceIvan Magalhaes NEW
Maisha RulapaughAustraliaAsiya Javayant RENEWAL
Silvio SlusarskiItalyIoni Bowcher UNQUALIFIED
Aditya KuskoSpainBernardo Dominic PROPOSAL
Johnson SergiUnited KingdomAnna Fali NEW
Maria MarrierRussiaXuxue Feng PROPOSAL
Frozen Columns
Name
Jeanfrancois Venere
Ivar Paprocki
Francesco Shinko
Rodrigues Campain
Mayumi Kolmetz
Aruna Figeroa
Leja Caldarera
Isabel Bowley
Adams Morasca
Juan Wieser
Aditya Kusko
Adams Morasca
Murillo Malet
Munro Ferencz
Nicolas Iturbide
Kadeem Flosi
Maria Marrier
Jennifer Amigon
Jones Vocelka
Juan Wieser
Emily Whobrey
Alejandro Perin
Izzy Garufi
Adams Morasca
Murillo Malet
Ivar Paprocki
Morrow Ruta
Faith Gillian
Salvatore Stockham
Maria Marrier
Salvatore Stockham
Aditya Kusko
Chavez Briddick
Murillo Malet
Kaitlin Ostrosky
Maria Marrier
James Butt
Clifford Rim
Octavia Malet
Juan Wieser
Murillo Malet
Emily Whobrey
James Butt
Juan Wieser
Silvio Slusarski
Smith Glick
Emily Whobrey
Faith Gillian
Faith Gillian
Claire Tollner
IdCountryDate
1000Argentina2026-05-04
1001Brazil2026-05-07
1002Spain2026-05-17
1003Russia2026-05-12
1004Spain2026-05-17
1005Argentina2026-05-20
1006Russia2026-05-30
1007Canada2026-05-10
1008Spain2026-05-06
1009Spain2026-05-07
1010Brazil2026-05-06
1011Italy2026-05-30
1012Australia2026-05-27
1013Japan2026-05-25
1014Russia2026-05-27
1015France2026-05-06
1016Australia2026-05-15
1017India2026-05-21
1018France2026-05-11
1019Japan2026-05-20
1020Japan2026-05-22
1021Italy2026-05-27
1022Japan2026-05-31
1023Russia2026-05-30
1024Argentina2026-05-29
1025Argentina2026-05-26
1026Brazil2026-05-08
1027Japan2026-06-01
1028Australia2026-05-28
1029Italy2026-05-21
1030United Kingdom2026-05-17
1031France2026-05-23
1032Australia2026-06-01
1033Canada2026-05-26
1034Spain2026-05-28
1035Australia2026-05-27
1036Italy2026-05-10
1037Brazil2026-05-18
1038United Kingdom2026-05-29
1039Canada2026-05-17
1040Germany2026-05-16
1041Japan2026-05-13
1042Brazil2026-05-20
1043Japan2026-05-21
1044Argentina2026-05-30
1045Italy2026-05-07
1046United Kingdom2026-05-17
1047France2026-05-18
1048India2026-05-06
1049India2026-05-18

On-Demand Data

NameIdCountryDate
Aika Inouye1000Argentina2026-05-21
Misaki Royster1001Italy2026-05-13
Deepesh Chui1002India2026-05-24
Clifford Rim1003Italy2026-05-23
Nicolas Iturbide1004Russia2026-05-18
Aruna Figeroa1005France2026-05-09
Cody Saylors1006Brazil2026-05-19
Jennifer Amigon1007France2026-05-06
Murillo Malet1008Japan2026-05-04
Salvatore Stockham1009Brazil2026-05-29
Aditya Kusko1010India2026-05-05
Francesco Shinko1011Brazil2026-05-05
Stacey Maclead1012Brazil2026-05-24
Faith Gillian1013Japan2026-05-26
Mujtaba Nicka1014India2026-05-27
Maisha Rulapaugh1015Japan2026-05-27
Octavia Malet1016Russia2026-05-10
Misaki Royster1017Germany2026-05-21
Aika Inouye1018Australia2026-05-26
Leon Oldroyd1019Italy2026-05-27
Virtual Scrolling - 20000 Rows
NameCountryRepresentativeStatus
Nicolas IturbideSpainAmy Elsner UNQUALIFIED
Kadeem FlosiJapanIvan Magalhaes UNQUALIFIED
Murillo MaletJapanBernardo Dominic PROPOSAL
Ivar PaprockiFranceIvan Magalhaes NEGOTIATION
Costa DilliardRussiaAmy Elsner UNQUALIFIED
Costa DilliardArgentinaAmy Elsner QUALIFIED
Leon OldroydSpainXuxue Feng NEGOTIATION
Adams MorascaSpainElwin Sharvill RENEWAL
Isabel BowleySpainIoni Bowcher NEGOTIATION
Jefferson SchemmerIndiaIvan Magalhaes NEW
Maisha RulapaughUnited KingdomIoni Bowcher PROPOSAL
Faith GillianIndiaAnna Fali NEW
Ricardo GauchoAustraliaAsiya Javayant NEW
Mayumi KolmetzFranceElwin Sharvill QUALIFIED
Clifford RimGermanyStephen Shaw QUALIFIED
Claire TollnerUnited KingdomIvan Magalhaes QUALIFIED
Murillo MaletIndiaOnyama Limba PROPOSAL
Tony FollerUnited KingdomIvan Magalhaes PROPOSAL
Jennifer AmigonCanadaAmy Elsner PROPOSAL
Tony FollerIndiaBernardo Dominic RENEWAL
Juan WieserArgentinaXuxue Feng PROPOSAL
Ashley DoeSpainOnyama Limba RENEWAL
Francesco ShinkoArgentinaAnna Fali UNQUALIFIED
David DarakjyBrazilAnna Fali PROPOSAL
Arvin AlbaresCanadaAmy Elsner PROPOSAL
Leon OldroydItalyIoni Bowcher NEGOTIATION
Cody SaylorsItalyAnna Fali RENEWAL
Adams MorascaUnited KingdomIoni Bowcher QUALIFIED
Misaki RoysterJapanIoni Bowcher QUALIFIED
Aika InouyeGermanyAnna Fali NEW
Leon OldroydFranceStephen Shaw PROPOSAL
Ashley DoeItalyXuxue Feng NEGOTIATION
James ButtIndiaAnna Fali PROPOSAL
Misaki RoysterSpainXuxue Feng NEW
Wickens NestleArgentinaXuxue Feng NEW
Octavia MaletRussiaAsiya Javayant NEW
Adams MorascaAustraliaXuxue Feng UNQUALIFIED
Johnson SergiAustraliaAnna Fali UNQUALIFIED
Izzy GarufiIndiaStephen Shaw QUALIFIED
Antonio CaudyBrazilElwin Sharvill RENEWAL

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